Skip to main content

GridCustomGroupEventArgs Class

Contains data for the CustomGroup event.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public class GridCustomGroupEventArgs

Remarks

Follow the steps below to implement custom logic used to group grid data.

  1. Set the DxGridDataColumn.GroupInterval property to GridColumnGroupInterval.Custom.
  2. Handle the DxGrid.CustomGroup event and compare column values based on your custom logic. Use the event argument’s Value1 and Value2 properties to access the current column’s values. Call the GetRow1Value and GetRow2Value methods to obtain values of other columns. If the compared values belong to the same group, set the SameGroup property to true.
  3. In the event handler, set the Handled property to true to prevent the default comparison mechanism from being invoked.

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

The following code snippet implements custom group logic for the Unit Price column. Data are grouped for the following intervals: $0.00 - $10.00, $10.00 - $20.00, and so on.

@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable

<DxGrid Data="GridDataSource"
        ShowGroupPanel="true"
        CustomGroup="Grid_CustomGroup"
        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" />
        <DxGridDataColumn FieldName="Quantity" />
    </Columns>
</DxGrid>

@code {
    object GridDataSource { get; set; }
    NorthwindContext Northwind { get; set; }

    protected override void OnInitialized() {
        Northwind = NorthwindContextFactory.CreateDbContext();
        GridDataSource = Northwind.Invoices
            .ToList();
    }

    void Grid_CustomGroup(GridCustomGroupEventArgs e) {
        if(e.FieldName == "UnitPrice") {
            e.SameGroup = Grid_CompareColumnValues(e.Value1, e.Value2) == 0;
            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;
        }
    }

    public void Dispose() {
        Northwind?.Dispose();
    }
}

Custom Grouping

Run Demo: Grid - Custom Grouping Watch Video: Grid - Group Data

Note

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

Inheritance

Object
GridCustomGroupEventArgs
See Also