Blazor DataGrid Example - DynamicObject Binding
This sample shows how to use DynamicObject data binding with CRUD operations, grouping, sorting, filtering, and aggregation in the DataGrid component.
Drag a column header here to group its column
Order ID Press Enter to sort. Press Ctrl space to group | Customer ID Press Enter to sort. Press Ctrl space to group | Freight Press Enter to sort | Order Date Press Enter to sort. Press Ctrl space to group | Ship Country Press Enter to sort. Press Ctrl space to group | Active Press Enter to sort. Press Ctrl space to group |
|---|---|---|---|---|---|
| 1001 | BOLID | $2.30 | 8/2/2012 | USA | False |
| 1002 | ALFKI | $4.60 | 11/5/2010 | UK | False |
| 1003 | BOLID | $6.90 | 8/2/2012 | USA | True |
| 1004 | ALFKI | $9.20 | 11/5/2010 | UK | False |
| 1005 | ANANTR | $11.50 | 10/3/2018 | USA | False |
| 1006 | ALFKI | $13.80 | 11/5/2010 | USA | True |
| 1007 | BOLID | $16.10 | 8/2/2012 | USA | False |
| 1008 | ALFKI | $18.40 | 11/5/2010 | UK | False |
| 1009 | BOLID | $20.70 | 8/2/2012 | USA | True |
| 1010 | ALFKI | $23.00 | 11/5/2010 | UK | False |
| 1011 | ANTON | $25.30 | 9/9/1995 | USA | False |
| 1012 | ALFKI | $27.60 | 11/5/2010 | USA | True |
The Blazor DataGrid supports DynamicObject data binding. The DataSource property can be assigned as list of DynamicObject.
The Type property of the GridColumn allows you to set the ColumnType based on its value type. In this demo, ColumnType is set to Integer and Decimal for the OrderID and Freight columns.
More information about the DynamicObject data binding feature can be found in this documentation section.