Blazor Tree Grid Example - ExpandoObject Binding
Track ID Press Enter to sort | Shipment Name Press Enter to sort | Start Date Press Enter to sort | Duration (In Days) Press Enter to sort | Status Press Enter to sort | Priority Press Enter to sort |
|---|---|---|---|---|---|
| 1221 | Shipment PO-202501 via (NA-West) | 1/8/2025 | 7 | Not Delivered | Normal |
| 1222 | Stop 1: Atlanta, GA | 1/8/2025 | 3 | Completed | Normal |
| 1223 | Stop 2: Dallas, TX | 1/11/2025 | 2 | On Hold | High |
| 1224 | Stop 3: Chicago, IL | 1/13/2025 | 2 | Not Received | Critical |
| 1225 | Shipment PO-202502 via (EMEA-North) | 1/10/2025 | 9 | Delivered | High |
| 1226 | Stop 1: Seattle, WA | 1/10/2025 | 3 | Completed | Normal |
| 1227 | Stop 2: Miami, FL | 1/13/2025 | 2 | Completed | High |
| 1228 | Stop 3: Denver, CO | 1/15/2025 | 2 | Completed | Critical |
| 1229 | Stop 4: Phoenix, AZ | 1/17/2025 | 2 | Completed | Low |
This sample demonstrates a Tree Grid bound to a list of ExpandoObject instances, a technique that supports dynamic data schemas. This allows you to add or remove fields at runtime, with the Tree Grid's columns updating to reflect the changes.
You can enable dynamic binding by providing a list of ExpandoObject instances to the Tree Grid's DataSource property.
In this demo, shipment tracking data is provided as ExpandoObject records, and the Tree Grid displays the columns "Track ID", "Shipment Name", "Start Date", "Duration (Days)", "Status", and "Priority". This sample demonstrates dynamic addition and removal of columns:
- Clicking the Add dynamic field: Owner (runtime) button injects an "Owner" field into the data and displays the corresponding column in the Tree Grid.
- Clicking the Remove dynamic columns button reverses this action, removing the dynamic column from the Tree Grid.
For more information about ExpandoObject binding, refer to this documentation section.