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

Grid - Grouping

Mountain-100 Silver, 38Mountain Bikes1912.15443399.9900False
Mountain-100 Silver, 42Mountain Bikes1912.15443399.9900False
Mountain-100 Silver, 44Mountain Bikes1912.15443399.9900False
Mountain-100 Silver, 48Mountain Bikes1912.15443399.9900False
Mountain-100 Black, 38Mountain Bikes1898.09443374.9900False
Mountain-100 Black, 42Mountain Bikes1898.09443374.9900False
Mountain-100 Black, 44Mountain Bikes1898.09443374.9900False
Mountain-100 Black, 48Mountain Bikes1898.09443374.9900False
Mountain-200 Silver, 38Mountain Bikes1265.61952319.9900True
Mountain-200 Silver, 42Mountain Bikes1265.61952319.9900True
Mountain-200 Silver, 46Mountain Bikes1265.61952319.9900True
Mountain-200 Black, 38Mountain Bikes1251.98132294.9900True
Mountain-200 Black, 42Mountain Bikes1251.98132294.9900True
Mountain-200 Black, 46Mountain Bikes1251.98132294.9900True
Mountain-300 Black, 38Mountain Bikes598.43541079.9900False
  • Grouping.razor
  • ProductService.cs
  • ProductBindingModel.cs
Loading the demo source code...please wait.


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.