DataGrid and menu

Radzen Studio Blazor Server
1

Hi
While trying to insert the "Menu" component into the grid line,
I noticed that the grid, as it were, is always a layer higher than the drop-down menu bar, which is why the grid closes it.
Image

2

You can set z-index for this menu item:

 <RadzenMenu>
   <RadzenMenuItem Text="General" Icon="home" Style="z-index:1000">
     <RadzenMenuItem Text="Buttons" Path="buttons" Icon="account_circle" />
     ...

or you can use the following for the whole menu:

 <RadzenMenu Style="position:relative;z-index:1000">
 ...
3

This solves the problem with the example screenshot above. I wanted to put the menu in the datagrid cell, here both methods fail

4

Radzen's default css sets the container's overflow to hidden, which is what clips the menu. The following worked for me.

Add a class to the RadzenGridColumn element that contains the menu:
CssClass="ui-cell-menu"

Then add CSS that sets the overflow to visible:
.ui-datatable-data td.ui-cell-menu .ui-cell-data {
overflow: visible;
}

Edit: I found an issue with this solution. The solution breaks the menu out of the cell, but appears to still be clipped by the grid. The solution works fine unless there are only a couple of rows in the grid, in which case the menu gets clipped again.

1 Like