totalItems[]

Specifies items of the total summary.

Type:

Array<Object>

Default Value: undefined

The total summary, which is located in the grid footer, provides a synopsis of all data contained in the grid. It contains several summary items. Each item displays a value that is a product of applying an aggregate function to the data of a specific column.

To specify the items of the total 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.

jQuery
JavaScript
$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        summary: {
            totalItems: [{
                column: "Age",
                summaryType: "avg"
            }, {
                column: "LastName",
                summaryType: "count"
            }]
        }
    });
});
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxo-summary>
        <dxi-total-item
            column="Age"
            summaryType="avg">
        </dxi-total-item>
        <dxi-total-item
            column="LastName"
            summaryType="count">
        </dxi-total-item>
    </dxo-summary>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

By default, a summary item is placed in the column that provides data for it. If you need to place it in another column, assign the identifier of this column to the showInColumn option.

View Demo

See Also

alignment

Specifies the alignment of a summary item.

Type:

String

Default Value: undefined
Accepted Values: 'center' | 'left' | 'right'

The default alignment of a summary item depends on the type of data that is held by the column that displays this item. The following table illustrates the dependency between the default alignment and the column data type.

dataType alignment
'number' 'right'
'boolean' 'center'
'string' 'left'
'date' 'left'
'datetime' 'left'
'guid' 'left'

Use the HorizontalAlignment 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: Left, Center, and Right.

See Also

column

Specifies the column that provides data for a summary item.

Type:

String

Default Value: undefined

To provide data for a summary item, assign the name, data field or caption of a column to this option. The summary item will be displayed in the corresponding column. If you require to place the summary item in another column, set the showInColumn option for this item.

See Also

cssClass

Specifies a CSS class to be applied to a summary item.

Type:

String

Default Value: undefined

You can change the appearance of summary items using CSS styles. To apply a style to a summary item, implement a CSS class, which may contain various properties, and assign the name of this class to the cssClass option of the summary item.

customizeText

Customizes the text to be displayed in the summary item.

Type:

Function

Function parameters:
itemInfo:

Object

The summary item's data.

Object structure:
Name Type Description
value

String

|

Number

|

Date

The summary item's value as it was calculated.

valueText

String

The summary item's formatted value.

Return Value:

String

The text for the summary item to display.

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

displayFormat

Specifies the summary item's text.

Type:

String

Default Value: undefined

You can use the following position markers in this text:

jQuery
JavaScript
$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        summary: {
            totalItems: [{
                column: "SaleAmount",
                summaryType: "sum",
                showInColumn: "TotalAmount",
                valueFormat: "currency",
                displayFormat: "Column: {1}. Sales: {0}" // for example, "Column: Total Amount. Sales: $1234" 
            },
            // ...
            ]
        }
    });
});
Angular
app.component.html
app.module.ts
<dx-data-grid ... >
    <dxo-summary>
        <dxi-total-item
            column="SaleAmount"
            summaryType="sum"
            showInColumn="TotalAmount"
            valueFormat="currency"
            displayFormat="Column: {1}. Sales: {0}"> <!-- for example, "Column: Total Amount. Sales: $1234" -->
        </dxi-total-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 { }
Vue
App.vue
<template> 
    <dx-data-grid ... >
        <dx-summary>
            <dx-total-item
                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" -->
        </dx-summary>
    </dx-data-grid>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

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

export default {
    components: {
        DxDataGrid,
        DxSummary, 
        DxTotalItem
    }
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import { DataGrid, Summary, TotalItem } from 'devextreme-react/data-grid';

class App extends React.Component {
    render() {
        return (
            <DataGrid>
                <Summary
                    <TotalItem 
                        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.

name

Specifies the total summary item's identifier.

Type:

String

Default Value: undefined

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

showInColumn

Specifies the column that must hold the summary item.

Type:

String

Default Value: undefined

By default, a summary item is placed in the column that provides data for it. If you require to place it in another column, assign the name, data field or caption of this column to the showInColumn option.

See Also

skipEmptyValues

Specifies whether or not to skip empty strings, null and undefined values when calculating a summary.

Type:

Boolean

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.

jQuery
JavaScript
$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        summary: {
            // ...
            skipEmptyValues: false
        }
    });
});
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxo-summary [skipEmptyValues]="false"></dxo-summary>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
NOTE
This option does not have any effect when you use a remote data source.
NOTE
Summaries of the count type do not skip empty values regardless of the skipEmptyValues option. However, you can implement a custom summary, which skips empty values, as follows.
jQuery
JavaScript
$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        summary: {
            totalItems: [{
                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++;
                        }
                    }
                }
            }
        }
    });
});
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxo-summary [calculateCustomSummary]="calculateSummary">
        <dxi-total-item
            summaryType="custom"
            name="customSummary1">
        </dxi-total-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
    ],
    // ...
})

summaryType

Specifies how to aggregate data for the total summary item.

Type:

String

Default Value: undefined
Accepted Values: 'avg' | 'count' | 'custom' | 'max' | 'min' | 'sum'

The following summary types are supported:

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

valueFormat

Specifies a summary item value's display format.

Type:

Format

Default Value: undefined

See the format section for details on accepted values.

See Also