All docs
V19.2
24.2
The page you are viewing does not exist in version 24.2.
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
Box
Map
Row
Vue
A newer version of this page is available. Switch to the current version.

JavaScript/jQuery TreeList - columnChooser

Configures the column chooser.

Type:

Object

The column chooser allows a user to hide columns at runtime. To enable it, assign true to the columnChooser.enabled option.

DevExtreme HTML5 JavaScript jQuery Angular Knockout TreeList Column Chooser

See Also

allowSearch

Specifies whether searching is enabled in the column chooser.

Type:

Boolean

Default Value: false

emptyPanelText

Specifies text displayed by the column chooser when it is empty.

Type:

String

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

enabled

Specifies whether a user can open the column chooser.

Type:

Boolean

Default Value: false

When this option is set to true, a user can open the column chooser with a click on the "Column Chooser" icon. Otherwise, this icon is hidden, but you still can open the column chooser from code by calling the showColumnChooser() method.

height

Specifies the height of the column chooser.

Type:

Number

Default Value: 260

mode

Specifies how a user manages columns using the column chooser.

Type:

String

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

In drag-and-drop mode, a user moves column headers to and from the column chooser by drag-and-drop. In select mode, the user selects column headers in the column chooser using check boxes. The select mode is designed primarily for touch-enabled devices. On mouse-equipped platforms, either mode is suitable.

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

NOTE
When the mode is "select", the column chooser does not hide column headers from the group panel (does not ungroup data).

Use the GridColumnChooserMode enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: DragAndDrop and Select.

searchTimeout

Specifies a delay in milliseconds between when a user finishes typing in the column chooser's search panel, and when the search is executed.

Type:

Number

Default Value: 500

title

Specifies the title of the column chooser.

Type:

String

Default Value: 'Column Chooser'

width

Specifies the width of the column chooser.

Type:

Number

Default Value: 250