Changing column visibility in a context menu

[Chris Ryder]

Hi,

I'm trying to display a standard context menu on a RadGridView that lists the columns that are contained within the grid.  The purpose of this is so that I can have a checkbox on the menu item that controls/changes the visibility of the column on the grid.  I've seen the article (http://www.telerik.com/help/wpf/radgridview-how-to-show-hide-columns-outside-of-the-radgridview.html) that shows how to dynamically populate a listbox with checkboxes using XAML and bindings - this is close to what I want.

I've tried to add the context menu directly to the RadGridView using the following XAML but had no luck so far:

<telerik:RadGridView HorizontalAlignment="Left" Margin="15" Name="radGridView1" VerticalAlignment="Top" AutoGenerateColumns="False"
                                 ItemsSource="{Binding ElementName=TheContext, Path=TestModels}">
                <telerik:RadGridView.Columns>
                    <telerik:GridViewDataColumn Header="AA" DataMemberBinding="{Binding Path=AA}" />
                    <telerik:GridViewDataColumn Header="BB" DataMemberBinding="{Binding Path=BB}" />
                </telerik:RadGridView.Columns>
                <telerik:RadGridView.ContextMenu>
                    <ContextMenu>
                        <MenuItem Header="Columns" ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=telerik:RadGridView, AncestorLevel=1}, Path=Columns, Mode=TwoWay}">
                            <MenuItem.ItemTemplate>
                                <HierarchicalDataTemplate>
                                    <MenuItem Header="Binding Header, Mode=TwoWay}" IsCheckable="True" IsChecked="{Binding IsVisible, Mode=TwoWay}"/>
                                </HierarchicalDataTemplate>
                            </MenuItem.ItemTemplate>
                        </MenuItem>
                    </ContextMenu>
                </telerik:RadGridView.ContextMenu>
            </telerik:RadGridView>

In the Output window I can see I get the following error message: System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='Telerik.Windows.Controls.RadGridView', AncestorLevel='1''. BindingExpression:Path=Columns; DataItem=null; target element is 'MenuItem' (Name=''); target property is 'ItemsSource' (type 'IEnumerable')

I thought perhaps I should try creating a context menu on something other than the RadGridView I've tried adding a context menu to a label that's outside of the RadGridView just to test things out but so far have called no joy.  The XAML I was using for this was:

<Label>
                <Label.Content>I'm a label but right click me...</Label.Content>
                <Label.ContextMenu>
                    <ContextMenu Name="MainCollection">
                        <MenuItem Header="Columns">
                            <MenuItem ItemsSource="{Binding ElementName=radGridView1, Path=Columns, Mode=TwoWay}">
                                <MenuItem.ItemTemplate>
                                    <HierarchicalDataTemplate>
                                        <MenuItem Header="Binding Header, Mode=TwoWay}" IsCheckable="True" IsChecked="{Binding IsVisible, Mode=TwoWay}"/>
                                    </HierarchicalDataTemplate>
                                </MenuItem.ItemTemplate>
                            </MenuItem>
                        </MenuItem>
                    </ContextMenu>
                </Label.ContextMenu>
            </Label>

From the output window I get the following error message "System.Windows.Data Error: 4 : Cannot find source for binding with reference 'ElementName=radGridView1'. BindingExpression:Path=Columns; DataItem=null; target element is 'MenuItem' (Name=''); target property is 'ItemsSource' (type 'IEnumerable')"

Any ideas welcome,
Chris.

[Yavor Georgiev]

Hello Chris Ryder,

 Because the context menu system in WPF uses Popup to display itself, it does not quite share the same airspace with the rest of the controls in the window. You can verify this behavior by setting a breakpoint when the context menu is displayed and invoking the WPF Tree Visualizer debug tool within Visual Studio.

The solution is to handle the context menu's Opened event and set its ItemsSource manually. I'm attaching a sample solution that shows how this is done with a RadContextMenu.

All the best,
Yavor Georgiev
the Telerik team

[Chris Ryder]

Hi Yavor,

Thank you for your reply - it's a shame it can't all be handled in XAML.

Thanks for the tip & explanation,
Chris.

[Charlie M.]

If possible, I would like to extend this question. Using the same situation that Chris started with, being able to create a context menu on the fly using the example given with the GridView, how would you do the same thing with column headers that are just an image. I keep running into a problem using the sample code in which I get an error of :

Specified element is alread the logical child of another element. Disconnect it first.

After some work, I was able to adjust the example code as follows:


Style sytelColHeader = new Style()
Setter setterIsCheckable = new Setter {Property = RadMenuItem.IsCheckableProperty, Value = true };
Setter setterIsChecked = new Setter();
Setter setterHeader = new Setter();

Binding isCheckedBinding = new Binding("IsVisible");
isCheckedBinding.Mode = BindingMode.TwoWay;

Binding columHeader = new Binding("Header");
columHeader.Mode = BindingMode.TwoWay;

setterHeader.Property = radMenutItem.HeaderProperty;
setterHeader.Value = columnHeader;

setterIsChecked.Property = RadMenuItem.isCheckedProperty;
setterIsChecked.Value = isCheckedBinding;

styleColumnHeaderMenu.Setters.Add(setterIsChecked);
styleColumnHeaderMenu.Setters.Add(setterIsCheckable);
styleColumnHeaderMenu.Setters.Add(setterHeader);

radMenuItem item = new RadMenuItem();
item.Header = "Choose Columns:";
item.ItemsSource = grid.Columns;
item.itemsContainerStyle = styleColumnHeaderMenu;
menu.Items.Add(item);


Since my grid has image columns defined, as well as the somewhat working modification I have above, things are tied together between the context menu and the grid. Any suggestions would be great.

[Yavor Georgiev]

Hello Charlie M.,

 If you're placing an Image in the column header, it's not possible to display it in the context menu as well, because a UI element cannot exist in two places simultaneously. You will have to somehow create two images and bind them to the same source or something along those lines.

Kind regards,
Yavor Georgiev
the Telerik team

[Charlie M.]

Thank you for the update.

For anyone else interested, to solve our problem, we ended up creating a copy of the image found in the HeaderCell and applied that to our submenu. Then used the rest of the code found in the example to bind to the column visibility.

[Ivan]

Hello Yavor,

is it possible to remove/set invisible one or some 'ContextMenu-Item' after binding the columns of RadGridView?

I have tried that code, got exception.

private void RadContextMenu_Opened(object sender, RoutedEventArgs e)
{
  var menu = sender as RadContextMenu;
  menu.Items.RemoveAt(0);
}

Operation is not valid while using the "ItemsSource". Instead, use "ItemsControl.ItemsSource" to access elements and to change it.

Any idea? Thanks

Ivan

[Yoan]

Hello Ivan,

You can achieve the desired result by using the ItemContainerStyleSelector of RadContextMenu. I have prepared a sample project which demonstrates the approach.


Regards,
Yoan
Telerik

[Ivan]

Hello Yoan,

thanks for your answer. I have not seen your project. Is that being preparing, or have you forget to attach ;)

Regards,
Ivan

[Yoan]

Hello Ivan,

I have attached the sample project again.

Regards,
Yoan
Telerik

[Ivan]

Hello Yoan,

thanks a lot. That helps me.

Regards,
Ivan