Group Data

The Grid is currently available as a community technology preview (CTP).
Country: Argentina
Patricio Simpson Cactus Comidas para llevar Buenos Aires  
Yvonne Moncada Océano Atlántico Ltda. Buenos Aires  
Sergio Gutiérrez Rancho grande Buenos Aires  
Country: Austria
Roland Mendel Ernst Handel Graz  
Georg Pipps Piccolo und mehr Salzburg  
Country: Belgium
Catherine Dewey Maison Dewey Bruxelles  
Pascale Cartrain Suprêmes délices Charleroi  

Our Blazor Grid allows users to group data. To enable data grouping and display the Group panel, set the ShowGroupPanel property to true. Users can drag and drop a column header onto the Group Panel to group data against the column. They can also drag headers within this panel to change group order. To ungroup data, users can simply drag the appropriate column header from the Group Panel back to the Column Header Panel.

To disable grouping, set the DxGrid.AllowGroup or DxGridDataColumn.AllowGroup property to false (applied to the entire Grid or to an individual column).

Use the following API members to manage data grouping in code:

Interval Grouping

The Grid is currently available as a community technology preview (CTP).
Order Date: 2014 (Count: 405, Sum of Quantity: 9,581, Sum of Total: $226,132.00)
Order Date: 2015 (Count: 1,059, Sum of Quantity: 25,489, Sum of Total: $659,395.00)
Order Date: 2016 (Count: 691, Sum of Quantity: 16,247, Sum of Total: $470,808.00)

The DevExpress Blazor Grid supports interval grouping. Interval grouping allows you to group date-time values by year, month or date, or you can group text values by display text or against individual characters. Use the DxGridDataColumn.GroupInterval property to specify how data rows are grouped.

In this demo, the Order Date column uses interval grouping. Data is grouped by year. You also have options to select other group intervals including: Month or Date.

Custom Grouping

The Grid is currently available as a community technology preview (CTP).
Unit Price: $0.00 - $10.00 (Count: 331)
Unit Price: $10.00 - $20.00 (Count: 849)
Unit Price: $20.00 - $30.00 (Count: 328)
Unit Price: $30.00 - $40.00 (Count: 349)
Unit Price: $40.00 - $50.00 (Count: 129)
Unit Price: $50.00 - $60.00 (Count: 71)
Unit Price: $60.00 - $70.00 (Count: 26)
Unit Price: $70.00 - $80.00 (Count: 1)
Unit Price: $80.00 - $90.00 (Count: 11)
Unit Price: $90.00 - $100.00 (Count: 14)

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.