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:
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.


                                    

                                    

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:
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.


                                    

                                    

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 from code only using the showColumnChooser method.

Show Example:
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.


                                    

                                    

height

Specifies the height of the column chooser panel.

Type: Number
Default Value: 260

Show Example:
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.


                                    

                                    

title

Specifies text displayed in the title of the column chooser panel.

Type: String
Default Value: "Column Chooser"

Show Example:
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.


                                    

                                    

width

Specifies the width of the column chooser panel.

Type: Number
Default Value: 250

Show Example:
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.