New to Telerik UI for Blazor? Download Free 30-day trial

Grid - Grouping

Chai 1 39 18.00 False
Chang 1 17 19.00 False
Aniseed Syrup 2 13 10.00 False
Chef Anton's Cajun Seasoning 2 53 22.00 False
Chef Anton's Gumbo Mix 2 0 21.35 True
Grandma's Boysenberry Spread 2 120 25.00 False
Uncle Bob's Organic Dried Pears 7 15 30.00 False
Northwoods Cranberry Sauce 2 6 40.00 False
Mishi Kobe Niku 6 29 97.00 True
Ikura 8 31 31.00 False
Queso Cabrales 4 22 21.00 False
Queso Manchego La Pastora 4 86 38.00 False
Konbu 8 24 6.00 False
Tofu 7 35 23.25 False
Genen Shouyu 2 39 15.50 False
  • Grouping.razor
  • ProductService.cs
  • ProductDto.cs
Loading the demo source code...please wait.

Description

You can group the grid by dragging the column headers. Dragging a column header to the designated place for grouping will visually distinguish all items that match the group. The groups can show aggregates and customizable headers. Try grouping by the "Category Name", "Standard Cost" and "Active Selling" fields, for example. To disable grouping for a Grid column set the Groupable parameter of the column to false.

Support & Learning Resources

An error has occurred. This application may no longer respond until reloaded.
Reload