Virtualize option for Datagrid with .NET 5

[AntonTurba]

With the new RC 2 candidate for NET 5, Blazor has the option for component virtualization.

Would it be possible to add support for a bool flag param in the datatable that enabled row virtualization?
I'm using Blazorise for some large projects at work that load and show a high number of rows to the user (500-8k).

This request isn't a vital addition in my mind, paging has worked well enough for most cases, but if it's not a difficult change then I could see it adding some extra value to the datatable.

[stsrki]

I think you mean to add it to the DataGrid? Because as far as I can see from the official documentation it's easy as wrapping the component or Table/TableRows. And I think you can already do that if you use the plain Table component.

Anyways, I plan to add it "soon" to the DataGrid so that we can have a true infinite list. And by soon I mean in one of the next milestones. Probably 0.9.3 or 0.9.4.

[AntonTurba]

Yup, that's exactly what I was thinking. I would use the table instead normally, but I need some of the functionality of the DataGrid.

Thanks for adding it to the backlog!

[Luk164]

I just updated to .NET5 and learned of this feature. It cannot come to blazorise soon enough! While RN my project is not working with databases large enough to need it, it is something I will be eagerly waiting for.

[andrewb-idwala]

Yes, please would like to see this soon.

[stsrki]

@David-Moreira What do you think of implementing this feature to be in 0.9.3? Would you have any time?

I'm currently working on something else to finish before the final 0.9.3 so time is of essence.

[David-Moreira]

Well yea. I'd like to get my hands on that. I remember seeing a demo of that by I think it was Steven Sanderson.
Have to consider

• Static data should be easy.
• Handle Read data
• Maybe disable page changing as it does not make sense here.
• Page size however does make sense here.
• multi select might act weird here?
• possibility of doing too much internal Datagrid calculations when scrolling? Or is it that efficient that each scroll according to the pagesize is only an update each time, stops updating until the next page size / number of items breakpoint is hit again?

Seems easy enough from reading the documentation but glueing all this together and maybe other stuff we aren't taking into account just yet might take more then a weekend. But I'll def try this weekend. Not sure when you plan to release 093.

[stsrki]

I planned to release it by the end of the week. Considering this could take the time it's best to leave it scheduled for 0.9.4 as it is and then make it part of preview 1.

[David-Moreira]

Oh. Better not then. If we had one more week maybe...
But there is too much stuff to test integrating a feature like this. And it might be looking easier then it actually is.

[David-Moreira]

@stsrki
can you set the issue assigned to me, please? :)

[GilShalit]

Hey, Virtualization of the Select component will be a huge help too, and maybe easier then that of the Datagrid...

[stsrki]

@GilShalit I agreed it is a much easier implementation. What version of Select? Single or multiple, or both?

[GilShalit]

Single will be fine!

[Luk164]

Actually I would like both to use virtualize. @stsrki Do you think it is going to be a problem? I thought it can be implemented simultaneously but I am not too experienced with it.

[stsrki]

Not sure. I must first investigate. Virtualize injects custom div at the beginning and end of the container element. So I need to see is it going to affect <select> if divs are placed inside of it.

[David-Moreira]

If blazorise is using select behind the covers I don't think it will be compatible it would need a custom div implementation. I could potentially take a look at this one if you'd like.

[stsrki]

And also AntDesign has its own weird implementation of the select component. @David-Moreira have a quick look but don't work too much if it's going to be difficult. We might move it for 0.9.5.

[David-Moreira]

News about Select + Virtualize.
Would need a custom div implementation.
Refer to Blazor issue: dotnet/aspnetcore#29087

As for handling a data source you can already use the DropdownList provided by Blazorise.
A suggestion for this same Dropdownlist could be:

• An API to handle scrolling to obtain more records externally. Which I would say it would not require Virtualize.

---

As for having the main benefit of Virtualize :

• Having a large amount of data in memory to handle and not render html in the page causing slowdown/performance issues.

We can take a look at it for 0.9.5, and it probably makes more sense to implement it on the DropdownList, keeping select for simple stuff with a simple API, and using DropdownList as a "Select on steroids", right @stsrki ?

[stsrki]

We can take a look at it for 0.9.5, and it probably makes more sense to implement it on the DropdownList, keeping select for simple stuff with a simple API, and using DropdownList as a "Select on steroids", right @stsrki ?

We can also try to make the same for Autocomplete. Both components are similar in terms of using dropdown internally.

[GilShalit]

Hey, was virtualization ever implemented for DropDown or AutoComplete? I don't see any mention of that.

Thanks!

[stsrki]

I don't we ever considered adding virtualization to dropdown or autocomplete. It shouldn't be too difficult I think.

@David-Moreira for v1.1?

[GilShalit]

@stsrki you considered it on June 26 :-)

No complaints obviously with all the amazing work you have been doing!

Having it on Autocomplete would be awesome. When is v1.1 due roughly?

[stsrki]

So far almost every release was on a quarterly schedule, I would assume sometime around June would be the next.

[GilShalit]

Thanks

[David-Moreira]

I don't we ever considered adding virtualization to dropdown or autocomplete. It shouldn't be too difficult I think.

@David-Moreira for v1.1?

You can open a feature request for it. Theorically shouldn't be too hard and we already have some experience with the Datagrid's Virtualize implementation... but like everything sometimes it's easier said then done haha. But yea let's try for v1.1

[GilShalit]

Added a feature request at: #3289