DxGrid.CustomizeGroupValueDisplayText Event

Allows you to customize the group value’s display text.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public Action<GridCustomizeGroupValueDisplayTextEventArgs> CustomizeGroupValueDisplayText { get; set; }

Parameters

Type	Description
GridCustomizeGroupValueDisplayTextEventArgs	An object that contains data for this event.

Remarks

When you group data, the Grid creates group row text according to the following pattern:

{column}: {value} ({summary}, {summary})

{column} – the group column’s header display text.
{value} – the value’s display text.
{summary} – a summary item’s display text.

Example: Country: Argentina (Count: 3)

Handle the CustomizeGroupValueDisplayText event to customize a group value’s display text (the {value} part) in the summary display text. Use the DisplayText event argument property to specify the new display text.

Run Demo: Grid - Custom Grouping

Razor

<DxGrid @ref="Grid"
        Data="@Data"
        ShowGroupPanel="true"
        CustomGroup="Grid_CustomGroup"
        CustomizeGroupValueDisplayText="Grid_CustomizeGroupValueDisplayText">
    <Columns>
        <DxGridDataColumn FieldName="ProductName" MinWidth="100" />
        <DxGridDataColumn FieldName="CategoryName" MinWidth="100" />
        <DxGridDataColumn FieldName="Country" Width="10%" />
        <DxGridDataColumn FieldName="OrderDate" MinWidth="70" Width="10%" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c" GroupIndex="0" GroupInterval="GridColumnGroupInterval.Custom" Width="10%" />
        <DxGridDataColumn FieldName="Quantity" Width="10%" />
    </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;
        }
    }
    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;
        }
    }
}

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