GridColumnGroupInterval Enum
Lists values that specify how to group data rows.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v25.1.dll
NuGet Package: DevExpress.Blazor
Declaration
public enum GridColumnGroupIntervalMembers
| Name | Description |
|---|---|
Default
|
For date/time columns, this option is the same as the |
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. |
Related API Members
The following properties accept/return GridColumnGroupInterval values:
Remarks
The GridColumnGroupInterval enumeration value 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();
}
}
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 grouping logic:
- Define a custom sorting algorithm (grouping relies on sort operations). To apply a custom algorithm, set the DxGridDataColumn.SortMode property to
Customand handle the CustomSort event. - Set the DxGridDataColumn.GroupInterval property to
Custom. - Handle the DxGrid.CustomGroup event and compare column values based on your custom logic. Use Value1 and Value2 event arguments to access compared values. To obtain other values from processed rows, call the GetRow1Value and GetRow2Value methods. To place compared values into the same group, set the SameGroup argument to
true. - In the event handler, set the Handled argument to
trueto override the default grouping mechanism. - (Optional) Handle the CustomizeGroupValueDisplayText event to modify group row text.
The following code snippet groups the Unit Price column by custom range values: $0.00-$10.00, $10.00-$20.00, etc.
<DxGrid Data="@Data"
ShowGroupPanel="true"
CustomGroup="Grid_CustomGroup"
CustomSort="Grid_CustomSort"
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" SortMode="GridColumnSortMode.Custom" />
<DxGridDataColumn FieldName="Quantity" />
</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;
}
}
void Grid_CustomSort(GridCustomSortEventArgs e) {
if (e.FieldName == "UnitPrice") {
e.Result = Grid_CompareColumnValues(e.Value1, e.Value2);
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;
}
}
}
