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 DataGrid Column Chooser

See Also
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.


                                    

                                    

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.


                                    

                                    

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.


                                    

                                    

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'

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.


                                    

                                    

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.


                                    

                                    

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.


                                    

                                    

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.

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.


                                    

                                    

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.


                                    

                                    

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.


                                    

                                    

height

Specifies the height of the column chooser.

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.


                                    

                                    

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.


                                    

                                    

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.


                                    

                                    

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.

When using the widget as an ASP.NET MVC Control, specify this option using the GridColumnChooserMode enum. This enum accepts the following values: DragAndDrop and Select.

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.


                                    

                                    

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.


                                    

                                    

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.


                                    

                                    

title

Specifies the title of the column chooser.

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.


                                    

                                    

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.


                                    

                                    

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.


                                    

                                    

width

Specifies the width of the column chooser.

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.


                                    

                                    

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.


                                    

                                    

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.