Blazor Datagrid - load data on scroll without performance degradation

Blazor DataGrid allows you to load large amount of data without performance degradation. The support for Blazor DataGrid load data on scroll can be enabled through row and column virtualization.

Row Virtualization

Row virtualization allows you to load and render rows only in the content viewport. It is an alternative way of paging in which the data will be loaded while scrolling vertically. To setup the row virtualization, you need to define EnableVirtualization as true and content height by Height property.

The number of records displayed in the DataGrid is determined implicitly by height of the content area. Also, you have an option to define a visible number of records by the PageSize property of GridPageSettings component. The loaded data will be cached and reused when it is needed for next time.

@using Syncfusion.Blazor.Grids
 
<SfGrid DataSource="@GridData" Height="600" EnableVirtualization="true">
    <GridColumns>
        …
    </GridColumns>
</SfGrid>
 
@code{
    public List<Order> GridData { get; set; }
    protected override void OnInitialized()
    {
….

Enable Cell placeholder during Virtualization

Enable cell placeholder during virtualization feature much of a muchness of row virtualization and column virtualization feature and the difference is loading placeholder indicator was shown on the cells while loading the new data. Also, same set of DOM elements is reused to improve performance.

To setup the enable cell placeholder during virtualization, you need to define EnableVirtualMaskRow as true along with EnableVirtualization/EnableColumnVirtualization property.

@using Syncfusion.Blazor.Grids
 
<SfGrid DataSource="@GridData" Height="600" Width="300" RowHeight="38" EnableVirtualMaskRow="true" EnableVirtualization="true" EnableColumnVirtualization="true">
    <GridPageSettings PageSize="32"></GridPageSettings>
 
……

Column Virtualization

Column virtualization allows you to virtualize columns. It will render columns which are in the viewport. You can scroll horizontally to view more columns.

To setup the column virtualization, set the EnableVirtualization and EnableColumnVirtualization properties as true.

@using Syncfusion.Blazor.Grids
 
<SfGrid DataSource="@GridData" Height="600" Width="300" EnableVirtualization="true" EnableColumnVirtualization="true">
    <GridColumns>
 
…..

Conclusion

I hope you enjoyed learning about how to load data on scroll without performance degradation in the Blazor Grid.

You can refer to our Blazor DataGrid’s feature tour page to know about its other groundbreaking feature representations. You can also explore our Blazor DataGrid example to understand how to present and manipulate data.  

For current customers, you can check out our Blazor components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our Blazor Grid and other Blazor components.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!