Data Binding

The Grid is currently available as a community technology preview (CTP).
Monday, September 20, 2021 Warm Sunny 15 59
Tuesday, September 21, 2021 Warm Sunny 17 62.6
Wednesday, September 22, 2021 Warm Sunny 18 64.4
Thursday, September 23, 2021 Warm Sunny 17 62.6
Friday, September 24, 2021 Warm Sunny 16 60.8
Saturday, September 25, 2021 Warm Partly cloudy 16 60.8
Sunday, September 26, 2021 Warm Sunny 16 60.8
Monday, September 27, 2021 Cold Storm 16 60.8
Tuesday, September 28, 2021 Cold Cloudy 13 55.4
Wednesday, September 29, 2021 Warm Sunny 12 53.6

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.

Asynchronous Data Binding

The Grid is currently available as a community technology preview (CTP).
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
Mayumi's Mayumi Ohno Marketing Representative Japan Osaka 92 Setsuko Chuo-ku (06) 431-7877
Pavlova, Ltd. Ian Devling Marketing Manager Australia Melbourne 74 Rose St. Moonie Ponds (03) 444-2343
Specialty Biscuits, Ltd. Peter Wilson Sales Representative UK Manchester 29 King's Way (161) 555-4448
PB Knäckebröd AB Lars Peterson Sales Agent Sweden Göteborg Kaloadagatan 13 031-987 65 43
Refrescos Americanas LTDA Carlos Diaz Marketing Manager Brazil Sao Paulo Av. das Americanas 12.890 (11) 555 4640

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.

Large Datasets

The Grid is currently available as a community technology preview (CTP).
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

Large Datasets from an HTTP Service

The Grid is currently available as a community technology preview (CTP).
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.