Custom Grouping

 
Unit Price
Product Name Category Name Country Order Date Quantity
Unit Price: $0.00 - $10.00 (Count: 331)
Jack's New England Clam ChowderSeafoodBrazil7/8/201410
GeitostDairy ProductsBelgium7/9/201425
Guaraná FantásticaBeveragesSwitzerland7/11/201415
Longlife TofuProduceSwitzerland7/11/201421
Sir Rodney's SconesConfectionsMexico7/18/201410
Jack's New England Clam ChowderSeafoodGermany7/19/201416
Sir Rodney's SconesConfectionsBrazil7/19/201420
Guaraná FantásticaBeveragesAustria7/23/201428
Longlife TofuProduceAustria7/23/201436
Jack's New England Clam ChowderSeafoodSweden7/24/201425
GeitostDairy ProductsUSA7/31/201460
GeitostDairy ProductsUSA8/1/201424
GeitostDairy ProductsGermany8/5/201420
Guaraná FantásticaBeveragesItaly8/7/201412
KonbuSeafoodMexico8/8/201410
Guaraná FantásticaBeveragesSweden8/14/201412
Rhönbräu KlosterbierBeveragesSweden8/14/201430
Teatime Chocolate BiscuitsConfectionsSpain8/14/20141
Guaraná FantásticaBeveragesSpain8/14/20146
Data grid with 2166 rows and 5 columns
0 rows are selected

The DevExpress Blazor Grid component supports custom data grouping. Custom data groups allow you to merge data into custom intervals or combine similar values into a single entry. In this demo, the Unit Price column is grouped by custom range values: $0.00 — $10.00, $10.00 — $20.00, etc.

To implement your own custom grouping logic, you must:

  1. Define a custom sorting algorithm (because grouping relies on sort operations). To apply a custom algorithm, set the DxGridDataColumn.SortMode property to Custom and handle the CustomSort event. In the event handler, compare column values to define associated order.
  2. Set the DxGridDataColumn.GroupInterval property to Custom and handle the CustomGroup event. In the event handler, compare column values to define whether they belong to the same group.
  3. (Optional) Handle the CustomizeGroupValueDisplayText event to modify group row text.
  4. (Optional) Implement GroupRowTemplate to display custom group row content.