Blazor Tree Grid Example - Custom Aggregates
This demo passes automated axe checks with 0 violations — semantic markup, ARIA, full keyboard operation, visible focus. Section 508 conformant
Accessibility report
VPAT
Ship ID | Orders | Category | Ordered Date | Shipped Date | Units | Unit Price | Total Price |
|---|
Order 1 | $995.00 | ||||||
| 4789 | Mackerel | Seafood | 3/3/2025 | 3/10/2025 | 25 | $12.00 | $300.00 |
| 4833 | Herrings | Seafood | 8/5/2025 | 8/15/2025 | 28 | $11.00 | $308.00 |
| 4567 | Preserved Olives | Edible | 6/10/2025 | 6/17/2025 | 22 | $9.00 | $198.00 |
| 4899 | Sweet corn | Edible | 7/12/2025 | 7/19/2025 | 27 | $7.00 | $189.00 |
Order 2 | $1,506.00 | ||||||
| 5678 | Tilapias | Seafood | 2/5/2025 | 2/12/2025 | 24 | $15.00 | $360.00 |
| 5990 | White Shrimp | Seafood | 5/22/2025 | 5/29/2025 | 30 | $7.00 | $210.00 |
| 5476 | Fresh Cheese | Dairy | 6/8/2025 | 6/15/2025 | 26 | $12.00 | $312.00 |
| 5788 | Blue Veined Cheese | Dairy | 7/10/2025 | 7/17/2025 | 29 | $15.00 | $435.00 |
| 5896 | Butter | Dairy | 9/18/2025 | 9/25/2025 | 21 | $9.00 | $189.00 |
Order 3 | $1,021.00 | ||||||
| 6993 | Lead glassware | Crystals | 2/7/2025 | 2/14/2025 | 23 | $6.00 | $138.00 |
| 6453 | Pharmaceutical glass | Crystals | 4/19/2025 | 4/26/2025 | 25 | $11.00 | $275.00 |
| 6554 | Glass beads | Crystals | 5/22/2025 | 5/29/2025 | 28 | $16.00 | $448.00 |
| 6780 | Yellowfin Tuna | Seafood | 3/5/2025 | 3/15/2025 | 20 | $8.00 | $160.00 |
Order 4 | $510.00 | ||||||
| 7890 | Broccoli | Fresh Vegetables | 2/5/2025 | 2/10/2025 | 27 | $8.00 | $216.00 |
| 7633 | Spinach | Leafy Greens | 2/18/2025 | 2/24/2025 | 24 | $6.00 | $144.00 |
| 7799 | Carrots | Root Vegetables | 3/10/2025 | 3/16/2025 | 30 | $5.00 | $150.00 |
This sample demonstrates using custom aggregates to display user-defined summaries in the footer instead of built-in aggregate options.
Configure custom aggregates with TreeGridAggregateColumn inside the TreeGridAggregates collection.
In this demo, a custom aggregate computes "Total Price" for a selected Category. A DropDown in the footer (via FooterTemplate) lets users choose a category. The total updates dynamically based on selection.
More information on aggregates can be found in the documentation section.