Our Blazor Grid component allows you to display, manage, and manipulate tabular data with ease. Use the Data property to bind the DevExpresss Blazor Grid to data. In this demo, the Blazor Grid is bound to a data collection that is loaded synchronously. To display data within the Blazor Grid, declare DxGridDataColumn objects in the Columns template and use each object’s FieldName property to assign data fields.

In this demo, our Blazor Grid is bound to a data collection that is loaded asynchronously. To replicate this behavior, simply bind the Data property to a model field and initialize this field with data in the OnInitializeAsync lifecycle method.

Our Blazor GridDevExtremeDataSource allows you to improve performance when binding to large IQueryable<T> data collections. The data source implementation is based on the DevExpress DevExtreme.AspNet.Data library. When you use this data source, the Grid only loads the data needed for screen display and it delegates data processing operations to the database server.

To replicate this demo, create a GridDevExtremeDataSource class instance and pass your IQueryable<T> data collection as the constructor parameter. Then, assign this instance to the Blazor Grid's Data property. In this demo, the grid is bound to a data collection with over a million rows (1GB+ in overall size). Navigate between individual Grid pages or sort data to explore our Blazor Grid's performance capabilities and its overall responsiveness.

You can use our Blazor GridDevExtremeDataSource to bind the Blazor Grid to data from an HTTP service. Our data source implementation is based on the DevExtreme.AspNet.Data library. When you use this data source, the DevExpress Blazor Grid only loads data that needs to be displayed on screen. This helps improve overall performance and application responsiveness.

To replicate this sample, create a GridDevExtremeDataSource class instance and pass a URL to an HTTP service as the constructor parameter. Then, assign this instance to the Grid's Data property. On the service side, implement an API controller and create action methods that use the DataSourceLoader class to create a LoadResult object based on load options.

In this demo, the ASP.NET Controller uses Entity Framework Core and delegates data processing operations to the database server. As mentioned previously, this improves the Blazor Grid’s performance and overall responsiveness.