Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxGrid.CustomizeGroupValueDisplayText Event

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

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[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

<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;
        }
    }
}

DevExpress Blazor Grid - Customize Group Value

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

See Also