sortByGroupSummaryInfo[]

Allows you to sort groups according to the values of group summary items.

Type: Array
Default Value: undefined

Normally, when records are grouped by a column, the groups are sorted according to the values of this column. In a number of cases, such approaches cannot address your needs, e.g., when you require to sort groups by the number of records in each. For these cases, you can implement sorting according to the values of group summary items. These items are specified in the groupItems array. Assume that you have the following code that specifies three group summary items.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    summary: {
        groupItems: [{
            column: 'Age',
            summaryType: 'avg',
            name: 'Average Age Group Summary'
        }, {
            column: 'Income',
            summaryType: 'max'
        }, {
            column: 'Tasks',
            summaryType: 'min'
        }]
    }
});

To use these summary items for sorting groups, assign an array of objects to the sortByGroupSummaryInfo option. In each object of this array, specify the summaryItem field. This field determines the summary item to be used for summary-based sorting. In the following code, three objects form the sortByGroupSummaryInfo array. In each object, the summaryItem option determines different summary items using different values.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    summary: {
        groupItems: [ ... ]
    },
    sortByGroupSummaryInfo: [
        { summaryItem: 1 }, // determines the maximum income item using its index in the "groupItems" array
        { summaryItem: 'min' }, // determines the minimum tasks item using its aggregate function
        { summaryItem: 'Average Age Group Summary' } // determines the average age item using its name
    ]
});

After that, set the groupColumn option for objects in the sortByGroupSummaryInfo array. This option identifies the column that must be used in grouping in order that a particular summary-based sorting setting be applied. If you have omitted this option from an object, the sorting setting specified by this object will be applied regardless of the column used in grouping.

JavaScript
$("#gridContainer").dxDataGrid({
    // ...
    summary: {
        groupItems: [ ... ]
    },
    sortByGroupSummaryInfo: [
        { summaryItem: 1, groupColumn: 'Tasks' }, // applies sorting only when records are grouped by the "Tasks" column
        { summaryItem: 'min', groupColumn: 'Last Name' }, // applies sorting only when records are grouped by a "Last Name" column
        { summaryItem: 'Average Age Group Summary' } // applies sorting regardless the grouping column
    ]
});

NOTE: If several summary-based sorting settings match the current grouping, their indexes in the sortByGroupSummaryInfo array will dictate the order of their application.

In addition, you can set an ascending or descending sort order for each summary-based sorting object using its sortOrder option.

groupColumn

Specifies the identifier of the column that must be used in grouping so that sorting by group summary item values be applied.

Type: String
Default Value: undefined

Sorting by group summary item values applies only when grid records are grouped by a specific column. To define this column, assign its name, data field or caption to the groupColumn option. If you omit this option when declaring an object of the sortByGroupSummaryInfo array, the sorting setting will be applied when any column is used in grouping.

sortOrder

Specifies the sort order of group summary item values.

Type: String
Default Value: undefined
Accepted Values: undefined | 'asc' | 'desc'

NOTE: When configuring the widget using ASP.NET MVC Wrappers, specify this option using the SortOrder enum. This enum accepts the following values: Asc and Desc.

summaryItem

Specifies the group summary item whose values must be used to sort groups.

Type: String
Default Value: undefined

The summaryItem option accepts one of the following values.

  • The name of a summary item. The following code sorts groups according to the values of the 'Average Age Group Summary' item.

    JavaScript
    $("#gridContainer").dxDataGrid({
        // ...
        summary: {
            groupItems: [{
                column: 'Age',
                summaryType: 'avg',
                name: 'Average Age Group Summary'
            }]
        },
        sortByGroupSummaryInfo: [{
            summaryItem: 'Average Age Group Summary'
        }]
    });
  • The index of a summary item in the groupItems array. The following code sorts groups according to the values of the group summary item that has index 0.

    JavaScript
    $("#gridContainer").dxDataGrid({
        // ...
        summary: {
            groupItems: [{
                column: 'Income',
                summaryType: 'min'
            }]
        },
        sortByGroupSummaryInfo: [{
            summaryItem: 0
        }]
    });     
  • A summary type. In this case, the grid will use the first item from the groupItems array whose summaryType option matches the summaryItem option. For example, the following code sorts groups according to the values of the group summary item whose column option is 'Income'.

    JavaScript
    $("#gridContainer").dxDataGrid({
        // ...
        summary: {
            groupItems: [{
                column: 'Age',
                summaryType: 'avg'
            }, {
                column: 'Income',
                summaryType: 'min'
            }, {
                column: 'Tasks',
                summaryType: 'min'
            }]
        },
        sortByGroupSummaryInfo: [{
            summaryItem: 'min'
        }]
    });
  • The name, data field or caption of a column. In this case, the grid will use the first item from the groupItems array whose column option matches the summaryItem option. For example, the following code declares two group summary items with identical values to the column option. However, groups will be sorted only according to the values of the group summary item whose summaryType option equals 'min', because this item is declared before the other one.

    JavaScript
    $("#gridContainer").dxDataGrid({
        // ...
        summary: {
            groupItems: [{
                column: 'Income',
                summaryType: 'min'
            },{
                column: 'Income',
                summaryType: 'avg'
            }]
        },
        sortByGroupSummaryInfo: [{
            summaryItem: 'Income'
        }]
    });