groupPanel

Specifies options that configure the group panel.

Type: Object

Grid records in dxDataGrid can be grouped by one column or by several. Once a column is used for grouping, it is added to a group panel.

A group panel is a grid element holding the headers of columns that grid records are grouped by. To make a group panel visible, you must set its visible option to true. When the group panel is visible, a user can drag grid columns onto and from it, thus grouping grid records. If you need to prohibit the dragging of columns to the group panel, set the allowColumnDragging option to false. In this case, columns can be added to the group panel from code only. Additionally, you can change the text displayed by the group panel when it is empty using the emptyPanelText option.

View Demo

Show Example:
AngularJS
Knockout
jQuery

In this example, grid records are initially grouped by the Format column. In addition, the group panel is made visible using the groupPanel | visible option. However, the capability to drag columns onto and from the group panel is disabled by setting the groupPanel | allowColumnDragging option to false. Thus, a user can only see how grid records are grouped, but cannot change the initial grouping.


                                    

                                    

In this example, grid records are initially grouped by the Format column. In addition, the group panel is made visible using the groupPanel | visible option. However, the capability to drag columns onto and from the group panel is disabled by setting the groupPanel | allowColumnDragging option to false. Thus, a user can only see how grid records are grouped, but cannot change the initial grouping.


                                    

                                    

In this example, grid records are initially grouped by the Format column. In addition, the group panel is made visible using the groupPanel | visible option. However, the capability to drag columns onto and from the group panel is disabled by setting the groupPanel | allowColumnDragging option to false. Thus, a user can only see how grid records are grouped, but cannot change the initial grouping.


                                    

                                    

allowColumnDragging

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

Type: Boolean
Default Value: true

By default, a grid column can be dragged onto the group panel in order to group grid records, but only if grouping by this column is allowed. If you need to prohibit dragging, set the allowColumnDragging option to false.

Show Example:
AngularJS
Knockout
jQuery

In this example, you can block the group panel to prevent grid columns from being dragged onto it. The column dragging capability is controlled by the groupPanel | allowColumnDragging option. When this option equals true, grid columns can be dragged onto and from the group panel; when false, they cannot. You can change the value of the aforementioned option at runtime using the check box under the grid.


                                    

                                    

In this example, you can block the group panel to prevent grid columns from being dragged onto it. The column dragging capability is controlled by the groupPanel | allowColumnDragging option. When this option equals true, grid columns can be dragged onto and from the group panel; when false, they cannot. You can change the value of the aforementioned option at runtime using the check box under the grid.


                                    

                                    

In this example, you can block the group panel to prevent grid columns from being dragged onto it. The column dragging capability is controlled by the groupPanel | allowColumnDragging option. When this option equals true, grid columns can be dragged onto and from the group panel; when false, they cannot. You can change the value of the aforementioned option at runtime using the check box under the grid.


                                    

                                    

emptyPanelText

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

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

Show Example:
AngularJS
Knockout
jQuery

In this example, you can place a required text into the empty group panel. Type your text in the text box under the grid. After that, make the text box lose focus by clicking the surrounding area. The typed text will be assigned to the groupPanel | emptyPanelText option and appear in the empty group panel.


                                    

                                    

In this example, you can place a required text into the empty group panel. Type your text in the text box under the grid. After that, make the text box lose focus by clicking the surrounding area. The typed text will be assigned to the groupPanel | emptyPanelText option and appear in the empty group panel.


                                    

                                    

In this example, you can place a required text into the empty group panel. Type your text in the text box under the grid. After that, make the text box lose focus by clicking the surrounding area. The typed text will be assigned to the groupPanel | emptyPanelText option and appear in the empty group panel.


                                    

                                    

visible

Specifies whether the group panel is visible or not.

Type: Boolean
Default Value: false

Show Example:
AngularJS
Knockout
jQuery

In this example, you can change the visibility of the group panel at runtime using the check box under the grid.


                                    

                                    

In this example, you can change the visibility of the group panel at runtime using the check box under the grid.


                                    

                                    

In this example, you can change the visibility of the group panel at runtime using the check box under the grid.