Example of Observable Collection in Blazor DataGrid Component
This sample demonstrates the usage of Observable data binding in DataGrid component.
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 |
Using Observable collection of objects can be added, removed or be updated with an automatic notification of actions. The UI is automatically updated, when an object is added to or removed from an observable collection. To refresh UI for single property update, the setter of the corresponding property must be configured as shown in the sample.
More information about the Observable collection data binding feature can be found in this documentation section.