Data Binding

Our Blazor Data Grid allows you to display, manage, and manipulate tabular data with absolute ease. You can use the Data property to bind the grid to a strongly typed collection. Initialize this collection in the OnInitialized lifecycle method or before this method is invoked. To display data within our Blazor Grid, simply add columns to the markup and use the Field property to assign data fields as needed.

Wednesday, November 25, 2020 Cold -2 28.4
Thursday, November 26, 2020 Cold -4 24.8
Friday, November 27, 2020 Cold -4 24.8
Saturday, November 28, 2020 Freezing -4 24.8
Sunday, November 29, 2020 Cold -4 24.8

Asynchronous Data Binding

Use the DataAsync property to bind our Blazor Data Grid to a strongly typed collection that is loaded asynchronously (for instance, from an HTTP request). This property allows you to prevent excessive re-rendering and draw the grid's UI skeleton before data is loaded. The property specifies an asynchronous function that returns a Task<IEnumerable<T>> object and accepts a CancellationToken object as a parameter.

A Datum Corporation Novelty Goods Supplier Road Freight (847) 555-0100 Woodgrove Bank Zionsville 8575824136
Contoso, Ltd. Novelty Goods Supplier Refrigerated Road Freight (360) 555-0100 Woodgrove Bank Greenbank 4587965215
Consolidated Messenger Courier Services Supplier (415) 555-0100 Woodgrove Bank San Francisco 3254872158
Fabrikam, Inc. Clothing Supplier Road Freight (203) 555-0104 Woodgrove Bank Lakeview Heights 4125863879
Graphic Design Institute Novelty Goods Supplier Refrigerated Air Freight (406) 555-0105 Woodgrove Bank Lanagan 1025869354

Custom Data Binding

If your data is stored in a remote service and is loaded through a Web API, assign the data type to the grid's T parameter and use the CustomData property to implement desired data load logic. This property specifies an asynchronous function that returns a Task<LoadResult> object and accepts two parameters: a DataSourceLoadOptionsBase object that reflects the current grid state and a CancellationToken object that propagates cancellation notifications. DxDataGridComboBoxColumn objects also include a CustomData property.

In this demo, the Data Grid and the Customer ID and Ship Via combobox columns are bound to a remote Web API service. The ConvertToGetRequestUri extension method is used to generate a GET request URI with parameters based on data load options.

Vins et alcools Chevalier (France) 7/4/2018 $32.38 France Federal Shipping
Toms Spezialitäten (Germany) 7/5/2018 $11.61 Germany Speedy Express
Hanari Carnes (Brazil) 7/8/2018 $65.83 Brazil United Package
Victuailles en stock (France) 7/8/2018 $41.34 France Speedy Express
Suprêmes délices (Belgium) 7/9/2018 $51.30 Belgium United Package
Hanari Carnes (Brazil) 7/10/2018 $58.17 Brazil United Package
Chop-suey Chinese (Switzerland) 7/11/2018 $22.98 Switzerland United Package
Richter Supermarkt (Switzerland) 7/12/2018 $148.33 Switzerland Federal Shipping
Wellington Importadora (Brazil) 7/15/2018 $13.97 Brazil United Package
HILARION-Abastos (Venezuela) 7/16/2018 $81.91 Venezuela Federal Shipping

Large Datasets

In this demo, the DevExpress Blazor Data Grid is bound to a data collection with over a million rows (1GB+ in overall size). Navigate between grid pages, sort data, or filter data to experience our Blazor DataGrid’s responsiveness and performance capabilities when binding to large datasets.

You can use any of the ways demonstrated above (the Data, DataAsync, or CustomData property) to bind the grid to a large data collection. The collection must implement the IQueryable<T> interface. This demo uses the DataAsync property and Entity Framework Core.

IN Marshall County Marshall County Marshall County 1987 3 $426.00 47,051
TX Fort Worth-Arlington Parker County Parker County 2005 1 $597.00 116,927
WI Lincoln County Lincoln County Lincoln County 2005 1 $410.00 28,743
LA New Orleans-Metairie-Kenner St. John the Baptist Parish St. John the Baptist Parish 1980 3 $497.00 45,924
TX Concho County Concho County Concho County 1996 2 $367.00 4,087
KY Lexington-Fayette Woodford County Woodford County 2013 2 $700.00 24,939
KS Saline County Saline County Saline County 1987 0 $239.00 55,606
MA Springfield Hampden County Southwick town 2007 3 $1,005.00 9,502
ME Lincoln County Lincoln County South Bristol town 1988 3 $499.00 892
IL Wabash County Wabash County Wabash County 1993 2 $370.00 11,947