Legacy grid to DataGrid .css migration

Radzen.Blazor Components
1

Hello @Team

Recently I migrated the legacy Grid's to DataGrid's. There were .css issues regarding font weight and size, filter column margin and some borders were invisible, for example. Did some cleanup, based on what is being generated by Radzen, but couldn't fix everything.

There is this problem where the paging view renders, even though it's off. Virtualization and scrolling seems to be messy too. Do you have any idea on what might be the cause?

image
image1645×891 62 KB

Here's with a fixed height to force scrolling:

image
image1156×813 47.1 KB 

<RadzenDataGrid @ref=@(Grid) AllowColumnResize="true" AllowFiltering="true"
AllowSorting="true" AllowVirtualization="true" Data=@(FilteredItems) 
EmptyText="" FilterMode="FilterMode.Simple" PageSize=@(DefaultMaxPageSize)
RowSelect=@(DataGridRowSelect) TItem="T" Visible=@(CanView)>

Blazor Server, .NET 5

UPDATE: actually, that extra blank space at the bottom is not the paging, it's the other items that are not rendering at the time.

image
image1155×881 45.4 KB

2

I am afraid we can't determine what is causing those issues based on the screenshots.

  1. Can you reproduce any of those issues with a built-in Radzen theme (or in the online demos)?
  2. How did you create your custom theme? Did you use the ThemeBuilder alone or did you manually edit CSS? The RadzenDataGrid uses different rendering and sometimes CSS classes than RadzenGrid.
3

No, unfortunately.

We had to manually edit the CSS. Right after the 3.0.0 release, I passed the files that were generated by Radzen to our marketing team and they edited colors, borders, margins and some other small bits. So yeah, today we have a static CSS that is likely missing the classes for the DataGrid component.

What do you suggest? Maybe editing in the ThemeBuilder could fix it?

4

You can create a custom theme however it would create a brand new CSS file which won't be easy to merge with your existing one.

I recommend you check if the DataGrid CSS is present in your theme CSS file. Probably some of the new CSS rules for the DataGrid are missing. Look for stuff starting with .rz-data-grid

5

Are there only 2 rules for the DataGrid? That was all I could find and both are present in my CSS.

image
image1732×782 57.9 KB

image
image1657×654 59.7 KB

6

Here is the commit which adds most of the RadzenDataGrid styling (but there is more). The rz-grid-table classes are also used as well as others.

7

Thanks for these links! I'll use them to update my CSS.

8

Alright, my CSS have all needed classes and properties. However, there is one issue with rows not being rendered if not reaching a certain total count/height. Here's how it looks like, with a Data.Count() at the bottom left for validation purposes.

VirtualizationBug

Additionally to the CSS, there is a max-height in the component style.

9

Not sure what this is from the screenshot. Try inspecting it to see what this element is and compare its styles with the ones in the online demos. Also I think our virtualization demos use height instead of min-height. I think this is required by the Blazor built-in virtualization panel - to know the exact height.

10

Hopefully this .gif can explain better my issue:
VirtualizationBug

The only difference I could spot is that in the demo there are two div's, one at the top and another at the bottom (implemented by virtualization, I suppose), with the expected total height of the elements above and below the rendered rows, while in my app these div's are always 0 height and the rows that were supposed to render are div's waiting to be rendered into the table rows.

My app:

image
image776×495 24.2 KB

Demo:

image
image825×524 22.7 KB

UPDATE: this issue is only for small amounts of data, when the total height of the rows is smaller than twice the height of the grid, approximately.

11

I think this is how the Blazor virtualize works. If you have less data than the grid height things like this will happen. Either increase the PageSize of the DataGrid or set a smaller height.

1 Like
12

Changing the DataGrid height did not work. Increasing the PageSize from the default 10 to 30 fixed it, thanks!