Our Blazor Grid component allows you to display, manage, and manipulate tabular data. Use the Data property to bind the Grid to data. In this demo, the Grid is bound to a data collection that is loaded synchronously. To display data within the Grid, add DxGridColumn objects to the Columns collection 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 do this, 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 DevExtreme.AspNet.Data library. When you use this data source, the Grid loads only data that should be displayed on screen, and data processing operations are delegated to the database server.

Create a GridDevExtremeDataSource class instance and pass your IQueryable<T> data collection as the constructor parameter. Then, assign this instance to the 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 grid pages or sort data to experience the Grid's responsiveness and performance capabilities.

You can use our Blazor GridDevExtremeDataSource to bind the Grid to data from an HTTP service. The data source implementation is based on the DevExtreme.AspNet.Data library. When you use this data source, the Grid loads only data that should be displayed on screen.

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, an ASP.NET Controller uses Entity Framework Core and delegates data processing operations to the database server. This improves the Grid’s responsiveness and performance.