DxGridDataColumn.GroupInterval Property

Specifies how to group data rows.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

[Parameter]
public GridColumnGroupInterval GroupInterval { get; set; }

Property Value

Type Description
GridColumnGroupInterval

An enumeration value.

Available values:

Name Description
Default

For date/time columns, this option is the same as the Date option. For non date/time columns, this option is the same as the Value option.

Value

Rows are grouped by the column values.

Date

For date/time columns, rows are grouped by the date part of their values. The time part is ignored.

DateMonth

For date/time columns, rows are grouped by the month part of their values.

DateYear

For date/time columns, rows are grouped by the year part of their values.

DateRange

For date/time columns, rows are combined into the following non-overlapping groups according to their date value as compared with today’s date: “Beyond Next Month”, “Next Month”, “Later this Month”, “Three Weeks Away”, “Two Weeks Away”, “Next Week”, “Today”, “Tomorrow”, “Yesterday”, “Sunday”, “Monday”, “Tuesday”, “Wednesday”, “Thursday”, “Friday”, “Saturday”, “Last Week”, “Two Weeks Ago”, “Three Weeks Ago”, “Earlier this Month”, “Last Month”, “Older”.

Alphabetical

Rows are grouped by the character that the column values start with.

DisplayText

Rows are grouped by the column values’ display text.

Custom

Custom logic is used to group grid data.

Remarks

The GroupInterval property specifies how to group data rows. For example, you can group date-time values by year, month or date, or you can group text values by display text or against individual characters.

@using Microsoft.EntityFrameworkCore
@using Grid.Northwind
@inject NorthwindContext Northwind

<DxGrid Data="GridDataSource"
        ShowGroupPanel="true"
        CustomizeCellDisplayText="OnCustomizeCellDisplayText">
    <Columns>
        <DxGridDataColumn FieldName="OrderDate"
                      DisplayFormat="d"
                      GroupIndex="0"
                      GroupInterval="GridColumnGroupInterval.DateMonth"/>
        <DxGridDataColumn FieldName="Customer"
                      SortMode="GridColumnSortMode.DisplayText"
                      GroupIndex="1"
                      GroupInterval="GridColumnGroupInterval.DisplayText" />
        <DxGridDataColumn FieldName="Freight"
                      DisplayFormat="n2" />
    </Columns>
</DxGrid>

@code {
    object GridDataSource { get; set; }

    protected override void OnInitialized() {
        GridDataSource = Northwind.Orders
            .Include(i => i.Customer)
            .Include(i => i.OrderDetails)
            .Include(i => i.ShipViaNavigation)
            .ToList();
    }

    void OnCustomizeCellDisplayText(GridCustomizeCellDisplayTextEventArgs e) {
        if (e.FieldName == "Customer")
        {
            var customer = (Customer)e.Value;
            e.DisplayText = $"{customer.CompanyName} ({customer.Country}, {customer.City})";
        }
    }
}

Grid - GroupIndex

Run Demo: Grid - Interval Grouping

You can also implement custom logic to group grid data.

Custom Grouping

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 code below 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 Grid.Northwind
@inject NorthwindContext Northwind

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

    protected override void OnInitialized() {
        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;
        }
    }
}

Custom Grouping

Run Demo: Grid - Custom Grouping

Implements

See Also