The Data Grid was moved to maintenance support mode. No new features/capabilities will be added to this component. We recommend that you migrate to the Grid component.
Date
|
Forecast
|
Cloud Cover
|
Temp. (℃)
|
Temp. (℉)
|
---|---|---|---|---|
Wednesday, November 6, 2024 | Cold | Storm | 0 | 32 |
Thursday, November 7, 2024 | Cold | Partly cloudy | -3 | 26.6 |
Friday, November 8, 2024 | Cold | Sunny | -4 | 24.8 |
Saturday, November 9, 2024 | Cold | Sunny | -2 | 28.4 |
Sunday, November 10, 2024 | Cold | Sunny | -4 | 24.8 |
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.
The Data Grid was moved to maintenance support mode. No new features/capabilities will be added to this component. We recommend that you migrate to the Grid component.
Company Name
|
Contact Name
|
Contact Title
|
Country
|
City
|
Address
|
Phone
|
---|---|---|---|---|---|---|
Exotic Liquids | Charlotte Cooper | Purchasing Manager | UK | London | 49 Gilbert St. | (171) 555-2222 |
New Orleans Cajun Delights | Shelley Burke | Order Administrator | USA | New Orleans | P.O. Box 78934 | (100) 555-4822 |
Grandma Kelly's Homestead | Regina Murphy | Sales Representative | USA | Ann Arbor | 707 Oxford Rd. | (313) 555-5735 |
Tokyo Traders | Yoshi Nagase | Marketing Manager | Japan | Tokyo | 9-8 Sekimai Musashino-shi | (03) 3555-5011 |
Cooperativa de Quesos 'Las Cabras' | Antonio del Valle Saavedra | Export Administrator | Spain | Oviedo | Calle del Rosal 4 | (98) 598 76 54 |
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.
GitHub Example: How to bind the Data Grid to a strongly typed collection loaded asynchronously
The Data Grid was moved to maintenance support mode. No new features/capabilities will be added to this component. We recommend that you migrate to the Grid component.
Customer ID
|
Order Date
|
Freight
|
Ship Country
|
Ship Via
|
---|---|---|---|---|
|
|
|||
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 |
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 accepts two parameters: a DataSourceLoadOptionsBase object that reflects the current grid state and a CancellationToken object that propagates cancellation notifications. In this function, you can use the ConvertToGetRequestUri and ConvertToHttpContent extension methods to generate HTTP requests with parameters based on data load options. The function should return a Task
On the remote service, 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 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. The Web API controller uses the DataSourceLoader.Load method to load data.
The Data Grid was moved to maintenance support mode. No new features/capabilities will be added to this component. We recommend that you migrate to the Grid component.
State
|
Area
|
County
|
Location
|
Year
|
Bedrooms
|
Rent
|
Population
|
---|---|---|---|---|---|---|---|
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.