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 the ColumnChooser ChartJS icon, 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 the ColumnChooser ChartJS icon located in the upper-right corner of the grid. Otherwise, the column chooser icon is hidden. In this case, the column chooser can be invoked in code only 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 dx-check-box="{
            text: 'Enable Column Chooser',
            bindingOptions: {
                value: 'checkBoxState'
            }
        }"></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
            }
        });
    });
    

    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
            }
        });
    });