jQuery DataGrid - sortByGroupSummaryInfo

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.

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

 <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
    ],
    // ...
})

<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.common.css';
import 'devextreme/dist/css/dx.light.css';

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

export default {
    components: {
        DxDataGrid,
        DxSummary,
        DxGroupItem
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.common.css';
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 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.

$(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
        ]
    });
});

<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
    ],
    // ...
})

<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.common.css';
import 'devextreme/dist/css/dx.light.css';

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

export default {
    components: {
        DxDataGrid,
        DxSortByGroupSummaryInfo
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.common.css';
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 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.

$(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
        ]
    });
});

<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
    ],
    // ...
})

<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.common.css';
import 'devextreme/dist/css/dx.light.css';

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

export default {
    components: {
        DxDataGrid,
        DxSortByGroupSummaryInfo
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.common.css';
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 option.

See Also

• Sort by Group Summary

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

Use the SortOrder enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Asc and Desc.

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