Vue DataGrid - groupPanel

Configures the group panel.

Selector: DxGroupPanel


Data in DataGrid can be grouped by one column or by several. Once a column is used for grouping, it is added to the group panel.

By default, the group panel is hidden. To make it visible, set the groupPanel.visible property to true. Alternatively, the visibility of the group panel can depend on the device's screen size. To accomplish this behavior, set the visible property to "auto".

In case you need to show the group panel, but make it irresponsive, assign false to the groupPanel.allowColumnDragging property. This is useful, for instance, when grid records are grouped initially and when the user needs to know about that grouping, but must not be able to change it.

Record Grouping Demo Remote Grouping Demo

See Also


Specifies whether columns can be dragged onto or from the group panel.

Selector: allow-column-dragging


Default Value: true

When the group panel is visible, the user can drag and drop columns onto/from it. However, some scenarios require the group panel to be irresponsive. For example, if you have grouped data initially and do not need this grouping to be changed by the user, yet you want the user to be aware of it. In such cases, set the allowColumnDragging property to false.


Specifies text displayed by the group panel when it does not contain any columns.

Selector: empty-panel-text


Default Value: 'Drag a column header here to group by that column'


Specifies whether the group panel is visible or not.





Default Value: false
Raised Events: onOptionChanged

The group panel is hidden by default. To make it visible, assign true to groupPanel.visible property. Additionally, the group panel includes the "auto" mode, in which the visibility of the group panel relies on the device's screen size. On small-screen devices, the group panel will be hidden; on the others - shown.

Record Grouping Demo Remote Grouping Demo