Bug - Menu in DataGrid shows incorrectly due to z-index #312

Closed
opened 2026-01-29 17:35:11 +00:00 by claunia · 0 comments
Owner

Originally created by @vertonghenb on GitHub (Jan 28, 2022).

Describe the bug
MenuItems in DataGrid not rendering correctly, due to z-index.
image

To Reproduce
Steps to reproduce the behavior:

<p>This component demonstrates fetching data from a service.</p>
<RadzenDataGrid AllowFiltering="true" AllowColumnResize="true" FilterMode="FilterMode.Advanced" AllowSorting="true" PageSize="5" AllowPaging="true" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true"
                Data="@forecasts" TItem="WeatherForecast" ColumnWidth="300px" LogicalFilterOperator="LogicalFilterOperator.Or">

    <Columns>
        <RadzenDataGridColumn Visible="@multipleValues.Contains(nameof(WeatherForecast.Date))" TItem="WeatherForecast" Property="@nameof(WeatherForecast.Date)" Title="Datum" Frozen="true" FormatString="{0:d}" Width="70px" />
        <RadzenDataGridColumn Visible="@multipleValues.Contains(nameof(WeatherForecast.TemperatureC))" TItem="WeatherForecast" Property="@nameof(WeatherForecast.TemperatureC)" Title="Temp(C)" />
        <RadzenDataGridColumn Visible="@multipleValues.Contains(nameof(WeatherForecast.TemperatureF))" TItem="WeatherForecast" Property="@nameof(WeatherForecast.TemperatureF)" Title="Temp(C)" />
        <RadzenDataGridColumn Visible="@multipleValues.Contains(nameof(WeatherForecast.Summary))" TItem="WeatherForecast" Property="@nameof(WeatherForecast.Summary)" Title="Summary" Width="140px" />
        <RadzenDataGridColumn TItem="WeatherForecast" CssClass="actions">
            <Template>
                <RadzenMenu>
                    <RadzenMenuItem Icon="settings" Text="Actions"  >
                        <RadzenMenuItem Icon="account_circle" Text="Something"></RadzenMenuItem>
                        <RadzenMenuItem Text="Menu" Path="menu" Icon="line_weight"></RadzenMenuItem>
                        <RadzenMenuItem Text="FileInput" Path="fileinput" Icon="attach_file"></RadzenMenuItem>
                        <RadzenMenuItem Text="Dialog" Path="dialog" Icon="perm_media"></RadzenMenuItem>
                        <RadzenMenuItem Text="Notification" Path="notification" Icon="announcement"></RadzenMenuItem>
                    </RadzenMenuItem>
                </RadzenMenu>
            </Template>
        </RadzenDataGridColumn>
    </Columns>
</RadzenDataGrid>

Expected behavior
Shows the navigation menu higher than the menu.

Originally created by @vertonghenb on GitHub (Jan 28, 2022). **Describe the bug** MenuItems in DataGrid not rendering correctly, due to z-index. ![image](https://user-images.githubusercontent.com/10981553/151605830-05a3c246-1827-4594-bff6-096175a66b60.png) **To Reproduce** Steps to reproduce the behavior: ```razor <p>This component demonstrates fetching data from a service.</p> <RadzenDataGrid AllowFiltering="true" AllowColumnResize="true" FilterMode="FilterMode.Advanced" AllowSorting="true" PageSize="5" AllowPaging="true" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true" Data="@forecasts" TItem="WeatherForecast" ColumnWidth="300px" LogicalFilterOperator="LogicalFilterOperator.Or"> <Columns> <RadzenDataGridColumn Visible="@multipleValues.Contains(nameof(WeatherForecast.Date))" TItem="WeatherForecast" Property="@nameof(WeatherForecast.Date)" Title="Datum" Frozen="true" FormatString="{0:d}" Width="70px" /> <RadzenDataGridColumn Visible="@multipleValues.Contains(nameof(WeatherForecast.TemperatureC))" TItem="WeatherForecast" Property="@nameof(WeatherForecast.TemperatureC)" Title="Temp(C)" /> <RadzenDataGridColumn Visible="@multipleValues.Contains(nameof(WeatherForecast.TemperatureF))" TItem="WeatherForecast" Property="@nameof(WeatherForecast.TemperatureF)" Title="Temp(C)" /> <RadzenDataGridColumn Visible="@multipleValues.Contains(nameof(WeatherForecast.Summary))" TItem="WeatherForecast" Property="@nameof(WeatherForecast.Summary)" Title="Summary" Width="140px" /> <RadzenDataGridColumn TItem="WeatherForecast" CssClass="actions"> <Template> <RadzenMenu> <RadzenMenuItem Icon="settings" Text="Actions" > <RadzenMenuItem Icon="account_circle" Text="Something"></RadzenMenuItem> <RadzenMenuItem Text="Menu" Path="menu" Icon="line_weight"></RadzenMenuItem> <RadzenMenuItem Text="FileInput" Path="fileinput" Icon="attach_file"></RadzenMenuItem> <RadzenMenuItem Text="Dialog" Path="dialog" Icon="perm_media"></RadzenMenuItem> <RadzenMenuItem Text="Notification" Path="notification" Icon="announcement"></RadzenMenuItem> </RadzenMenuItem> </RadzenMenu> </Template> </RadzenDataGridColumn> </Columns> </RadzenDataGrid> ```` **Expected behavior** Shows the navigation menu higher than the menu.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#312