DevExtreme jQuery - Group Summary
A group summary aggregates data in groups by columns. You can associate each column with one or more summary items of different types.
Configure each summary item in the summary.groupItems array. The simplest item configuration requires a column that provides data and the aggregate function to be specified. Note that each group summary item is calculated only for those rows that meet filtering conditions if a filter is applied.
jQuery
$(function () {
$("#dataGridContainer").dxDataGrid({
// ...
columns: ["OrderNumber", "Price"],
summary: {
groupItems: [{
column: "OrderNumber",
summaryType: "count"
}, {
column: "Price",
summaryType: "sum"
}, {
column: "Price",
summaryType: "max"
}
// ...
]
}
});
});Angular
<dx-data-grid ...
[columns]="['OrderNumber', 'Price']" >
<dxo-summary>
<dxi-group-item
column="OrderNumber"
summaryType="count">
</dxi-group-item>
<dxi-group-item
column="Price"
summaryType="sum">
</dxi-group-item>
<dxi-group-item
column="Price"
summaryType="max">
</dxi-group-item>
</dxo-summary>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxDataGridModule
],
// ...
})See Also
Alignment and Location
All group items are displayed in parentheses after the group header by default. You can show an item in the column providing data for it by assigning true to the alignByColumn option. Specify the showInColumn option to show it in another column. This option can also be applied to items shown in the group footer.
jQuery
$(function () {
$("#dataGridContainer").dxDataGrid({
// ...
columns: ["OrderNumber", "City", "Price"],
summary: {
groupItems: [{
column: "City",
summaryType: "count",
alignByColumn: true
}, {
column: "Price",
summaryType: "sum",
showInGroupFooter: true
}, {
column: "Price",
summaryType: "max",
showInGroupFooter: true,
showInColumn: "City"
},
// ...
]
}
});
});Angular
<dx-data-grid ...
[columns]="['OrderNumber', 'City', 'Price']" >
<dxo-summary>
<dxi-group-item
column="City"
summaryType="count"
[alignByColumn]="true">
</dxi-group-item>
<dxi-group-item
column="Price"
summaryType="sum"
[showInGroupFooter]="true">
</dxi-group-item>
<dxi-group-item
column="Price"
summaryType="sum"
[showInGroupFooter]="true"
showInColumn="City">
</dxi-group-item>
</dxo-summary>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxDataGridModule
],
// ...
})Sort by Group Summary
Groups are sorted by values of a column they are grouped by. You can also sort them by a group summary item, for example, by the number of records in each group. Specify which summary item to sort by in the sortByGroupSummaryInfo array item's summaryItem field. The summaryItem can be the item name, item type, item index or column name. You can change the default sort order using the sortByGroupSummaryInfo.sortOrder option.
jQuery
$(function () {
$("#dataGridContainer").dxDataGrid({
// ...
summary: {
groupItems: [{
column: "OrderNumber",
summaryType: "count",
name: "Total Count"
}
// ...
]
},
sortByGroupSummaryInfo: [{
summaryItem: "Total Count", // or "count" | 0 | "OrderNumber"
sortOrder: "desc" // or "asc"
}]
});
});Angular
<dx-data-grid ... >
<dxo-summary>
<dxi-group-item
column="OrderNumber"
summaryType="count"
name="Total Count">
</dxi-group-item>
</dxo-summary>
<dxi-sort-by-group-summary-info
summaryItem="Total Count" <!-- or "count" | 0 | "OrderNumber" -->
sortOrder="desc"> <!-- or "asc" -->
</dxi-sort-by-group-summary-info>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxDataGridModule
],
// ...
})Summary-based sorting is applied when you group data by any column. If you need to apply it only when a specific column groups data, specify its name in the groupColumn field.
jQuery
$(function () {
$("#dataGridContainer").dxDataGrid({
// ...
summary: {
groupItems: [{
column: "SaleAmount",
summaryType: "max"
}, {
column: "TotalAmount",
summaryType: "max"
}
// ...
]
},
sortByGroupSummaryInfo: [{
summaryItem: "max",
groupColumn: "TotalAmount",
sortOrder: "asc"
}, {
summaryItem: "max",
groupColumn: "SaleAmount",
sortOrder: "desc"
}]
});
});Angular
<dx-data-grid ... >
<dxo-summary>
<dxi-group-item
column="SaleAmount"
summaryType="max">
</dxi-group-item>
<dxi-group-item
column="TotalAmount"
summaryType="max">
</dxi-group-item>
</dxo-summary>
<dxi-sort-by-group-summary-info
summaryItem="max"
groupColumn="TotalAmount"
sortOrder="asc">
</dxi-sort-by-group-summary-info>
<dxi-sort-by-group-summary-info
summaryItem="max"
groupColumn="SaleAmount"
sortOrder="desc">
</dxi-sort-by-group-summary-info>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxDataGridModule
],
// ...
})