RadzenDataGrid Header Overlap Issue

Radzen.Blazor Components
1

We have encountered a new issue in our app. It seems like the header for the RadzenDataGrid is now overlapping dropdown menus. Here is a picture of it interfering with the dropdown on a RadzenMenuItem:

image
image935×735 30.8 KB

This issue did not exist before; we first noticed it at the start of the week and were hoping an update would fix it. However, we have updated the Radzen.Blazor NuGet package to its most recent version (10.0.5) and the issue still exists. We are using the Fluent theme if that is helpful. Do you have any suggestions on how to fix this? Thank you so much!

2

Can you replicate this in our demos?

3

I found the issue, but I am not sure how it happened. In the online Radzen Playground, the z-index for thead (the data grid header) is 2, but in my app, it is 3:

image
image2295×1850 440 KB

image
image2332×1655 334 KB

Manually forcing the z-index to 2 in my app fixes the problem:

.rz-grid-table thead {
    z-index: 2 !important;
}

It appears that I also need to do the same with the footer:

.rz-grid-table tfoot{
    z-index: 2 !important;
}
4

Try to regenerate the theme by selecting some other theme and select back your theme if you are using RBS.

5

Thank you, that is one of the things I tried before manually overriding the z-index in my prior message. However, after reading your message, I opened Radzen Blazor Studio to try it again and I got a notification that there was an update to the premium themes. After applying the update, the issue appears to be fixed! I removed my manual override, and the data grid is no longer overlapping the dropdown menus. Thank you for your help!