JavaScript/jQuery DataGrid - sortByGroupSummaryInfo

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

Type:

Array<SortByGroupSummaryInfoItem>

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
    ],
    // ...
})
Vue
App.vue
<template>
    <DxDataGrid>
        <DxSummary>
            <DxGroupItem 
                column="Age"
                summary-type="avg"
                name="Average Age Group Summary"
            />
            <DxGroupItem
                column="Income"
                summary-type="max"
            />
            <DxGroupItem
                column="Tasks"
                summary-type="min"
            />
        </DxSummary>
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxDataGrid, DxSummary, DxGroupItem } from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid,
        DxSummary,
        DxGroupItem
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { DataGrid, Summary, GroupItem } from 'devextreme-react/data-grid';

class App extends React.Component {
    render() {
        return (
            <DataGrid>
                <Summary>
                    <GroupItem 
                        column="Age"
                        summaryType="avg"
                        name="Average Age Group Summary" />
                    <GroupItem 
                        column="Income"
                        summaryType="max" />
                    <GroupItem 
                        column="Tasks" 
                        summaryType="min" />
                </Summary>
            </DataGrid>
        );
    }
}
export default App;

To use these summary items for sorting groups, assign an array of objects to the sortByGroupSummaryInfo property. 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 property 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
    ],
    // ...
})
Vue
App.vue
<template>
    <DxDataGrid>
        <DxSortByGroupSummaryInfo
            :summary-item="1"/> <!-- determines the maximum income item using its index in the "groupItems" array -->
        <DxSortByGroupSummaryInfo
            summary-item="min"/> <!-- determines the minimum tasks item using its aggregate function -->
        <DxSortByGroupSummaryInfo
            summary-item="Average Age Group Summary"/> <!-- determines the average age item using its name -->
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import {
    DxDataGrid,
    DxSortByGroupSummaryInfo
} from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid,
        DxSortByGroupSummaryInfo
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { DataGrid, SortByGroupSummaryInfo } from 'devextreme-react/data-grid';

class App extends React.Component {
    render() {
        return (
            <DataGrid>
                <SortByGroupSummaryInfo
                    summaryItem={1}/> {/* determines the maximum income item using its index in the "groupItems" array */}
                <SortByGroupSummaryInfo
                    summaryItem="min"/> {/* determines the minimum tasks item using its aggregate function */}
                <SortByGroupSummaryInfo
                    summaryItem="Average Age Group Summary"/> {/* determines the average age item using its name */}
            </DataGrid>
        );
    }
}
export default App;

After that, set the groupColumn property for objects in the sortByGroupSummaryInfo array. This property 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 property 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
    ],
    // ...
})
Vue
App.vue
<template>
    <DxDataGrid>
        <DxSortByGroupSummaryInfo
            :summary-item="1"
            group-column="Tasks"
        /> <!-- applies sorting only when records are grouped by the "Tasks" column -->
        <DxSortByGroupSummaryInfo
            summary-item="min"
            group-column="Last Name"
        /> <!-- applies sorting only when records are grouped by a "Last Name" column -->
        <DxSortByGroupSummaryInfo
            summary-item="Average Age Group Summary"
        /> <!-- applies sorting regardless the grouping column -->
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import {
    DxDataGrid,
    DxSortByGroupSummaryInfo
} from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid,
        DxSortByGroupSummaryInfo
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { DataGrid, SortByGroupSummaryInfo } from 'devextreme-react/data-grid';

class App extends React.Component {
    render() {
        return (
            <DataGrid>
                <SortByGroupSummaryInfo
                    summaryItem={1}
                    groupColumn="Tasks"
                /> {/* applies sorting only when records are grouped by the "Tasks" column */}
                <SortByGroupSummaryInfo
                    summaryItem="min"
                    groupColumn="Last Name"
                /> {/* applies sorting only when records are grouped by a "Last Name" column */}
                <SortByGroupSummaryInfo
                    summaryItem="Average Age Group Summary"
                /> {/* applies sorting regardless the grouping column */}
            </DataGrid>
        );
    }
}
export default App;

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 property.

NOTE
This feature does not work when remoteOperations.groupPaging is set to true.

View Demo

See Also

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

| undefined
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 property. If you omit this property when declaring an object of the sortByGroupSummaryInfo array, the sorting setting will be applied when any column is used in grouping.

See Also

sortOrder

Specifies the sort order of group summary item values.

Type:

SortOrder

| undefined
Default Value: undefined
Accepted Values: undefined

summaryItem

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

Type:

String

|

Number

| undefined
Default Value: undefined

The summaryItem property 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
    ],
    // ...
})
    Vue
    App.vue
    <template>
    <DxDataGrid ... >
        <DxSummary>
            <DxGroupItem
                column="Age"
                summary-type="avg"
                name="Average Age Group Summary"
            />
        </DxSummary>
        <DxSortByGroupSummaryInfo 
            summary-item="Average Age Group Summary"
        /> 
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid, {
    DxSummary,
    DxGroupItem,
    DxSortByGroupSummaryInfo
} from 'devextreme-vue/data-grid';

