Skip to main content

DxGridDataColumn.GroupInterval Property

Specifies how to group data rows.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(GridColumnGroupInterval.Default)]
[Parameter]
public GridColumnGroupInterval GroupInterval { get; set; }

Property Value

Type Default Description
GridColumnGroupInterval Default

A GridColumnGroupInterval 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
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable

<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; }
    NorthwindContext Northwind { get; set; }

    protected override void OnInitialized() {
        Northwind = NorthwindContextFactory.CreateDbContext();
        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})";
        }
    }

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

Grid - GroupIndex

Run Demo: Grid - Interval Grouping

Watch Video: Grid - Group Data

You can also implement custom logic to group grid data.

Note

The Grid does not support grouping by display text and custom grouping when you use a a Server Mode data source.

The Grid does not support interval grouping, custom grouping, or grouping by display text when you use a GridDevExtremeDataSource.

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

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

Implements

See Also