Custom Grouping

 
Unit Price
Product Name Category Name Country Order Date Quantity
Unit Price: $0.00 - $10.00 (Count: 331)
GeitostDairy ProductsBelgium7/9/201425
GeitostDairy ProductsUSA7/31/201460
GeitostDairy ProductsUSA8/1/201424
GeitostDairy ProductsGermany8/5/201420
GeitostDairy ProductsDenmark10/29/20148
GeitostDairy ProductsAustria12/13/201460
GeitostDairy ProductsCanada1/10/201549
GeitostDairy ProductsBrazil1/14/201550
GeitostDairy ProductsUSA1/15/201520
GeitostDairy ProductsFrance2/21/201520
GeitostDairy ProductsUK3/13/201512
GeitostDairy ProductsGermany4/23/201516
GeitostDairy ProductsUSA5/6/20158
GeitostDairy ProductsGermany5/14/201530
GeitostDairy ProductsUK5/16/201515
GeitostDairy ProductsItaly6/9/201520
GeitostDairy ProductsUSA6/19/201514
GeitostDairy ProductsUSA7/22/201514
GeitostDairy ProductsGermany8/14/201520
Data grid with 2166 rows and 5 columns
0 rows are selected

The DevExpress Blazor Grid allows you to apply custom data grouping logic. Use the steps below to implement custom data grouping logic:

  1. Set the DxGridDataColumn.GroupInterval property to GridColumnGroupInterval.Custom.

  2. Handle the DxGrid.CustomGroup event to implement your logic. You should compare column values and define whether these values belong to the same group. Use the GridCustomGroupEventArgs event arguments (Value1, Value2, SameGroup, etc.) to access and compare column values.

    You can also handle the CustomizeGroupValueDisplayText event to customize text for group rows.

In this demo, custom group logic is implemented for the Unit Price column. Data is grouped for the following intervals: $0.00 — $10.00, $10.00 — $20.00, etc.