export default {
    components: {              
        DxDataGrid,
        DxSummary,
        DxGroupItem,
        DxSortByGroupSummaryInfo
    },
    // ...
}
</script>
    React
    App.js
    import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import DataGrid, {
    Summary,
    GroupItem,
    SortByGroupSummaryInfo
} from 'devextreme-react/data-grid';

export default function App() {
    return (
        <DataGrid ... >
            <Summary>
                <GroupItem
                    column="Age"
                    summaryType="avg"
                    name="Average Age Group Summary"
                />
            </Summary>
            <SortByGroupSummaryInfo 
                summaryItem="Average Age Group Summary"
            />
        </DataGrid>
    );
}

  • 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
    ],
    // ...
})
    Vue
    App.vue
    <template>
    <DxDataGrid ... >
        <DxSummary>
            <DxGroupItem
                column="Age"
                summary-type="min"
            />
        </DxSummary>
        <DxSortByGroupSummaryInfo 
            :summary-item="0"
        /> 
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid, {
    DxSummary,
    DxGroupItem,
    DxSortByGroupSummaryInfo
} from 'devextreme-vue/data-grid';

export default {
    components: {              
        DxDataGrid,
        DxSummary,
        DxGroupItem,
        DxSortByGroupSummaryInfo
    },
    // ...
}
</script>
    React
    App.js
    import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import DataGrid, {
    Summary,
    GroupItem,
    SortByGroupSummaryInfo
} from 'devextreme-react/data-grid';

export default function App() {
    return (
        <DataGrid ... >
            <Summary>
                <GroupItem
                    column="Age"
                    summaryType="min"
                />
            </Summary>
            <SortByGroupSummaryInfo 
                summaryItem={0}
            />
        </DataGrid>
    );
}

  • A summary type. In this case, the grid will use the first item from the groupItems array whose summaryType property matches the summaryItem property. For example, the following code sorts groups according to the values of the group summary item whose column property is "Tasks".

    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
    ],
    // ...
})
    Vue
    App.vue
    <template>
    <DxDataGrid ... >
        <DxSummary>
            <DxGroupItem
                column="Age"
                summary-type="avg"
            />
            <DxGroupItem
                column="Income"
                summary-type="max"
            />
            <DxGroupItem
                column="Tasks"
                summary-type="min"
            />
        </DxSummary>
        <DxSortByGroupSummaryInfo 
            summary-item="min"
        />
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid, {
    DxSummary,
    DxGroupItem,
    DxSortByGroupSummaryInfo
} from 'devextreme-vue/data-grid';

export default {
    components: {              
        DxDataGrid,
        DxSummary,
        DxGroupItem,
        DxSortByGroupSummaryInfo
    },
    // ...
}
</script>
    React
    App.js
    import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import DataGrid, {
    Summary,
    GroupItem,
    SortByGroupSummaryInfo
} from 'devextreme-react/data-grid';

export default function App() {
    return (
        <DataGrid ... >
            <Summary>
                <GroupItem
                    column="Age"
                    summaryType="avg"
                />
                <GroupItem
                    column="Income"
                    summaryType="max"
                />
                <GroupItem
                    column="Tasks"
                    summaryType="min"
                />
            </Summary>
            <SortByGroupSummaryInfo 
                summaryItem="min"
            />
        </DataGrid>
    );
}

    View Demo

  • 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 property matches the summaryItem property. For example, the following code declares two group summary items with identical values to the column property. However, groups will be sorted only according to the values of the group summary item whose summaryType property 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
    ],
    // ...
})
    Vue
    App.vue
    <template>
    <DxDataGrid ... >
        <DxSummary>
            <DxGroupItem
                column="Income"
                summary-type="min"
            />
            <DxGroupItem
                column="Income"
                summary-type="avg"
            />
        </DxSummary>
        <DxSortByGroupSummaryInfo 
            summary-item="Income"
        />
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid, {
    DxSummary,
    DxGroupItem,
    DxSortByGroupSummaryInfo
} from 'devextreme-vue/data-grid';

export default {
    components: {              
        DxDataGrid,
        DxSummary,
        DxGroupItem,
        DxSortByGroupSummaryInfo
    },
    // ...
}
</script>
    React
    App.js
    import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import DataGrid, {
    Summary,
    GroupItem,
    SortByGroupSummaryInfo
} from 'devextreme-react/data-grid';

export default function App() {
    return (
        <DataGrid ... >
            <Summary>
                <GroupItem
                    column="Income"
                    summaryType="min"
                />
                <GroupItem
                    column="Income"
                    summaryType="avg"
                />
            </Summary>
            <SortByGroupSummaryInfo 
                summaryItem="Income"
            />
        </DataGrid>
    );
}
See Also