grouping

Specifies the behavior of grouped grid records.

Type: Object

In dxDataGrid, records can be grouped by column values. The behavior of the grouped records is determined by the options of the grouping configuration object.

A group of records can appear in a grid either extended or collapsed. To specify that, use the autoExpandAll option. Manual group collapsing can be prohibited entirely by setting the allowCollapsing option to false. Note that specifying both of these options may result in a lack of functionality. For example, when manual collapsing of groups is prohibited, but all groups are collapsed as the autoExpandAll is set to false, there is no way of expanding any group in a grid. Hence, be mindful when using both the allowCollapsing and autoExpandAll options.

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

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 dxDataGrid 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

To get information about expanding and collapsing groups in the dxDataGrid widget, refer to the Expanding and Collapsing Groups topic.

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.


                                    

                                    

groupContinuedMessage

Specifies the message displayed in a group row when the corresponding group is continued from the previous page.

Type: String
Default Value: 'Continued from the previous page'

When grid records are grouped, the groups might be parted due to the fact that their sizes don't fit the page size. In that case, the group row corresponding to a parted group is supplemented with a message notifying the user that the group is started on one of the previous pages. To specify the text of this message, use the groupContinuedMessage option.

Additionally, you can specify the message displayed in a group row when the corresponding group continues on the next page. Use the groupContinuesMessage option for this purpose.

NOTE: If a group simultaneously continues on the next page and is continued from the previous page, the texts specified by the groupContinuedMessage and groupContinuesMessage options will be concatenated.

Show Example:
AngularJS
Knockout
jQuery

In this example, you can change the value of the groupContinuedMessage option at runtime using the controls under the grid. Enter a new value for this option into the textbox and apply it by pressing the Enter button. To see the changes, group grid records by dragging a column header onto the group panel and then switch between pages.


                                    

                                    

In this example, you can change the value of the groupContinuedMessage option at runtime using the controls under the grid. Enter a new value for this option into the textbox and apply it by pressing the Enter button. To see the changes, group grid records by dragging a column header onto the group panel and then switch between pages.


                                    

                                    

In this example, you can change the value of the groupContinuedMessage option at runtime using the controls under the grid. Enter a new value for this option into the textbox and apply it by pressing the Enter button. To see the changes, group grid records by dragging a column header onto the group panel and then switch between pages.


                                    

                                    

groupContinuesMessage

Specifies the message displayed in a group row when the corresponding group continues on the next page.

Type: String
Default Value: 'Continues on the next page'

When grid records are grouped, the groups might be parted due to the fact that their sizes do not match the page size. In that case, the group row corresponding to a parted group is supplemented with a message notifying the user that the group does not end on the current page. To specify the text of this message, use the groupContinuesMessage option.

Additionally, you can specify the message displayed in a group row when the corresponding group is continued from the previous page. Use the groupContinuedMessage option for this purpose.

NOTE: If a group simultaneously continues on the next page and is continued from the previous page, the texts specified by the groupContinuedMessage and groupContinuesMessage options will be concatenated.

Show Example:
AngularJS
Knockout
jQuery

In this example, you can change the value of the groupContinuesMessage option at runtime using the controls under the grid. Enter a new value for this option into the textbox and apply it by pressing the Enter button. To see the changes, group grid records by dragging a column header onto the group panel and then switch between pages.


                                    

                                    

In this example, you can change the value of the groupContinuesMessage option at runtime using the controls under the grid. Enter a new value for this option into the textbox and apply it by pressing the Enter button. To see the changes, group grid records by dragging a column header onto the group panel and then switch between pages.


                                    

                                    

In this example, you can change the value of the groupContinuesMessage option at runtime using the controls under the grid. Enter a new value for this option into the textbox and apply it by pressing the Enter button. To see the changes, group grid records by dragging a column header onto the group panel and then switch between pages.