Blazor Tree Grid Example - Sorting
2Order Name Sorted in ascending order | 1Category Sorted in ascending order | Order Date Press Enter to sort | Shipped Date Press Enter to sort | Units Press Enter to sort | Price Press Enter to sort |
|---|
Order 1 | |||||
Lead glassware | Crystals | 1/14/2025 | 1/18/2025 | 27 | $405 |
Milk | Dairy | 1/8/2025 | 1/12/2025 | 27 | $189 |
Olive Oil | Edible | 1/11/2025 | 1/16/2025 | 25 | $200 |
Spinach | Fresh Vegetables | 1/17/2025 | 1/22/2025 | 28 | $252 |
Order 10 | |||||
Butter | Dairy | 3/18/2025 | 3/22/2025 | 30 | $210 |
Tomato Puree | Edible | 3/21/2025 | 3/31/2025 | 23 | $253 |
Herrings | Seafood | 3/15/2025 | 3/22/2025 | 22 | $352 |
Notebooks | Stationery | 3/12/2025 | 3/15/2025 | 22 | $220 |
Order 11 | |||||
Pharmaceutical glass | Crystals | 3/28/2025 | 3/31/2025 | 23 | $184 |
Yogurt | Dairy | 3/22/2025 | 4/2/2025 | 22 | $506 |
Preserved Olives | Edible | 3/25/2025 | 4/3/2025 | 25 | $425 |
White Shrimp | Seafood | 3/19/2025 | 3/30/2025 | 20 | $100 |
Order 12 | |||||
Crystal vials | Crystals | 4/1/2025 | 4/9/2025 | 23 | $368 |
Blue Veined Cheese | Dairy | 3/26/2025 | 4/7/2025 | 22 | $506 |
Pickles | Edible | 3/29/2025 | 4/2/2025 | 21 | $462 |
Cabbage | Fresh Vegetables | 4/4/2025 | 4/10/2025 | 21 | $336 |
Order 13 | |||||
Lead glassware | Crystals | 4/5/2025 | 4/13/2025 | 30 | $420 |
Olive Oil | Edible | 4/2/2025 | 4/8/2025 | 29 | $377 |
Spinach | Fresh Vegetables | 4/8/2025 | 4/12/2025 | 28 | $196 |
Chard | Leafy Greens | 4/11/2025 | 4/23/2025 | 20 | $160 |
This sample demonstrates the sorting functionality in Tree Grid. To sort data by a column, click the corresponding column header. To sort by multiple columns, hold the CTRL key and click the desired headers.
Sorting is enabled by setting the AllowSorting property to true. Multi-column sorting allows sorting by multiple columns simultaneously, and it can be achieved by holding the CTRL key and clicking on multiple column headers to apply sorting on each. To remove sorting from a specific column, hold the SHIFT key and click the corresponding header.
In this demo, the Tree Grid is initially sorted by the Category and Order Name columns in ascending order using the TreeGridSortSettings configuration.
This sample also includes aggregate footer summaries that calculate and display total values using the AggregateTemplateContext.
More information about sorting can be found in this documentation section.