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.

jQuery
JavaScript
$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        summary: {
            groupItems: [{
                column: 'Age',
                summaryType: 'avg',
                name: 'Average Age Group Summary'
            }, {
                column: 'Income',
                summaryType: 'max'
            }, {
                column: 'Tasks',
                summaryType: 'min'
            }]
        }
    });
});
Angular
HTML
TypeScript
 <dx-data-grid ... >
     <dxo-summary>
         <dxi-group-item
             column="Age"
             summaryType="avg"
             name="Average Age Group Summary">
         </dxi-group-item>
         <dxi-group-item
             column="Income"
             summaryType="max">
         </dxi-group-item>
         <dxi-group-item
             column="Tasks"
             summaryType="min">
         </dxi-group-item>
     </dxo-summary>
 </dx-data-grid>
import { DxDataGridModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

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.

jQuery
JavaScript
$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        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
        ]
    });
});
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxi-sort-by-group-summary-info 
        [summaryItem]="1"> <!-- determines the maximum income item using its index in the "groupItems" array -->
    </dxi-sort-by-group-summary-info>
    <dxi-sort-by-group-summary-info 
        summaryItem="min"> <!-- determines the minimum tasks item using its aggregate function -->
    </dxi-sort-by-group-summary-info>
    <dxi-sort-by-group-summary-info 
        summaryItem="Average Age Group Summary"> <!-- determines the average age item using its name -->
    </dxi-sort-by-group-summary-info>
</dx-data-grid>
import { DxDataGridModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

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.

jQuery
JavaScript
$(function () {
    $("#gridContainer").dxDataGrid({
        // ...
        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
        ]
    });
});
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxi-sort-by-group-summary-info 
        [summaryItem]="1" groupColumn="Tasks"> <!-- applies sorting only when records are grouped by the "Tasks" column -->
    </dxi-sort-by-group-summary-info>
    <dxi-sort-by-group-summary-info 
        summaryItem="min"
        groupColumn="Last Name"> <!-- applies sorting only when records are grouped by a "Last Name" column -->
    </dxi-sort-by-group-summary-info>
    <dxi-sort-by-group-summary-info 
        summaryItem="Average Age Group Summary"> <!--  applies sorting regardless the grouping column -->
    </dxi-sort-by-group-summary-info>
</dx-data-grid>
import { DxDataGridModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
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.

See Also

-Sort by Group Summary

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.

See Also

-Sort by Group Summary

sortOrder

Specifies the sort order of group summary item values.

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

When using the widget as an ASP.NET MVC Control, 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|Number
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.

    jQuery
    JavaScript
    $(function () {
        $("#dataGridContainer").dxDataGrid({
            // ...
            groupItems: [{
                column: 'Age',
                summaryType: 'avg',
                name: 'Average Age Group Summary'
            }],
            sortByGroupSummaryInfo: [
                { summaryItem: 'Average Age Group Summary' } 
            ]
        });
    });
    Angular
    HTML
    TypeScript
    <dx-data-grid ... >
        <dxo-summary>
            <dxi-group-item
                column="Age"
                summaryType="avg"
                name="Average Age Group Summary">
            </dxi-group-item>
        </dxo-summary>
        <dxi-sort-by-group-summary-info 
            summaryItem="Average Age Group Summary"> 
        </dxi-sort-by-group-summary-info>
    </dx-data-grid>
    import { DxDataGridModule } from 'devextreme-angular';
    // ...
    export class AppComponent {
        // ...
    }
    @NgModule({
        imports: [
            // ...
            DxDataGridModule
        ],
        // ...
    })
  • 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.

    jQuery
    JavaScript
    $(function () {
        $("#dataGridContainer").dxDataGrid({
            // ...
            groupItems: [{
                column: 'Age',
                summaryType: 'min'
            }],
            sortByGroupSummaryInfo: [{ summaryItem: 0 }]
        });
    });
    Angular
    HTML
    TypeScript
    <dx-data-grid ... >
        <dxo-summary>
            <dxi-group-item
                column="Age"
                summaryType="min">
            </dxi-group-item>
        </dxo-summary>
        <dxi-sort-by-group-summary-info 
            summaryItem="0"> 
        </dxi-sort-by-group-summary-info>
    </dx-data-grid>
    import { DxDataGridModule } from 'devextreme-angular';
    // ...
    export class AppComponent {
        // ...
    }
    @NgModule({
        imports: [
            // ...
            DxDataGridModule
        ],
        // ...
    })
  • 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'.

    jQuery
    JavaScript
    $(function () {
        $("#dataGridContainer").dxDataGrid({
            // ...
            summary: {
                groupItems: [{
                    column: 'Age',
                    summaryType: 'avg',
                }, {
                    column: 'Income',
                    summaryType: 'max'
                }, {
                    column: 'Tasks',
                    summaryType: 'min'
                }]
            },
            sortByGroupSummaryInfo: [{
                summaryItem: 'min'
            }]
        });
    });
    Angular
    HTML
    TypeScript
    <dx-data-grid ... >
        <dxo-summary>
            <dxi-group-item
                column="Age"
                summaryType="avg">
            </dxi-group-item>
            <dxi-group-item
                column="Income"
                summaryType="max">
            </dxi-group-item>
            <dxi-group-item
                column="Tasks"
                summaryType="min">
            </dxi-group-item>
        </dxo-summary>
        <dxi-sort-by-group-summary-info 
            summaryItem="min">
        </dxi-sort-by-group-summary-info>
    </dx-data-grid>
    import { DxDataGridModule } from 'devextreme-angular';
    // ...
    export class AppComponent {
        // ...
    }
    @NgModule({
        imports: [
            // ...
            DxDataGridModule
        ],
        // ...
    })
  • 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.

    jQuery
    JavaScript
    $(function () {
        $("#dataGridContainer").dxDataGrid({
            // ...
            summary: {
                groupItems: [{
                    column: 'Income',
                    summaryType: 'min'
                },{
                    column: 'Income',
                    summaryType: 'avg'
                }]
            },
            sortByGroupSummaryInfo: [{
                summaryItem: 'Income'
            }]
        });
    });
    Angular
    HTML
    TypeScript
    <dx-data-grid ... >
        <dxo-summary>
            <dxi-group-item
                column="Income"
                summaryType="min">
            </dxi-group-item>
            <dxi-group-item
                column="Income"
                summaryType="avg">
            </dxi-group-item>
        </dxo-summary>
        <dxi-sort-by-group-summary-info 
            summaryItem="Income">
        </dxi-sort-by-group-summary-info>
    </dx-data-grid>
    import { DxDataGridModule } from 'devextreme-angular';
    // ...
    export class AppComponent {
        // ...
    }
    @NgModule({
        imports: [
            // ...
            DxDataGridModule
        ],
        // ...
    })
See Also

-Sort by Group Summary