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 |
Herrings | Seafood | 3/15/2025 | 3/22/2025 | 22 | $352 |
Notebooks | Stationery | 3/12/2025 | 3/15/2025 | 22 | $220 |
Tomato Puree | Edible | 3/21/2025 | 3/31/2025 | 23 | $253 |
Order 11 | |||||
Pharmaceutical glass | Crystals | 3/28/2025 | 3/31/2025 | 23 | $184 |
Preserved Olives | Edible | 3/25/2025 | 4/3/2025 | 25 | $425 |
White Shrimp | Seafood | 3/19/2025 | 3/30/2025 | 20 | $100 |
Yogurt | Dairy | 3/22/2025 | 4/2/2025 | 22 | $506 |
Order 12 | |||||
Blue Veined Cheese | Dairy | 3/26/2025 | 4/7/2025 | 22 | $506 |
Cabbage | Fresh Vegetables | 4/4/2025 | 4/10/2025 | 21 | $336 |
Crystal vials | Crystals | 4/1/2025 | 4/9/2025 | 23 | $368 |
Pickles | Edible | 3/29/2025 | 4/2/2025 | 21 | $462 |
Order 13 | |||||
Chard | Leafy Greens | 4/11/2025 | 4/23/2025 | 20 | $160 |
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 |
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.
More information about sorting can be found in this documentation section.