Configuration groupPanel

    Configures the group panel.

    Type: Object

    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 option to true. Alternatively, the visibility of the group panel can depend on the device's screen size. To accomplish this behavior, set the visible option to "auto".

    In case you need to show the group panel, but make it irresponsive, assign false to the groupPanel | allowColumnDragging option. 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.

    See Also
    • grouping | contextMenuEnabled - enables the user to group data using the context menu.
    • columns[] | allowGrouping - disallows grouping for an individual column.
    • grouping - defines the behavior of groups.

    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.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: books,
            columns: columns,
            paging: { pageSize: 7 },
            groupPanel: {
                visible: true,
                allowColumnDragging: false
            }
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.books = books;
        $scope.columns = [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'language',
            { dataField: 'format', groupIndex: 0 }
        ];
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    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.

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: books,
        columns: columns,
        paging: { pageSize: 7 },
        groupPanel: {
            visible: true,
            allowColumnDragging: false
        }
    }"></div>
    
    var myViewModel = {
        books: books,
        columns: [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'language',
            { dataField: 'format', groupIndex: 0 }
        ]
    }
    ko.applyBindings(myViewModel);
    

    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.

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: books,
            columns: [
                'author',
                { dataField: 'title', width: 210 },
                'year', 'genre', 'language',
                { dataField: 'format', groupIndex: 0 }
            ],
            paging: { pageSize: 7 },
            groupPanel: {
                visible: true,
                allowColumnDragging: false
            }
        });
    });
    

    allowColumnDragging

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

    Type: Boolean
    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 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.

    <div ng-controller="demoController" style="text-align:center; height:480px; max-width:630px; margin: 0 auto">
        <div style="height:450px" dx-data-grid="{
            dataSource: orders,
            columns: columns,
            paging: { pageSize: 9 },
            groupPanel: { visible: true },
            bindingOptions: {
                'groupPanel.allowColumnDragging': 'checkBoxState'
            }
        }"></div>
        <div ng-model="checkBoxState" dx-check-box="{
            text: 'Allow Column Dragging'
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.orders = orders;
        $scope.columns = [
            'OrderID', 'CustomerID',
            { dataField: 'OrderDate', dataType: 'date' },
            { dataField: 'ShippedDate', dataType: 'date' },
            'ShipName',
            { dataField: 'ShipCountry', caption: 'Ship To' }
        ];
        $scope.checkBoxState = true;
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    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.

    <div style="text-align:center; height:480px; max-width:630px; margin: 0 auto">
        <div style="height:450px" data-bind="dxDataGrid: {
            dataSource: orders,
            columns: columns,
            paging: { pageSize: 9 },
            groupPanel: {
                visible: true,
                allowColumnDragging: checkBoxState
            }
        }"></div>
            <div data-bind="dxCheckBox: {
            text: 'Allow Column Dragging',
            value: checkBoxState
        }"></div>
    </div>
    
    var myViewModel = {
        orders: orders,
        columns: [
            'OrderID', 'CustomerID',
            { dataField: 'OrderDate', dataType: 'date' },
            { dataField: 'ShippedDate', dataType: 'date' },
            'ShipName',
            { dataField: 'ShipCountry', caption: 'Ship To' }
        ],
        checkBoxState: ko.observable(true)
    }
    ko.applyBindings(myViewModel);
    

    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.

    <div style="text-align:center; height:480px; max-width:630px; margin: 0 auto">
        <div id="gridContainer" style="height:450px;"></div>
        <div id="checkboxContainer"></div>
    </div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: orders,
            columns: [
                'OrderID', 'CustomerID',
                { dataField: 'OrderDate', dataType: 'date' },
                { dataField: 'ShippedDate', dataType: 'date' },
                'ShipName',
                { dataField: 'ShipCountry', caption: 'Ship To' }
            ],
            paging: { pageSize: 9 },
            groupPanel: { visible: true }
        });
    
        $("#checkboxContainer").dxCheckBox({
            text: 'Allow Column Dragging',
            value: true,
            onValueChanged: function (e) {
                $('#gridContainer').dxDataGrid('instance').option("groupPanel.allowColumnDragging", e.value);
            }
        });
    });
    

    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.

    <div style="height:450px" ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin:0 auto" dx-data-grid="{
            dataSource: books,
            columns: columns,
            paging: { pageSize: 7 },
            groupPanel: { visible: true },
            bindingOptions: {
                'groupPanel.emptyPanelText': 'emptyPanelText'
            }
        }"></div>
        <div style="width:300px; margin:0 auto;" ng-model="emptyPanelText" dx-text-box="{
            placeholder: 'Enter a text for the empty group panel',
            valueChangeEvent: 'keyup',
            height: 40,
            width: 300
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.books = books;
        $scope.columns = [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'language', 'format'
        ];
        $scope.emptyPanelText = null;
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    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.

    <div style="height:390px; max-width:630px; margin:0 auto" data-bind="dxDataGrid: {
        dataSource: books,
        columns: columns,
        paging: { pageSize: 7 },
        groupPanel: {
            visible: true,
            emptyPanelText: emptyPanelText
        }
    }"></div>
    <div style="width:300px; margin:0 auto" data-bind="dxTextBox: {
        placeholder: 'Enter a text for the empty group panel',
        valueChangeEvent: 'keyup',
        height: 40,
        width: 300,
        value: emptyPanelText
    }"></div>
    
    var myViewModel = {
        books: books,
        columns: [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'language', 'format'
        ],
        emptyPanelText: ko.observable()
    }
    ko.applyBindings(myViewModel);
    

    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.

    <div id="gridContainer" style="height: 380px; max-width: 800px; margin: 0 auto"></div>
    <div id="emptyPanelTextBox" style="height: 45px; width: 280px; margin:0 auto"></div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: books,
            columns: [
                'author',
                { dataField: 'title', width: 210 },
                'year', 'genre', 'language', 'format'
            ],
            paging: { pageSize: 7 },
            groupPanel: { visible: true }
        });
    
        $("#emptyPanelTextBox").dxTextBox({
            placeholder: 'Enter a text for the empty group panel',
            valueChangeEvent: 'keyup',
            height: 40,
            width: 300,
            onValueChanged: function (info) {
                var dataGrid = $('#gridContainer').dxDataGrid('instance');
                dataGrid.option({
                    groupPanel: { emptyPanelText: info.value }
                });
            }
        });
    });
    

    visible

    Specifies whether the group panel is visible or not.

    Type: Boolean|String
    Default Value: false
    Accepted Values: 'auto'

    The group panel is hidden by default. To make it visible, assign true to groupPanel | visible option. 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.

    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.

    <div ng-controller="demoController" style="text-align:center; height:480px; max-width:630px; margin: 0 auto">
        <div style="height:450px" dx-data-grid="{
            dataSource: orders,
            columns: columns,
            paging: { pageSize: 9 },
            groupPanel: { visible: true },
            bindingOptions: {
                'groupPanel.visible': 'checkBoxState'
            }
        }"></div>
        <div ng-model="checkBoxState" dx-check-box="{
            text: 'Show the Group Panel'
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.orders = orders;
        $scope.columns = [
            'OrderID', 'CustomerID',
            { dataField: 'OrderDate', dataType: 'date' },
            { dataField: 'ShippedDate', dataType: 'date' },
            'ShipName',
            { dataField: 'ShipCountry', caption: 'Ship To' }
        ];
        $scope.checkBoxState = true;
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

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

    <div style="text-align:center; height:480px; max-width:630px; margin: 0 auto">
        <div style="height:450px" data-bind="dxDataGrid: {
        dataSource: orders,
        columns: columns,
        paging: { pageSize: 9 },
        groupPanel: { visible: checkBoxState }
    }"></div>
        <div data-bind="dxCheckBox: {
        text: 'Show the Group Panel',
        value: checkBoxState
    }"></div>
    </div>
    
    var myViewModel = {
        orders: orders,
        columns: [
            'OrderID', 'CustomerID',
            { dataField: 'OrderDate', dataType: 'date' },
            { dataField: 'ShippedDate', dataType: 'date' },
            'ShipName',
            { dataField: 'ShipCountry', caption: 'Ship To' }
        ],
        checkBoxState: ko.observable(true)
    }
    ko.applyBindings(myViewModel);
    

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

    <div style="text-align:center; height:480px; max-width:630px; margin: 0 auto">
        <div id="gridContainer" style="height:450px;"></div>
        <div id="showGroupPanelCheckbox"></div>
    </div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: orders,
            columns: [
                'OrderID', 'CustomerID',
                { dataField: 'OrderDate', dataType: 'date' },
                { dataField: 'ShippedDate', dataType: 'date' },
                'ShipName',
                { dataField: 'ShipCountry', caption: 'Ship To' }
            ],
            paging: { pageSize: 9 },
            groupPanel: { visible: true }
        });
    
        $("#showGroupPanelCheckbox").dxCheckBox({
            text: 'Show the Group Panel',
            value: true,
            onValueChanged: function (e) {
                $('#gridContainer').dxDataGrid('instance').option("groupPanel.visible", e.value);
            }
        });
    });