Summaries

The DataGrid widget allows you aggregate information on particular columns across the total grid or within groups of rows. For instance, you can obtain the number of records or maximum value, etc. Such information is called a summary. This topic provides basic information about different types of summaries.

Watch Video

Total Summary

A total summary is a grid feature that provides the ability to aggregate the entire column of data using one of the available aggregate functions.

Total Summary

To configure the total summary, use the summary | totalItems array elements. The minimum required configuration of the total summary object includes the column and the summaryType options.

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

NOTE: To learn about the total summary visual elements, refer to the Visual Elements | Total Summary topic.

View Demo Watch Video

Summary Item Location

By default, a total summary item is placed in the column that provides data for it. However, you can place the item to another column using the showInColumn option. The text alignment can also be changed.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    summary: {
        totalItems: [{
              column: 'OrderNumber',
              summaryType: 'count',
              alignment: 'right'
          }, {
              column: 'SaleAmount',
              summaryType: 'sum',
              alignment: 'left',
              showInColumn: 'OrderDate',
              // ...
          }]
    }
});

Total Summary

Group Summary

A group summary feature provides an ability to aggregate data in a group using one of the available aggregate functions.

DevExtreme DataGrid GroupPanel

To configure the group summary, use the summary | groupItems array elements. The minimum required configuration of the group summary object includes the column and the summaryType options.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    summary: {
        groupItems: [{
            column: 'SaleAmount',
            summaryType: 'sum'
        }
        // ...
        ]
    }
});

NOTE: To learn about the group summary visual elements, refer to the Visual Elements | Group Summary topic.

View Demo Watch Video

Summary Item Location

By default, group summary items are displayed in the header of the group row. You can change item location.

  • Align items by columns within the group row.
    Use the alignByColumn option of the group summary item that you need to align by the corresponding column.

  • Place items to the group footer.
    Set the showInGroupFooter option to true.

Whether you align group summary items by columns in the group row or in the group footer, you can specify a custom column for the group items. For this purpose, use the showInColumn option.

Show Example:
AngularJS
Knockout
jQuery

In this example, use the Switch control at the bottom to change the location of the "Total sales" summary item. Note that being placed to the footer, this item is displayed in the "OrderNumber" column instead of "SaleAmount", because its showInColumn option is set to "OrderNumber".


                                    

                                    

In this example, use the Switch control at the bottom to change the location of the "Total sales" summary item. Note that being placed to the footer, this item is displayed in the "OrderNumber" column instead of "SaleAmount", because its showInColumn option is set to "OrderNumber".


                                    

                                    

In this example, use the Switch control at the bottom to change the location of the "Total sales" summary item. Note that being placed to the footer, this item is displayed in the "OrderNumber" column instead of "SaleAmount", because its showInColumn option is set to "OrderNumber".


                                    

                                    

Sort by Group Summary

When records are grouped by a column, the groups are sorted according to the values of this column by default. To sort groups in a different way according to group summaries, use the grid's sortByGroupSummaryInfo option.

Show Example:
AngularJS
Knockout
jQuery

In this example, you can change the grid's options for sorting by group summary. Use the controls at the bottom of the grid: the SelectBox widget changes the summary item involved in sorting process; the Switch widget changes the order of sorting.


                                    

                                    

                                    

In this example, you can change the grid's options for sorting by group summary. Use the controls at the bottom of the grid: the SelectBox widget changes the summary item involved in sorting process; the Switch widget changes the order of sorting.


                                    

                                    

                                    

In this example, you can change the grid's options for sorting by group summary. Use the controls at the bottom of the grid: the SelectBox widget changes the summary item involved in sorting process; the Switch widget changes the order of sorting.


                                    

                                    

                                    

Custom Aggregate Functions

If built-in aggregate functions do not satisfy your needs, you can use your own one by setting the summaryType option to 'custom'. With this setting, the function assigned to the calculateCustomSummary field of the summary object will be used for counting the summary item. The example below shows how to implement the variance aggregation function.

JavaScript
var sum2,
    n;
$("#gridContainer").dxDataGrid({
    // ...
    summary: {
        totalItems: [{
            column: 'val',
            summaryType: 'custom',
            name: 'variance'
        }],
        calculateCustomSummary: function (options) {
            if (options.name == 'variance') {
                if (options.summaryProcess == 'start') {
                    options.totalValue = 0; //sum
                    sum2 = 0; //sum of squared values
                    n = 0;
                }
                if (options.summaryProcess == 'calculate') {
                    options.totalValue += options.value;
                    sum2 += Math.pow(options.value, 2);
                    n++;
                }
                if (options.summaryProcess == 'finalize') {
                    options.totalValue = sum2 - Math.pow(options.totalValue, 2) / n;
                    options.totalValue /= n - 1;
                }
            }
        }
    }
});

View Demo

Format Summary Items

If you need the summary items to look different in the UI, you can utilize the following customization options.

  • Value Format
    Use the valueFormat option to specify what kind of data is represented by the summary item.

  • Text Format
    To accompany the summary value with a text, use the displayFormat option. If you need a full control on a string that will be shown in UI, use the customizeText function. The summary value is passed into this function and can be changed.

A sample format configuration for the variance aggregate function created in the Custom Aggregate Functions topic is shown below.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    summary: {
        totalItems: [{
            // ...
            valueFormat: {
                type: 'exponential',
                precision: 3
            },
            displayFormat: 'Variance: {0}'
        }]
        // ...
    }
});