grouping

Specifies grouping settings and the behavior of grouped grid records.

Type: Object

An end-user can group data using the group panel, the context menu appearing by a click on a column header, or both. The following list provides an overview of grouping settings that you can specify using the grouping object.

  • Enabling
    To enable grouping using the context menu, assign true to the contextMenuEnabled option. Also, you can enable grouping using the group panel. For this purpose, assign true or "auto" to the groupPanel.visible option.

    jQuery
    JavaScript
    $(function () {
        $("#dataGridContainer").dxDataGrid({
            grouping: {
                contextMenuEnabled: true 
            },
            groupPanel: {
                visible: true 
            }
        });
    });
    Angular
    HTML
    TypeScript
    <dx-data-grid ... >
        <dxo-grouping [contextMenuEnabled]="true"></dxo-grouping>
        <dxo-group-panel [visible]="true"></dxo-group-panel>
    </dx-data-grid>
    import { DxDataGridModule } from 'devextreme-angular';
    // ...
    export class AppComponent {
        // ...
    }
    @NgModule({
        imports: [
            // ...
            DxDataGridModule
        ],
        // ...
    })

    If you need to disable grouping for an individual column, assign false to the allowGrouping property of this column.

  • Behavior
    There are two modes defining how the user expands/collapses groups. The "buttonClick" mode is suitable for medium- and large-screen devices. The "rowClick" mode is designed for small-screen devices, though it performs perfectly on the others as well. For more information on these modes, see the expandMode option.

    jQuery
    JavaScript
    $(function () {
        $("#dataGridContainer").dxDataGrid({
            grouping: {
                // ...
                expandMode: 'buttonClick' // or 'rowClick'
            }
        });
    });
    Angular
    HTML
    TypeScript
    <dx-data-grid ... >
        <dxo-grouping [expandMode]="buttonClick"></dxo-grouping> <!-- or 'rowClick' -->
    </dx-data-grid>
    import { DxDataGridModule } from 'devextreme-angular';
    // ...
    export class AppComponent {
        // ...
    }
    @NgModule({
        imports: [
            // ...
            DxDataGridModule
        ],
        // ...
    })

    A group can appear either expanded or collapsed initially. To specify that, use the autoExpandAll option. Also, you can disallow the user to collapse groups. For this purpose, assign false to the allowCollapsing option.

    jQuery
    JavaScript
    $(function () {
        $("#dataGridContainer").dxDataGrid({
            grouping: {
                // ...
                autoExpandAll: true, 
                allowCollapsing: false 
            }
        });
    });
    Angular
    HTML
    TypeScript
    <dx-data-grid ... >
        <dxo-grouping 
            [autoExpandAll]="true" 
            [allowCollapsing]="false">
        </dxo-grouping>
    </dx-data-grid>
    import { DxDataGridModule } from 'devextreme-angular';
    // ...
    export class AppComponent {
        // ...
    }
    @NgModule({
        imports: [
            // ...
            DxDataGridModule
        ],
        // ...
    })

    Additionally, you can collapse/expand grid groups from code using the collapseAll(groupIndex) and expandAll(groupIndex) methods.

See Also

View Demo

Show Example:
AngularJS
Knockout
jQuery

In this example, groups appear collapsed when you group grid records, because the autoExpandAll option of the grouping object is set to false.


                                    

                                    

In this example, groups appear collapsed when you group grid records, because the autoExpandAll option of the grouping object is set to false.


                                    

                                    

In this example, groups appear collapsed when you group grid records, because the autoExpandAll option of the grouping object is set to false.


                                    

                                    

allowCollapsing

Specifies whether the user can collapse grouped records in a grid or not.

Type: Boolean
Default Value: true
Show Example:
AngularJS
Knockout
jQuery

In this example, you can change the value of the allowCollapsing option at runtime using the check box under the grid. To see the changes, drag a column header onto the group panel and then try to collapse one of the appeared groups.


                                    

                                    

In this example, you can change the value of the allowCollapsing option at runtime using the check box under the grid. To see the changes, drag a column header onto the group panel and then try to collapse one of the appeared groups.


                                    

                                    

In this example, you can change the value of the allowCollapsing option at runtime using the check box under the grid. To see the changes, drag a column header onto the group panel and then try to collapse one of the appeared groups.


                                    

                                    

autoExpandAll

Specifies whether groups appear expanded or not.

Type: Boolean
Default Value: true
NOTE
Setting this option to false forces DataGrid to load data for all pages at once. It may be unnoticeable if you use a local data source, but in case of remote data sources, it is undesirable. To avoid the unnecessary loading of data, implement remote grouping.
See Also
Show Example:
AngularJS
Knockout
jQuery

In this example, you can change the value of the autoExpandAll option at runtime using the check box under the grid. To see the changes, group grid records by dragging a column header onto the group panel. If autoExpandAll is true, groups appear expanded. If not, they appear collapsed.


                                    

                                    

In this example, you can change the value of the autoExpandAll option at runtime using the check box under the grid. To see the changes, group grid records by dragging a column header onto the group panel. If autoExpandAll is true, groups appear expanded. If not, they appear collapsed.


                                    

                                    

In this example, you can change the value of the autoExpandAll option at runtime using the check box under the grid. To see the changes, group grid records by dragging a column header onto the group panel. If autoExpandAll is true, groups appear expanded. If not, they appear collapsed.


                                    

                                    

contextMenuEnabled

Enables the user to group data using the context menu.

Type: Boolean
Default Value: false

Set this option to true to enable grouping using the context menu. In this case, to group/ungroup data, the user right-clicks a column header and chooses the required item from the appeared context menu.

Watch Video

See Also

expandMode

Specifies the event on which a group will be expanded/collapsed.

Type: String
Default Value: 'buttonClick'
Accepted Values: 'buttonClick' | 'rowClick'

By default, to expand/collapse a group, the user clicks its expand/collapse button. On small-screen devices, this approach may impair the user experience. As an alternative, consider expanding/collapsing a group by a click on the group row. For this purpose, assign "rowClick" to the grouping.expandMode option.

When using the widget as an ASP.NET MVC Control, specify this option using the GridGroupingExpandMode enum. This enum accepts the following values: ButtonClick and RowClick.

See Also

groupContinuedMessage

Deprecated

Use the groupContinuedMessage option instead.

groupContinuesMessage

Deprecated

Use the groupContinuesMessage option instead.

texts

Defines the texts of grouping-related visual elements.

Type: Object

Use the options of this object to localize or customize grouping-related elements. For example, the groupByThisColumn, ungroup and ungroupAll options customize items of the context menu. These items appear in the menu only if the grouping.contextMenuEnabled option is set to true.

Also, this object contains the groupContinuesMessage and groupContinuedMessage options that specify the text added to group rows when the group is parted.