Data Binding

The Grid is currently available as a community technology preview (CTP).
Wednesday, June 16, 2021 Warm Partly cloudy 20 68
Thursday, June 17, 2021 Warm Partly cloudy 18 64.4
Friday, June 18, 2021 Cold Storm 18 64.4
Saturday, June 19, 2021 Warm Sunny 20 68
Sunday, June 20, 2021 Warm Sunny 17 62.6
Monday, June 21, 2021 Warm Sunny 18 64.4
Tuesday, June 22, 2021 Warm Sunny 20 68
Wednesday, June 23, 2021 Warm Sunny 20 68
Thursday, June 24, 2021 Warm Sunny 20 68
Friday, June 25, 2021 Warm Sunny 17 62.6

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.

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 do this, 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 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.

Large Datasets from an HTTP Service

The Grid is currently available as a community technology preview (CTP).
Chai 10 boxes x 20 bags $18.00 39
Chang 24 - 12 oz bottles $19.00 17
Aniseed Syrup 12 - 550 ml bottles $10.00 13
Chef Anton's Cajun Seasoning 48 - 6 oz jars $22.00 53
Chef Anton's Gumbo Mix 36 boxes $21.35 0
Grandma's Boysenberry Spread 12 - 8 oz jars $25.00 120
Uncle Bob's Organic Dried Pears 12 - 1 lb pkgs. $30.00 15
Northwoods Cranberry Sauce 12 - 12 oz jars $40.00 6
Mishi Kobe Niku 18 - 500 g pkgs. $97.00 29
Ikura 12 - 200 ml jars $31.00 31

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.