Blazor Grid and Large/Remote Data Sources: Optimize Performance
- 2 minutes to read
Follow the instructions in this article to resolve performance issues with the Grid component when it is bound to a large or remote data source. We recommend that you also review general performance troubleshooting techniques for Blazor applications: Troubleshoot Performance-Related Issues.
#DevExpress Blazor Grid Takes a Long Time to Render
DevExpress Blazor Grid uses an HTML table with fixed layout to render its content. If the component needs to render a large number of elements, application users may experience performance issues. Sections below explain possible causes and resolution techniques.
#The Number of Cells Affects Render Performance
The number of cells may affect the grid’s render performance in the following cases:
- The Grid is bound to a large data source (needs to render thousands of cells).
- The code calls the ExpandAllGroupRows() method or activates the AutoExpandAllGroupRows option.
You can use the following techniques to optimize the generated HTML markup:
- Display a pager. If your Grid already contains a pager, descrease the page size.
- Enable virtual scrolling.
#Cell Template Markup Affects Render Performance
Implement templated content with the simplest markup. Consider the following optimization examples:
- Use the
<span>
tag instead of DxTextBox to display static text. - Use the
<input type="checkbox">
tag or the DxCheckBoxSettings object to display static check boxes.
#A Hierarchical Column Filter Menu Contains Too Many Values
The Filter Menu has a performance limitation: if a hierarchical filter menu contains more than 5,000 (Blazor Server) or 1,500 (Blazor WASM) unique dates, users may notice render delays. Consider a plain list or date range instead.
#DevExpress Blazor Grid Loads Data Slowly
Many factors can affect data loading speed, for instance, the web server’s location, server hardware, database engine, and so on. On the DevExpress Blazor Grid level, ensure you use the appropriate data source type and correctly bind the component to the data source. The following sections may be helpful: