Vue DataGrid - grouping

Configures grouping.

Selector: DxGrouping
Type:

Grouping

Record Grouping Demo Remote Grouping Demo

See Also

allowCollapsing

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

Selector: allow-collapsing
Type:

Boolean

Default Value: true

See Also

autoExpandAll

Specifies whether groups appear expanded or not.

Selector: auto-expand-all
Type:

Boolean

Default Value: true

View Demo

NOTE
When you use the ODataStore and set this property to false, the DataGrid loads data for all pages at once.
See Also

contextMenuEnabled

Enables the user to group data using the context menu.

Selector: context-menu-enabled
Type:

Boolean

Default Value: false

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

View Demo

See Also

expandMode

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

Selector: expand-mode
Type:

GroupExpandMode

Default Value: 'buttonClick', 'rowClick' (mobile devices)

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

View Demo

See Also

texts

Defines the texts of grouping-related visual elements.

Selector: DxTexts
Type:

GroupingTexts

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

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