summary groupItems[]

    Specifies items of the group summary.

    Type: Array
    Default Value: undefined

    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.

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

    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 Watch Video

    alignByColumn

    Indicates whether to display group summary items in parentheses after the group row header or to align them by the corresponding columns within the group row.

    Type: Boolean
    Default Value: false

    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.

    NOTE: If this option is set to true for the first column of the grid, this setting is ignored (the summary item will be displayed in parentheses after the group row header). It happens because in the described case, the group header and the summary value occupy the same cell.

    View Demo

    column

    Specifies the column that provides data for a group summary item.

    Type: String
    Default Value: undefined

    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.

    customizeText

    Customizes the text to be displayed in the summary item.

    Type: function(itemInfo)
    Function parameters:
    itemInfo: Object
    Data of the summary item.
    Object structure:
    Summary item value as it was calculated.
    valueText: String
    Summary item value with applied format.
    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 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

    Deprecated

    Use the valueFormat | precision option instead.

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

    Type: Number
    Default Value: undefined

    showInColumn

    Specifies the column that must hold the summary item when this item is displayed in the group footer or aligned by a column in the group row.

    Type: String
    Default Value: undefined

    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.

    showInGroupFooter

    Specifies whether or not a summary item must be displayed in the group footer.

    Type: Boolean
    Default Value: false

    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

    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: {
            groupItems: [{
                // ...
                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 a group of data from 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 within the group.
    • "min"
      Calculates the minimum value in a column within the group.
    • "max"
      Calculates the maximum value in a column within the group.
    • "avg"
      Calculates the average of all values in a column within the group.
    • "count"
      Calculates the number of items in a column within the group.
    • "custom"
      Allows you to specify a custom aggregate function using the calculateCustomSummary option.

    valueFormat

    Specifies a format for the summary item value.

    Type: Format
    Default Value: undefined

    NOTE: DevExtreme widgets provide a wide choice of predefined formats. If you are, however, going to use custom formats, link the Globalize library to your project. Learn how to do this from the Installation topic.

    See Also
    • format - a comprehensive overview of the capabilities provided by this option.