Skip to main content

Column Chooser

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:

Column Chooser

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:

WPF Standalone Column Chooser

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:

    Remove a Column Chooser from the Context Menu

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

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