Blazor DataGrid Example - Observable Collection Binding
Order ID | Customer ID | Freight | Order Date |
|---|
| 10000 | ALFKI | $34.70 | 8/1/2023 |
| 10001 | ANANTR | $26.70 | 8/5/2023 |
| 10002 | ANTON | $27.70 | 8/10/2023 |
| 10003 | BLONP | $29.70 | 8/15/2023 |
| 10004 | BOLID | $33.70 | 8/20/2023 |
| 10005 | ALFKI | $34.70 | 8/1/2023 |
| 10006 | ANANTR | $26.70 | 8/5/2023 |
| 10007 | ANTON | $27.70 | 8/10/2023 |
| 10008 | BLONP | $29.70 | 8/15/2023 |
| 10009 | BOLID | $33.70 | 8/20/2023 |
This sample demonstrates observable collection data binding in the DataGrid component for dynamic data updates.
Observable collections provide automatic change notification when objects are added, removed, or updated. The DataGrid UI is automatically updated when changes occur in the observable collection:
- When an object is added to the collection, it automatically appears in the grid
- When an object is removed, it disappears from the grid
- When a collection is modified, the grid reflects these changes without manual refresh
To refresh the UI for single property updates, configure the property setter appropriately in your model class. This ensures that property changes trigger UI updates in the DataGrid.
For more detailed information about observable collection data binding, refer to the observable collection documentation.