Show/Hide Columns outside of RadGridView

This topic will show you how to choose which columns to be visible from outside of RadGridView.

There are several options available:

• using ListBox outside RadGridView

• through ControlPanel

• defining Header Context Menu

ListBox Outside RadGridView

The example will represent a ListBox and RadGridView. The ListBox will list the available columns for RadGridView and each of the items in this list will have a check box for determining the visibility of the column.

Here are the definitions of the controls.

XAML

	<Grid Background="White">
	    <Grid.ColumnDefinitions>
	        <ColumnDefinition Width="150"/>
	        <ColumnDefinition Width="*"/>
	    </Grid.ColumnDefinitions>
	    <ListBox />
	    <telerik:RadGridView Grid.Column="1"
	                 Margin="10,0,0,0" />
	</Grid>

Next bind the ListBox.ItemsSource to RadGridView.Columns collection via Element Binding.

XAML

	<Grid Background="White">
	    <Grid.ColumnDefinitions>
	        <ColumnDefinition Width="150"/>
	        <ColumnDefinition Width="*"/>
	    </Grid.ColumnDefinitions>
	    <ListBox ItemsSource="{Binding Columns, ElementName=radGridView}" />
	    <telerik:RadGridView x:Name="radGridView"
	                 Grid.Column="1" 
	                 Margin="10,0,0,0" />
	</Grid>

After that define DataTemplate for ItemTemplate property of the ListBox. It should include a CheckBox and you can bind its IsChecked property to column.IsVisible property using TwoWay Data Binding.

XAML

	<Grid Background="White">
	    <Grid.ColumnDefinitions>
	        <ColumnDefinition Width="150"/>
	        <ColumnDefinition Width="*"/>
	    </Grid.ColumnDefinitions>
	    <ListBox ItemsSource="{Binding Columns, ElementName=radGridView2}">
	        <ListBox.ItemTemplate>
	            <DataTemplate>
	                <CheckBox Content="{Binding Header}"
	                  IsChecked="{Binding IsVisible, Mode=TwoWay}" />
	            </DataTemplate>
	        </ListBox.ItemTemplate>
	    </ListBox>
	    <telerik:RadGridView x:Name="radGridView2"
	                 Grid.Column="1" 
	                 Margin="10,0,0,0" />
	</Grid>

Provide RadGridView with an appropriate data source and run your application. The result should be similar to this snapshot:

ou can download a runnable project of the previous example from our online SDK repository: ColumnChooser.