Data Binding

 
Date Forecast Cloud Cover Temp. (℃) Temp. (℉)
Thursday, May 19, 2022 Warm Partly cloudy 19 66.2
Friday, May 20, 2022 Warm Sunny 17 62.6
Saturday, May 21, 2022 Cold Storm 15 59
Sunday, May 22, 2022 Warm Sunny 17 62.6
Monday, May 23, 2022 Cold Storm 14 57.2
Tuesday, May 24, 2022 Warm Partly cloudy 15 59
Wednesday, May 25, 2022 Warm Sunny 17 62.6
Thursday, May 26, 2022 Warm Sunny 15 59
Friday, May 27, 2022 Warm Sunny 12 53.6
Saturday, May 28, 2022 Warm Sunny 11 51.8

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.

Asynchronous Data Binding

 
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
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 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).

Observable Data Collections

 
Ticker Last Price Change % Change Last Updated
No data to display

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.

Large Data (Instant Feedback Source)

 
Drag a column header here to group by that column
State Area County Location Year Bedrooms Population
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

Large Data (Queryable)

 
State Area County Location Year Bedrooms Population
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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).

Large Data (Queryable as HTTP Service)

 
Product Name Quantity Per Unit Unit Price Units In Stock Discontinued
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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).