Column Chooser

• Nov 15, 2024
• 2 minutes to read

The Column Chooser allows users to hide and show columns and bands. To display the Column Chooser, a user should click Show Column/Band chooser in the column’s header context menu:

The Column Chooser window contains column and band headers and check boxes. Each check box visualizes the BaseColumn.Visible property of the corresponding column or band. Set the BaseColumn.ShowInColumnChooser property to false to hide a column/band from the Column Chooser window.

The table below lists the main properties that affect element behavior and appearance.

Characteristics	Members
Column Chooser Control	ExtendedColumnChooserControl
Show and Hide	DataViewBase.ShowColumnChooser, DataViewBase.ShownColumnChooser, DataViewBase.HideColumnChooser, DataViewBase.HiddenColumnChooser, DataViewBase.IsColumnChooserVisible
Template	DataViewBase.ExtendedColumnChooserTemplate
Column Header Template	DataViewBase.ColumnHeaderTemplate
Header Caption	ColumnBase.ColumnChooserHeaderCaption

The GridControl displays the Column Chooser in a separate window. To add the Column Chooser to the same window as the GridControl, create an ExtendedColumnChooserControl object:

View Example: Display a Standalone Column Chooser

1. Users can open the Column Chooser window from a column header’s context menu. To prevent this, remove the Show Column Chooser button from the menu:

   

   XAML

   <Window
   xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
   ...>
   
   <dxg:TableView x:Name="view" >
       <dxg:TableView.ColumnMenuCustomizations>
           <dxb:RemoveAction ElementName="{x:Static dxg:DefaultColumnMenuItemNames.ColumnChooser}"/>
       </dxg:TableView.ColumnMenuCustomizations>
   </dxg:TableView>
   

2. Add a Column Chooser to the window:

   XAML

   <dxg:ExtendedColumnChooserControl Owner="{Binding ElementName=view}"
                                     FlowDirection="{Binding Owner.FlowDirection, 
                                                     RelativeSource={RelativeSource Self}}"/>
   

Keyboard Navigation

You can use arrow keys to navigate between column names in the Column Chooser. Press the Space key to select/clear the focused column’s checkbox and show/hide columns in the Data Grid.