Configuration columnChooser

    Specifies the options of a column chooser.

    Type: Object

    A column chooser is a grid element that allows a user to hide specific grid columns. This element represents a panel that appears when the user clicks DevExtreme DataGrid ColumnChooser, or when the showColumnChooser() method is called.

    A grid column must have the allowHiding option set to true so that a user can drag it onto the column chooser panel.

    By default, the column chooser is disabled. To enable it, set the enabled option of the columnChooser object to true. Using the width and height options of this object, you can define the size of the column chooser panel.

    In addition, you can customize the text displayed by the panel when it is empty using the emptyPanelText option and the text displayed in the title of the panel using the title option.

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, you can show/hide grid columns using the column chooser. To invoke it, click the column chooser icon. Drag a column by its header onto/from the column chooser to hide/show this column. Additionally, several options that define the column chooser appearance are changed.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: books,
            columns: [
                'author', 'title', 'year', 'genre', 'format',
                { dataField: 'price', visible: false },
                { dataField: 'length', visible: false }
            ],
            paging: { pageSize: 7 },
            columnChooser: {
                enabled: true,
                height: 180,
                width: 400,
                emptyPanelText: 'A place to hide the columns'
            }
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.books = books;
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    In this example, you can show/hide grid columns using the column chooser. To invoke it, click the column chooser icon. Drag a column by its header onto/from the column chooser to hide/show this column. Additionally, several options that define the column chooser appearance are changed.

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: books,
        columns: [
            'author', 'title', 'year', 'genre', 'format',
            { dataField: 'price', visible: false },
            { dataField: 'length', visible: false }
        ],
        paging: { pageSize: 7 },
        columnChooser: {
            enabled: true,
            height: 180,
            width: 400,
            emptyPanelText: 'A place to hide the columns'
        }
    }"></div>
    
    var myViewModel = {
        books: books
    }
    ko.applyBindings(myViewModel);
    

    In this example, you can show/hide grid columns using the column chooser. To invoke it, click the column chooser icon. Drag a column by its header onto/from the column chooser to hide/show this column. Additionally, several options that define the column chooser appearance are changed.

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: books,
            columns: [
                'author', 'title', 'year', 'genre', 'format',
                { dataField: 'price', visible: false },
                { dataField: 'length', visible: false }
            ],
            paging: { pageSize: 7 },
            columnChooser: {
                enabled: true,
                height: 180,
                width: 400,
                emptyPanelText: 'A place to hide the columns'
            }
        });
    });
    

    emptyPanelText

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

    Type: String
    Default Value: 'Drag a column here to hide it'

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, the text displayed by an empty column chooser panel is changed. Drag all the columns from the column chooser onto the grid to see the altered text.

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

    In this example, the text displayed by an empty column chooser panel is changed. Drag all the columns from the column chooser onto the grid to see the altered text.

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: books,
        columns: [
            'author', 'title', 'year', 'genre', 'format',
            { dataField: 'price', visible: false },
            { dataField: 'length', visible: false }
        ],
        paging: { pageSize: 7 },
        columnChooser: {
            enabled: true,
            emptyPanelText: 'A place to hide the columns'
        }
    }"></div>
    
    var myViewModel = {
        books: books
    }
    ko.applyBindings(myViewModel);
    

    In this example, the text displayed by an empty column chooser panel is changed. Drag all the columns from the column chooser onto the grid to see the altered text.

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: books,
            columns: [
                'author', 'title', 'year', 'genre', 'format',
                { dataField: 'price', visible: false },
                { dataField: 'length', visible: false }
            ],
            paging: { pageSize: 7 },
            columnChooser: {
                enabled: true,
                emptyPanelText: 'A place to hide the columns'
            }
        });
    });
    

    enabled

    Specifies whether a user can invoke the column chooser or not.

    Type: Boolean
    Default Value: false

    When this option is set to true, a user can invoke the column chooser by clicking DevExtreme DataGrid ColumnChooser in the upper-right corner of the grid. Otherwise, this button is hidden, but the column chooser can still be invoked in code using the showColumnChooser() method.

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, you can enable/disable the column chooser using the check box below. At first, several grid columns are already hidden as their visible option is set to false. Using the column chooser, you can make them visible as well as hide one of the other columns.

    <div ng-controller="demoController" style="text-align:center; height:410px; max-width:630px; margin: 0 auto">
        <div style="height:380px" dx-data-grid="{
            dataSource: books,
            columns: [
                'author', 'title', 'year', 'genre', 'format',
                { dataField: 'price', visible: false },
                { dataField: 'language', visible: false },
                { dataField: 'length', visible: false }
            ],
            paging: { pageSize: 7 },
            bindingOptions: {  
                'columnChooser.enabled': 'checkBoxState'
            }
        }"></div>
        <div ng-model="checkBoxState" dx-check-box="{
            text: 'Enable Column Chooser'
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.books = books;
        $scope.checkBoxState = true;
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    In this example, you can enable/disable the column chooser using the check box below. At first, several grid columns are already hidden as their visible option is set to false. Using the column chooser, you can make them visible as well as hide one of the other columns.

    <div style="text-align:center; height:410px; max-width:630px; margin: 0 auto">
        <div style="height:380px" data-bind="dxDataGrid: {
            dataSource: books,
            columns: [
                'author', 'title', 'year', 'genre', 'format',
                { dataField: 'price', visible: false },
                { dataField: 'language', visible: false },
                { dataField: 'length', visible: false }
            ],
            paging: { pageSize: 7 },
            columnChooser: { enabled: checkBoxState }
        }"></div>
        <div data-bind="dxCheckBox: {
            text: 'Enable Column Chooser',
            value: checkBoxState
        }"></div>
    </div>
    
    var myViewModel = {
        books: books,
        checkBoxState: ko.observable(true)
    }
    ko.applyBindings(myViewModel);
    

    In this example, you can enable/disable the column chooser using the check box below. At first, several grid columns are already hidden as their visible option is set to false. Using the column chooser, you can make them visible as well as hide one of the other columns.

    <div style="text-align:center; height:410px; max-width:630px; margin: 0 auto">
        <div id="gridContainer" style="height:380px;"></div>
        <div id="enableColumnChooserCheckbox"></div>
    </div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: books,
            columns: [
                'author', 'title', 'year', 'genre', 'format',
                { dataField: 'price', visible: false },
                { dataField: 'language', visible: false },
                { dataField: 'length', visible: false }
            ],
            paging: { pageSize: 7 },
            columnChooser: { enabled: true }
        });
    
        $("#enableColumnChooserCheckbox").dxCheckBox({
            text: 'Enable Column Chooser',
            value: true,
            onValueChanged: function (e) {
                $('#gridContainer').dxDataGrid('instance').option("columnChooser.enabled", e.value);
            }
        });
    });
    

    height

    Specifies the height of the column chooser panel.

    Type: Number
    Default Value: 260

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, the height of the column chooser panel is changed using the columnChooser | height option. Click the column chooser icon to invoke this panel.

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

    In this example, the height of the column chooser panel is changed using the columnChooser | height option. Click the column chooser icon to invoke this panel.

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

    In this example, the height of the column chooser panel is changed using the columnChooser | height option. Click the column chooser icon to invoke this panel.

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

    mode

    Specifies how the end-user chooses columns.

    Type: String
    Default Value: 'dragAndDrop'
    Accepted Values: 'dragAndDrop' | 'select'

    In the "dragAndDrop" mode, the end-user moves column headers to the column chooser and back by drag-and-drop. In the "select" mode, the end-user selects column headers in the column chooser using check boxes. In both modes, the corresponding columns appear/disappear in the grid.

    When displaying DataGrid on touch-enabled devices, it is more convenient to use the "select" mode. Yet on mouse-equipped clients, either mode is suitable.

    Show Example:
    AngularJS
    Knockout
    jQuery

    This example illustrates differences between the modes of the column chooser. Choose a mode from the select box below the grid. Then, click the icon in the upper-right corner of the grid to invoke the column chooser. Depending on the chosen mode, you will be able either to select column headers or move them to/from the column chooser by drag-and-drop.

    <div ng-controller="gridController">
        <div style="height:380px; max-width:750px; margin:0 auto" dx-data-grid="{
            dataSource: books,
            columns: [
                'author', 'title', 'year', 'genre', 'format',
                { dataField: 'price', visible: false },
                { dataField: 'language', visible: false },
                { dataField: 'length', visible: false }
            ],
            paging: { pageSize: 8 },
            columnChooser: {
                enabled: true
            },
            bindingOptions: {
                'columnChooser.mode': 'selectedMode'
            }
        }"></div>
        <div style="height:40px; text-align:center">
            Column Chooser's Mode:&nbsp;
            <div style="display:inline-block; vertical-align:middle" ng-model="selectedMode" dx-select-box="{
                items: availableModes
            }"></div>
        </div>
    </div>
    
    var columnChooserModes = ['dragAndDrop', 'select'];
    
    angular
        .module('myApp', ['dx'])
        .controller('gridController', function ($scope) {
            $scope.books = books;
            $scope.availableModes = columnChooserModes;
            $scope.selectedMode = columnChooserModes[0];
        });
    
    angular.element(document).ready(function () {
       angular.bootstrap(document, ['myApp']);
    });
    

    This example illustrates differences between the modes of the column chooser. Choose a mode from the select box below the grid. Then, click the icon in the upper-right corner of the grid to invoke the column chooser. Depending on the chosen mode, you will be able either to select column headers or move them to/from the column chooser by drag-and-drop.

    <div style="height:380px; max-width:750px; margin:0 auto" data-bind="dxDataGrid: {
        dataSource: books,
        columns: [
            'author', 'title', 'year', 'genre', 'format',
            { dataField: 'price', visible: false },
            { dataField: 'language', visible: false },
            { dataField: 'length', visible: false }
        ],
        paging: { pageSize: 8 },
        columnChooser: {
            enabled: true,
            mode: selectedMode
        }
    }"></div>
    <div style="height:40px; text-align:center">
        Column Chooser's Mode:&nbsp;
        <div style="display:inline-block; vertical-align:middle" data-bind="dxSelectBox: {
            items: availableModes,
            value: selectedMode
        }"></div>
    </div>
    
    var columnChooserModes = ['dragAndDrop', 'select'];
    
    var viewModel = {
        books: books,
        availableModes: columnChooserModes,
        selectedMode: ko.observable(columnChooserModes[0])
    };
    
    ko.applyBindings(viewModel);
    

    This example illustrates differences between the modes of the column chooser. Choose a mode from the select box below the grid. Then, click the icon in the upper-right corner of the grid to invoke the column chooser. Depending on the chosen mode, you will be able either to select column headers or move them to/from the column chooser by drag-and-drop.

    <div id="gridContainer" style="height:380px; max-width:750px; margin:0 auto"></div>
    <div style="height:40px; text-align:center">
        Column Chooser's Mode:&nbsp;
        <div id="selectBoxContainer" style="display:inline-block; vertical-align:middle"></div>
    </div>
    
    var columnChooserModes = ['dragAndDrop', 'select'];
    
    $(function () {
        var dataGridInstance = $("#gridContainer").dxDataGrid({
            dataSource: books,
            columns: [
                'author', 'title', 'year', 'genre', 'format',
                { dataField: 'price', visible: false },
                { dataField: 'language', visible: false },
                { dataField: 'length', visible: false }
            ],
            paging: { pageSize: 8 },
            columnChooser: {
                enabled: true,
                mode: columnChooserModes[0]
            }
        }).dxDataGrid('instance');
        
        $("#selectBoxContainer").dxSelectBox({
            items: columnChooserModes,
            value: columnChooserModes[0],
            onValueChanged: function (e) {
                dataGridInstance.option({
                    columnChooser: { mode: e.value }
                })
            }
        });
    });
    

    title

    Specifies text displayed in the title of the column chooser panel.

    Type: String
    Default Value: 'Column Chooser'

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, the title of the column chooser panel is changed using the columnChooser | title option. Click the column chooser icon to invoke this panel.

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

    In this example, the title of the column chooser panel is changed using the columnChooser | title option. Click the column chooser icon to invoke this panel.

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

    In this example, the title of the column chooser panel is changed using the columnChooser | title option. Click the column chooser icon to invoke this panel.

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

    width

    Specifies the width of the column chooser panel.

    Type: Number
    Default Value: 250

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, the width of the column chooser panel is changed using the columnChooser | width option. Click the column chooser icon to invoke this panel.

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

    In this example, the width of the column chooser panel is changed using the columnChooser | width option. Click the column chooser icon to invoke this panel.

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

    In this example, the width of the column chooser panel is changed using the columnChooser | width option. Click the column chooser icon to invoke this panel.

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