Our Blazor Grid is a data-aware component that allows you to display and manage tabular data with absolute ease. In this demo, the DevExpress Blazor Grid is bound to a data collection available during synchronous component initialization. To replicate this sample, bind the Data parameter to a C# field or property and populate this field or property with data inside the OnInitialized lifecycle method.

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 available after asynchronous component initialization. To implement this specific usage scenario, bind the Data parameter to a C# field or property. Once bound, populate this field or property with data in the OnInitializeAsync lifecycle method (use the await operator).

You can bind our Blazor Grid to a data collection that implements the INotifyCollectionChanged or IBindingList interface. This collection notifies the Grid about relevant changes (when items are added or removed, when the entire collection is refreshed, etc). The Grid will update its data automatically to reflect appropriate changes.

Each item in the collection should also implement the INotifyPropertyChanged interface to notify the Grid when a property value is changed.

This demo illustrates real-time data update support within our Blazor Grid (when bound to the standard ObservableCollection<T>).

Note: The data used in this demo is for demonstration purposes only. The demo generates synthetic stock quote data.

The DevExpress Blazor Grid supports use of our unique Server Mode data source for Blazor Server-based applications. This data source was specifically designed to work with large data collections. When you use this data source, the Grid loads data in small portions on demand (it does not load the entire dataset). As you might expect, this helps reduce memory consumption and improve usability. In Server Mode, all data shaping operations (grouping, sorting, and so on) are delegated from the Blazor application itself to underlying services (such as EF Core, XPO, and so on). These services process operations more efficiently and increase overall performance.

The Grid supports synchronous Server Mode sources and asynchronous Instant Feedback sources. For more information about these data sources and associated limitations, refer to the following help topic: Large Data (Server Mode Sources).

In this specific demo, our Blazor Grid is bound to an EntityInstantFeedbackSource. Follow the steps below to use this data source in your next Blazor project:

1. Add a reference to a data source’s namespace (DevExpress.Data.Linq).
2. Create a data source instance. Set the KeyExpression property to the name of entity model’s key property. Use the QueryableSource property to define the queryable data source from the EF Core data context.
3. Assign the data source instance to the Grid’s Data parameter.
4. Dispose the data source instance within the page’s Dispose method.

To help illustrate the performance benefits of Server Mode, this demo is linked to a dataset with over a million rows. Navigate between individual pages or sort/group/filter data to explore the power of the DevExpress Blazor Grid and the potential of Server Mode.

In both Blazor Server and Blazor WebAssembly applications, you can use the GridDevExtremeDataSource<T> to bind our Blazor Grid to a large IQueryable<T> data collection. This data source implementation is based on our DevExtreme.AspNet.Data library. When you use this data source, the Grid delegates data processing operations to an underlying query provider and only loads data required for screen display. This helps improve overall performance and reduces memory consumption.

To use this data source in your next Blazor project, create a GridDevExtremeDataSource<T> class instance and pass your IQueryable<T> data collection as the constructor parameter. Once complete, assign this instance to the Grid's Data property.

For more information about this data source and associated limitations, refer to the following help topic: Large Data (Queryable Collections).

In both Blazor Server and Blazor WebAssembly applications, you can use the GridDevExtremeDataSource<T> to bind our Blazor Grid to large data from an HTTP service. This data source implementation is based on our DevExtreme.AspNet.Data library. When you use this data source, the Grid delegates data processing operations to an underlying query provider and only loads data required for screen display.

To use this data source in your next Blazor project, create a GridDevExtremeDataSource<T> class instance and pass a URL to an HTTP service as the constructor parameter. Once complete, 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.

For more information about this data source and associated limitations, refer to the following help topic: Large Data (Queryable Collections).