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
],
// ...
})
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
Feedback