Custom Grouping

 
Unit Price
Product Name Category Name Country Order Date Quantity
Unit Price: $0.00 - $10.00 (Count: 331)
Geitost Dairy Products Belgium 7/9/2014 25
Geitost Dairy Products USA 7/31/2014 60
Geitost Dairy Products USA 8/1/2014 24
Geitost Dairy Products Germany 8/5/2014 20
Geitost Dairy Products Denmark 10/29/2014 8
Geitost Dairy Products Austria 12/13/2014 60
Geitost Dairy Products Canada 1/10/2015 49
Geitost Dairy Products Brazil 1/14/2015 50
Geitost Dairy Products USA 1/15/2015 20
Geitost Dairy Products France 2/21/2015 20
Geitost Dairy Products UK 3/13/2015 12
Geitost Dairy Products Germany 4/23/2015 16
Geitost Dairy Products USA 5/6/2015 8
Geitost Dairy Products Germany 5/14/2015 30
Geitost Dairy Products UK 5/16/2015 15
Geitost Dairy Products Italy 6/9/2015 20
Geitost Dairy Products USA 6/19/2015 14
Geitost Dairy Products USA 7/22/2015 14
Geitost Dairy Products Germany 8/14/2015 20
Data grid with 2166 rows and 5 columns

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.