DataGrid Virtualization Doesn't Work when height set to >525px

Andre · October 14, 2021, 5:13am

When using virtualisation I'm setting height to >525 and the data doesn't virtualize correctly. In this instance I'm trying to set height to 700px. This particular list below has 18 items and it is only rendering the inital 10. If I change height back to 500, it renders correctly.

As you can see the grid is allocating enough space, but it is not rendering.

<RadzenDataGrid AllowFiltering="true" AllowColumnResize="true" AllowSorting="true"
				Data="@Workers" TItem="AxionUser" LogicalFilterOperator="LogicalFilterOperator.And" FilterMode="FilterMode.Simple" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowPaging="false" AllowVirtualization="true" Style="height:525px" >

korchev · October 14, 2021, 5:35am

Hi @Andre,

Try increasing the PageSize of your DataGrid. By default it is 10 and this is how many items are fetched and rendered.

Andre · October 15, 2021, 3:05am

Thanks, that does fix it.

So it would appear even when you start scrolling it doesn't try fetch new items.

briancarter · October 20, 2021, 8:55am

This also affects the Radzen Demo at Free Blazor Components | 60+ controls by Radzen

If you filter the ORDERID to a value less than say 10254 then when you scroll down there are blank records for the last few rows. Is there a better fix than just increasing the PageSize as it is not obvious that PageSize would effect Virtualization mode

Regards
Brian

korchev · October 20, 2021, 9:45am

There isn't another fix. We can't just fetch all items from the database so that's why virtualization relies on PageSize.

Thomas · November 12, 2021, 4:28pm

question...

How can i know what page size is correct for the given height?
e.g. height = 100px pagesize=50. is this working?
Or is it as simple as "pagesize * rowheight in px must be greater than height in px?"

i cant get a feeling for "which pagesize is best for which height"

kind regards
Thomas

korchev · November 13, 2021, 3:37am

Yes, precisely!

You need to set the PageSize to at least as many items as currently visible. It depends entirely on the DataGrid height and row height. The default row height is 38px.

Thomas · November 13, 2021, 6:08am

Thanx @korchev!
This is easy to handle.

Thomas

damian.nutz · January 17, 2024, 10:49pm

Hi Korchev.
Is there a way to calculate row height?
I Have a customized grid and sometimes it would include layouts with bigger components than the common 38px height you mentioned, and i need virtualization.

Thanks.

enchev · January 18, 2024, 4:17am

We rely completely on Blazor Virtualize component, you can check our code for reference.

This thread might be useful for you as well:

github.com/dotnet/aspnetcore

Blazor - support variable height items in Virtualize component

opened 11:17PM - 19 Aug 20 UTC

radderz

enhancement area-blazor affected-few severity-major Priority:2 feature-blazor-virtualization Pillar: Complete Blazor Web

When create a listview of **similarly** sized items, it's very hard to virtualis…e this in most web frameworks currently. It'd be great for Blazor to provide an out of the box solution that is able to render a virtual list of items, and account for it's position in the list as items are rendered. Most of my implementations of lists are of items that don't vary in size all that greatly, i.e. an extra line or two of text per item due to some wrapping. This would need to be able to handle data updates over time, so it shouldn't remember the size of the item when it goes back out of the view port and if the item is in the viewport it should account for the change in size after an update while assuming an approximate size for the not currently visible items. My concept is to try to have the scroll bar managing the item number through the list rather than the absolute x position, then to show the item at the top that matches closest to that by %, if snapping the items makes this easier that may be an approach. Basically you'd know the items sizes currently in the viewport, and as the user scrolls, the overall size of the view port would adjust based on the currently visible items actual size + the amount of items above * approx size + the amount of items below * approx size. This is done well in Xamarin, but that is a non web framework so I guess it's a little easier to control the outcome.

Djordje · January 18, 2024, 11:32am

Row height depends on the size of the delete button. I needed smaller row size and it was not resized until I put icon size as Size="ButtonSize.ExtraSmall"