# Column Picker

## Content



FlexGrid provides a built-in column picker that can simply be enabled by setting [ShowToolButton](/componentone/docs/win/online-flexgrid/) property of the [ColumnPickerInfo](/componentone/docs/win/online-flexgrid/) class to **true**. Enabling column picker allows end-users to add or remove a visible column through the gear icon (![Gear button](https://cdn.mescius.io/document-site-files/images/2f10b028-0ae8-4c29-a102-4d67578c339b/images/gear-button.png)) on the top left corner of the grid. The following code demonstrates the use of **ShowToolButton** property to enable column picker in FlexGrid:

```csharp
c1FlexGrid1.ColumnPickerInfo.ShowToolButton = true;
```

The following GIF shows how you can remove some visible columns using the Column Picker.

![Using Column Picker in C1FlexGrid.](https://cdn.mescius.io/document-site-files/images/2f10b028-0ae8-4c29-a102-4d67578c339b/images/column_pickergif.gif)

Alternatively, column picker can be enabled through column context menus. You just need to select the **Open Column Picker** option from the column context menu to open the Column Picker UI. However, you need to set [ShowColumnMenuItem](/componentone/docs/win/online-flexgrid/) property to **true** to display the **Open Column Picker** option in column context menu as shown in the following code.

```csharp
c1FlexGrid1.ColumnContextMenuEnabled = true;         
c1FlexGrid1.ColumnPickerInfo.ShowColumnMenuItem = true;
```


> type=note
> **Note**: You need to enable the column context menu first in order to display **Open Column Picker** option in context menu.<br />For more information on column context menu, see [Enable Context menu](/componentone/docs/win/online-flexgrid/features/column-picker) section of the User Interaction topic.

### Search

With Column Picker, you can easily search for a column from the displayed column list. You can do so by entering the column name in the text field, and clicking the **Search** button as shown in the following GIF.

![Searching for columns in Column Picker](https://cdn.mescius.io/document-site-files/images/2f10b028-0ae8-4c29-a102-4d67578c339b/images/search-columnpicker.gif)

When you open the Column picker window, the focus is set to the first available element. If search is enabled in Column picker, then the focus is set to the search bar else the focus is set to the first element in the list of columns.

To enable column picker search, you need to use the [SearchMode](/componentone/docs/win/online-flexgrid/) property which sets the type of column picker search through the [ColumnPickerSearchMode](/componentone/docs/win/online-flexgrid/) enumeration. The **ColumnPickerSearchMode** enumeration provides the following options for the search type:

| **Enumeration Value** | **Description** |
| --- | --- |
| **None** | Disables the search panel. |
| **Highlight** | Highlights the search results. |

The following code snippet shows how to enable search in the Column Picker.

```csharp
c1FlexGrid1.ColumnPickerInfo.SearchMode = C1.Win.FlexGrid.ColumnPickerSearchMode.Highlight;
```

### Views

Column Picker provides different in-built views, such as list view and tree view based on the hierarchy of column fields in FlexGrid. By default, Column Picker displays column list in the form of list view as shown in the following image.

![Displays list-view in Column Picker for C1FlexGrid.](https://cdn.mescius.io/document-site-files/images/2f10b028-0ae8-4c29-a102-4d67578c339b/images/listview.png)

Alternatively, the column list is displayed in the form of tree view when hierarchical data is displayed in the columns, i.e., columns are arranged into bands as shown in the following image.

![Displays tree-view in Column Picker for C1FlexGrid.](https://cdn.mescius.io/document-site-files/images/2f10b028-0ae8-4c29-a102-4d67578c339b/images/tree-view.png)


> type=note
> Note: This view only appears when FlexGrid is integrated with **C1FlexGridBandedView** component.

### Keyboard Support

With built-in keyboard support, you can perform the basic navigation operations in the Column Picker window, such as shifting the focus, toggle the visibility of columns and many more.

The following table lists the supported keys and their corresponding operations.

| Key | Key Action |
| --- | --- |
| Tab | Moves the focus between the column elements and search bar. The focus is set to the search bar, if enabled. |
| Space | Toggles the visibility of the selected column. |
| Enter | Expands/Collapses the nodes in the Column Picker tree mode. |
| Esc | Closes the Column Picker window. |
| Up/Down | Moves between elements in Column Picker window. |