FlexGrid for WinForms | ComponentOne
Column / Column Picker
In This Topic
    Column Picker
    In This Topic

    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 (Gear button) 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.

    Using Column Picker in C1FlexGrid.

    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;
    
    Note: You need to enable the column context menu first in order to display Open Column Picker option in context menu.
    For more information on column context menu, see Enable Context menu 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

    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;
    

    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.

    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.

    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.