All docs
V19.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - Column Chooser

The column chooser allows a user to change the set of columns at runtime. It is configured using the columnChooser object and may operate in two modes: the default drag-and-drop mode and the select mode designed for touch devices.

jQuery
JavaScript
$(function() {
    $("#dataGridContainer").dxDataGrid({
        columnChooser: {
            enabled: true,
            mode: "dragAndDrop" // or "select"
        }
    });
});
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxo-column-chooser
        [enabled]="true"
        mode="dragAndDrop"> <!-- or "select" -->
    </dxo-column-chooser>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

DevExtreme HTML5 JavaScript jQuery Angular Knockout Widget DataGrid ColumnChooser DevExtreme HTML5 JavaScript jQuery Angular Knockout Widget DataGrid ColumnChooser

Set a column's allowHiding option to false if it should never be hidden. For columns whose headers should never appear in the column chooser, set the showInColumnChooser option to false.

jQuery
JavaScript
$(function() {
    $("#dataGridContainer").dxDataGrid({
        columnChooser: { enabled: true },
        columns: [{
            // ...
            allowHiding: false // cannot be hidden
        }, {
            // ...
            showInColumnChooser: false // does not appear in the column chooser even when hidden
        }]
    });
});
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxo-column-chooser [enabled]="true"></dxo-column-chooser>
    <dxi-column ...
        [allowHiding]="false"> <!-- cannot be hidden -->
    </dxi-column>
    <dxi-column ...
        [showInColumnChooser]="false"> <!-- does not appear in the column chooser even when hidden -->
    </dxi-column>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

Call the showColumnChooser() or hideColumnChooser() method to control the column chooser programmatically.

jQuery
JavaScript
var dataGrid = $("#dataGridContainer").dxDataGrid("instance");
dataGrid.showColumnChooser();
dataGrid.hideColumnChooser();
Angular
TypeScript
import { ..., ViewChild } from "@angular/core";
import { DxDataGridModule, DxDataGridComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent;
    // Prior to Angular 8
    // @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;
    showColumnChooser () {
        this.dataGrid.instance.showColumnChooser();
    };
    hideColumnChooser () {
        this.dataGrid.instance.hideColumnChooser();
    };
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
See Also