DxGrid.CustomGroup Event

Enables you to implement custom logic used to group data in the grid.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public Action<GridCustomGroupEventArgs> CustomGroup { get; set; }

Parameters

Type	Description
GridCustomGroupEventArgs	Provides access to grid data.

Remarks

Note

The Grid does not support custom grouping when you use a Server Mode data source or GridDevExtremeDataSource.

Follow the steps below to implement custom grouping logic:

1. Define a custom sorting algorithm (grouping relies on sort operations). To apply a custom algorithm, set the DxGridDataColumn.SortMode property to Custom and handle the CustomSort event.
2. Set the DxGridDataColumn.GroupInterval property to Custom.
3. Handle the DxGrid.CustomGroup event and compare column values based on your custom logic. Use Value1 and Value2 event arguments to access compared values. To obtain other values from processed rows, call the GetRow1Value and GetRow2Value methods. To place compared values into the same group, set the SameGroup argument to true.
4. In the event handler, set the Handled argument to true to override the default grouping mechanism.
5. (Optional) Handle the CustomizeGroupValueDisplayText event to modify group row text.

The following code snippet groups the Unit Price column by custom range values: $0.00-$10.00, $10.00-$20.00, etc.

<DxGrid Data="@Data"
        ShowGroupPanel="true"
        CustomGroup="Grid_CustomGroup"
        CustomSort="Grid_CustomSort"
        CustomizeGroupValueDisplayText="Grid_CustomizeGroupValueDisplayText">
    <Columns>
        <DxGridDataColumn FieldName="ProductName" />
        <DxGridDataColumn FieldName="Country" />
        <DxGridDataColumn FieldName="OrderDate" DisplayFormat="d" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c" GroupIndex="0"
            GroupInterval="GridColumnGroupInterval.Custom" SortMode="GridColumnSortMode.Custom" />
        <DxGridDataColumn FieldName="Quantity" />
    </Columns>
    <TotalSummary>
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Count" FieldName="ProductName" />
    </TotalSummary>
    <GroupSummary>
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Count" FieldName="UnitPrice" />
    </GroupSummary>
</DxGrid>

@code {
    // ...
    void Grid_CustomGroup(GridCustomGroupEventArgs e) {
        if(e.FieldName == "UnitPrice") {
            e.SameGroup = Grid_CompareColumnValues(e.Value1, e.Value2) == 0;
            e.Handled = true;
        }
    }
    void Grid_CustomSort(GridCustomSortEventArgs e) {
        if (e.FieldName == "UnitPrice") {
            e.Result = Grid_CompareColumnValues(e.Value1, e.Value2);
            e.Handled = true;
        }
    }
    int Grid_CompareColumnValues(object value1, object value2) {
        double val1 = Math.Floor(Convert.ToDouble(value1) / 10);
        double val2 = Math.Floor(Convert.ToDouble(value2) / 10);
        var res = System.Collections.Comparer.Default.Compare(val1, val2);
        if(res < 0)
            res = -1;
        else if(res > 0)
            res = 1;
        if(res == 0 || (val1 > 9 && val2 > 9))
            res = 0;
        return res;
    }
    void Grid_CustomizeGroupValueDisplayText(GridCustomizeGroupValueDisplayTextEventArgs e) {
        if(e.FieldName == "UnitPrice") {
            double val = Math.Floor(Convert.ToDouble(e.Value) / 10);
            string displayText = string.Format("{0:c} - {1:c} ", val * 10, (val + 1) * 10);
            if(val > 9)
                displayText = string.Format(">= {0:c} ", 100);
            e.DisplayText = displayText;
        }
    }
}

Run Demo: Grid - Custom Grouping

For more information about data grouping in the Grid component, refer to the following topic: Group Data in Blazor Grid.

Video