totalItems[]

Specifies items of the total summary.

Type:

Array

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.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    summary: {
        totalItems: [{
            column: 'Age',
            summaryType: 'avg'
        }, {
            column: 'LastName',
            summaryType: 'count'
        }]
    }
});

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

alignment

Specifies the alignment of a summary item.

Type:

String

Default Value: undefined
Accepted Values: 'left' | 'center' | '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'
'guid' 'left'

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.

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

Data of the summary item.

Object structure:
value:

String

|

Number

|

Date

Summary item value as it was calculated.

valueText:

String

Summary item value with applied format and precision.

Return Value:

String

Text to be displayed in the summary item.

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.

displayFormat

Specifies a pattern for the summary item text.

Type:

String

Default Value: undefined

When implementing the pattern, you can access the summary item value with applied format and precision using position marker 0. If the summary item is placed in any other column rather than its parent one, you can also access the caption of the parent column using position marker 1. Place each of these position markers within curly brackets.

If your scenario requires more complex text customizations, utilize the customizeText option.

name

Specifies the identifier of a summary item.

Type:

String

Default Value: undefined

Specify this option if you need to refer to a summary item in your code afterwards, e.g., inside the calculateCustomSummary function.

precision

Specifies a precision for the summary item value of a numeric format.

Type:

Number

Default Value: undefined

This option accepts a number indicating how many digits after the decimal point a summary item value must contain. This option applies only when the summary item value has a numeric format.

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.

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.

JavaScript
var dataGridOptions = {
    // ...
    summary: {
        // ...
        skipEmptyValues: false
    }
}
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.
JavaScript
var dataGridOptions = {
    // ...
    summary: {
        totalItems: [{
            // ...
            name: 'customSummary1',
            summaryType: 'custom'
        }],
        calculateCustomSummary: function (options) {
            if (options.name == 'customSummary1') {
                if (options.summaryProcess == 'start') {
                    options.totalValue = 0;
                }
                if (options.summaryProcess == 'calculate') {
                    if (e.value) {
                        options.totalValue++;
                    }
                }
            }
        }
    }
}

summaryType

Specifies how to aggregate data for a summary item.

Type:

String

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

A summary item displays a value that is a product of applying an aggregate function to the data of a specific column. This aggregate function is defined by the summary type. The following list gives an overview of available summary types.

  • "sum"
    Sums up all values in a column.
  • "min"
    Calculates the minimum value in a column.
  • "max"
    Calculates the maximum value in a column.
  • "avg"
    Calculates the average of all values in a column.
  • "count"
    Calculates the number of items in a column.
  • "custom"
    Allows you to specify a custom aggregate function using the calculateCustomSummary option.

valueFormat

Specifies a format for the summary item value.

Type:

String

Default Value: undefined
Accepted Values: 'currency' | 'fixedPoint' | 'percent' | 'decimal' | 'exponential' | 'largeNumber' | 'thousands' | 'millions' | 'billions' | 'trillions' | 'longDate' | 'longTime' | 'monthAndDay' | 'monthAndYear' | 'quarterAndYear' | 'shortDate' | 'shortTime' | 'millisecond' | 'day' | 'month' | 'quarter' | 'year'

Additionally, you can set a precision for the summary item value if it has a numeric format. For this purpose, use the precision option.

NOTE
If you set this option to 'currency', cell values will be formatted according to the settings specified for the current culture in the globalize library. To provide a custom 'currency' format, use the customizeText option instead.