FlexGrid provides a built-in column picker that can simply be enabled by setting ShowToolButton property of the ColumnPickerInfo class to true. Enabling column picker allows end-users to add or remove a visible column through the gear icon () on the top left corner of the grid. The following code demonstrates the use of ShowToolButton property to enable column picker in FlexGrid:
C# |
Copy Code
|
---|---|
c1FlexGrid1.ColumnPickerInfo.ShowToolButton = true;
|
The following GIF shows how you can remove some visible columns using the Column Picker.
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 property to true to display the Open Column Picker option in column context menu as shown in the following code.
C# |
Copy Code
|
---|---|
c1FlexGrid1.ColumnContextMenuEnabled = true; c1FlexGrid1.ColumnPickerInfo.ShowColumnMenuItem = true; |
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.
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 property which sets the type of column picker search through the ColumnPickerSearchMode 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.
C# |
Copy Code
|
---|---|
c1FlexGrid1.ColumnPickerInfo.SearchMode = C1.Win.FlexGrid.ColumnPickerSearchMode.Highlight; |
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.
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.
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. |