jQuery DataGrid - summary.groupItems

The group summary provides a synopsis of a group of data. Groups of data are formed in the process of grouping. The group summary contains several items. Each item displays a value that is a product of applying an aggregate function to a group of data.

To specify the items of the group summary, declare an array of objects, each of which contains at least two fields: column and summaryType. The column field specifies the identifier of the column that provides data for an aggregate function. The summaryType specifies the aggregate function to be applied. The following code snippet shows how to declare two summary items.

$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        summary: {
            groupItems: [{
                column: "Age",
                summaryType: "avg"
            }, {
                column: "LastName",
                summaryType: "count"
            }]
        }
    });
});

<dx-data-grid ... >
    <dxo-summary>
        <dxi-group-item
            column="Age"
            summaryType="avg">
        </dxi-group-item>
        <dxi-group-item
            column="LastName"
            summaryType="count">
        </dxi-group-item>
    </dxo-summary>
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

A group summary item may be located either in the group row or the group footer. By default, the group row holds all summary items. To locate a summary item in the group footer, set the showInGroupFooter option of this item to true.

View Demo

See Also

• Group Summary

When this option is set to false, group summary items are displayed in brackets of the group row header. Set this option to true to align them by the corresponding columns within the group row.

You can also display group summary items in a group footer by setting the showInGroupFooter option to true.

View Demo

See Also

• Group Summary - Alignment and Location

To provide data for a group summary item, assign the name, data field or caption of a column to this option. This item will be displayed in each group row when grouping is applied. If you require to place the group summary item in the group footer, set the showInGroupFooter option to true for this item.

See Also

• Group Summary

This option accepts a function that must return the text to be displayed in the summary item. When you implement this function, you can access the summary item value using the fields of object passed to the function as its argument.

See Also

• Format Text and Value

You can use the following position markers in this text:

• {0} - formatted summary value.
• {1} - the parent column's caption. Available if the showInColumn option is specified.

$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        summary: {
            groupItems: [{
                column: "SaleAmount",
                summaryType: "sum",
                showInColumn: "TotalAmount",
                valueFormat: "currency",
                displayFormat: "Column: {1}. Sales: {0}" // for example, "Column: Total Amount. Sales: $1234"
            },
            // ...
            ]
        }
    });
});

<dx-data-grid ... >
    <dxo-summary>
        <dxi-group-item
            column="SaleAmount"
            summaryType="sum"
            showInColumn="TotalAmount"
            valueFormat="currency"
            displayFormat="Column: {1}. Sales: {0}"> <!-- for example, "Column: Total Amount. Sales: $1234" -->
        </dxi-group-item>
    </dxo-summary>
</dx-data-grid>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxDataGridModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxDataGridModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

<template> 
    <DxDataGrid ... >
        <DxSummary>
            <DxGroupItem
                column="SaleAmount"
                summary-type="sum"
                show-in-column="TotalAmount"
                value-format="currency" 
                display-format="Column: {1}. Sales: {0}" /> <!-- for example, "Column: Total Amount. Sales: $1234" -->
        </DxSummary>
    </DxDataGrid>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid, { DxSummary, DxGroupItem } from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid,
        DxSummary,
        DxGroupItem
    }
}
</script>

import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import { DataGrid, Summary, GroupItem } from 'devextreme-react/data-grid';

class App extends React.Component {
    render() {
        return (
            <DataGrid>
                <Summary
                    <GroupItem 
                        column="SaleAmount" 
                        summaryType="sum" 
                        showInColumn="TotalAmount" 
                        valueFormat="currency" 
                        displayFormat="Column: {1}. Sales: {0}" /> <!-- for example, "Column: Total Amount. Sales: $1234" -->
                </Summary>
            </DataGrid>
        );
    }
}
export default App;

Use the customizeText option for more advanced text customizations.

Use this name to access the summary item in callback functions like calculateCustomSummary or customizeExcelCell.

A group summary item can be forced to be displayed in the group row by the column that provides data for this item. Alternatively, you can place an item to the group footer where the item is also held by the column that provides data for it. If you need to place an item in another column, assign the name, data field or caption of this column to the showInColumn option.

See Also

• Group Summary - Alignment and Location

By default, summary items are displayed as a part of a group row. If you need a summary item to be displayed in the group footer, assign true to the showInGroupFooter option of this item. This summary item will be located in the column that provides data for it. If you want another column to hold the summary item, specify the showInColumn option of this item.

View Demo

See Also

• Group Summary - Alignment and Location

Specified in a summary configuration object, this option affects an individual summary item. If you need to apply a single setting to all summaries in a grid, specify the skipEmptyValues option in the summary object.

$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        summary: {
            // ...
            skipEmptyValues: false
        }
    });
});

<dx-data-grid ... >
    <dxo-summary [skipEmptyValues]="false"></dxo-summary>
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        summary: {
            groupItems: [{
                summaryType: "custom",
                name: "customSummary1"
            }],
            calculateCustomSummary: function (options) {
                if (options.name == "customSummary1") {
                    if (options.summaryProcess == "start") {
                        options.totalValue = 0;
                    }
                    if (options.summaryProcess == "calculate") {
                        if (e.value) {
                            options.totalValue++;
                        }
                    }
                }
            }
        }
    });
});

<dx-data-grid ... >
    <dxo-summary [calculateCustomSummary]="calculateSummary">
        <dxi-group-item
            summaryType="custom"
            name="customSummary1">
        </dxi-group-item>
    </dxo-summary>
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    calculateSummary (options) {
        if (options.name == "customSummary1") {
            if (options.summaryProcess == "start") {
                options.totalValue = 0;
            }
            if (options.summaryProcess == "calculate") {
                if (e.value) {
                    options.totalValue++;
                }
            }
        }
    };
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

The following summary types are supported:

• "sum"

• "min"

• "max"

• "avg"

• "count"

• "custom"
  Applies a custom client-side aggregate function (calculateCustomSummary). Refer to Client-Side Data Aggregation for more information.

• Any other type
  Applies a custom server-side aggregate function. Refer to Server-Side Data Aggregation for more information.

Use the SummaryType enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Sum, Min, Max, Avg, Count, and Custom. To apply a custom server-side aggregate function, use a string overload instead.

See Also

• Group Summary

See the format section for details on accepted values.

See Also

• Format Text and Value