[Solved] Context Menu on a Group Row

[Voss Grose]

Is it possible and if so can you provide a code snippet of how to attach a ContectMenu to a Group Row when clicked?

[Rossen Hristov]

Hi Voss Grose,

Please, check out the blog post from my colleague Vladimir Enchev which discusses how to attach a context menu to the header row. The difference will be that in the RowLoaded method you should be searching for a GridViewGroupRow instead of GridViewHeader row. The rest should be basically the same.

Please, let me know if you have trouble adapting the sample project to best match your needs.

Best wishes,
Ross
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Rossen Hristov]

Hi Voss Grose,

Please excuse me, but the solution I have proposed will not work since the GridViewGroupRow is not a GridViewRow and it will never enter the method I mentioned. Disregard my previous post.

It seems that the only way to attach a context menu to the GridViewGroupRow would be to modify its template by using MS Expression Blend and in the new template attach a context menu. Once again I would like to apologize for misleading you.

Greetings,
Ross
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Voss Grose]

Ross,
Do you have an example of a template I could use?
Or will a update be included in a future release to make this work?

Thanks,
Voss.

[Rossen Hristov]

Hello Voss Grose,

I have prepared a small sample project and attached it. The basic idea is that I have redefined the template for the GridViewGroupRow and attached a context menu to the expander.

My inspiration came from the Context Menu for grid rows and Context Menu for header cells.

Here is the key:

<UserControl x:Class="GroupRowContextMenu.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"
    xmlns:GridView="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView"
    xmlns:Data="clr-namespace:Telerik.Windows.Data;assembly=Telerik.Windows.Data"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
    <UserControl.Resources>
        <ControlTemplate x:Key="GridViewGroupRowTemplate1" TargetType="GridView:GridViewGroupRow">
            <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                  Background="{TemplateBinding Background}">
                <GridView:GridViewExpander x:Name="PART_GroupExpander"
                                           RowIndicatorVisibility="{TemplateBinding RowIndicatorVisibility}"
                                           Grid.Column="1"
                                           ExpandDirection="Down"
                                           Loaded="OnLoaded"
                                           Header="{TemplateBinding Header}">
                    <GridView:GroupVirtualizingPanel x:Name="PART_GridViewVirtualizingPanel"/>
                </GridView:GridViewExpander>
            </Grid>
        </ControlTemplate>
        <Style TargetType="GridView:GridViewGroupRow" x:Key="GroupRowStyle1">
            <Setter Property="Template" Value="{StaticResource GridViewGroupRowTemplate1}" />
        </Style>
    </UserControl.Resources>
    <Grid>
        <telerik:RadGridView Name="playersGrid"
                             Grid.Row="1"
                             AutoGenerateColumns="False"
                             ColumnsWidthMode="Auto"
                             GroupRowStyle="{StaticResource GroupRowStyle1}"
                             AutoExpandGroups="True">
            <telerik:RadGridView.GroupDescriptors>
                <Data:GroupDescriptor Member="Country"/>
            </telerik:RadGridView.GroupDescriptors>
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn Header="Name" DataMemberBinding="{Binding Name}">
                </telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn Header="Number" DataMemberBinding="{Binding Number}">
                </telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn Header="Position" DataMemberBinding="{Binding Position}">
                </telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn Header="Country" DataMemberBinding="{Binding Country}">
                </telerik:GridViewDataColumn>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
    </Grid>
</UserControl>

And in the OnLoaded event handler I attach the context menu:

        private void OnLoaded(object sender, RoutedEventArgs e)
        {
            var rowContextMenu = new RadContextMenu(); // create menu
            StyleManager.SetTheme(rowContextMenu, StyleManager.GetTheme(this.playersGrid)); // set menu Theme

            // create menu items
            rowContextMenu.Items.Add(new RadMenuItem() {Header = "One"});
            rowContextMenu.Items.Add(new RadMenuItem() {Header = "Two"});
            rowContextMenu.Items.Add(new RadMenuItem() {Header = "Three"});

            // add menu events
            rowContextMenu.AddHandler(RadMenuItem.ClickEvent, new RoutedEventHandler(this.OnMenuItemClick));
            rowContextMenu.Opened += new RoutedEventHandler(this.OnMenuOpened);

            // attach menu
            var expander = sender as GridViewExpander;
            RadContextMenu.SetContextMenu(expander, rowContextMenu);
        }

You can see the full source in the attached project.

Please, let me know if this does not help.

Greetings,
Ross
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Voss Grose]

Ross,

The context menu appears for the Group Rows (which is great), but it shows up for all child rows as well.

Any ideas of how to make it appear for the Group Rows only?

Thanks for your help.
Voss.

[Rossen Hristov]

Hello Voss Grose,

Unfortunately that is not so easy, but I have found a workaround. It is not perfect but here it is:

                <GridView:GridViewExpander x:Name="PART_GroupExpander"
                                           RowIndicatorVisibility="{TemplateBinding RowIndicatorVisibility}"
                                           Grid.Column="1"
                                           ExpandDirection="Down">
                    <GridView:GridViewExpander.Header>
                        <Border Background="Transparent"
                                Width="2000"
                                Loaded="OnLoaded">
                            <ContentControl Content="{TemplateBinding Header}"/>
                        </Border>
                    </GridView:GridViewExpander.Header>
                    <GridView:GroupVirtualizingPanel x:Name="PART_GridViewVirtualizingPanel"/>
                </GridView:GridViewExpander>

The width is something big so that the context menu would be active along the whole horizontal distance. Otherwise it would work only over the text (ContentControl). That is a hack, but it should do.

The other alternative is to replace the whole template for the GridViewExpander control which is much more complicated. I hope this helps.

Sincerely yours,
Ross
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Voss Grose]

Ross,

That way ends up breaking my other code like this snippet on the MenuItemClick.
And the formatting is gone as well.

GroupRecord

 

gr = (GroupRecord)((GridViewExpander)menu.UIElement).DataContext;

 

[Rossen Hristov]

Hi Voss Grose,

Please replace GridViewExpander with FrameworkElement. I have forgotten to update that and I have moved the context menu from the expander to its header, that is why the menu.UIElement could not be cast to expander:

            GroupRecord gr = (GroupRecord)((FrameworkElement)menu.UIElement).DataContext;


Sincerely yours,
Ross
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Voss Grose]

Ross,

One last thing and it looks like this will work:

I had this:

<

 

gridView:GridViewExpander x:Name ="PART_GroupExpander" Header="{Binding Path=Header, Converter={StaticResource MyDateConverter}}"  IsTabStop="False" Grid.Column="1" ExpandDirection="Down" RowIndicatorVisibility="Collapsed">

But since I had to move the header section how do I apply the Converter={StaticResource MyDateConverter} piece in the new code?

Thanks for the help.

Voss.

 

[Rossen Hristov]

Hi Voss Grose,

Do it with a Binding instead of a TemplateBinding, since TemplateBindings do not have converters in Silverlight. Here it is:

        <local:DummyConverter x:Key="dummyConverter"/>
        <ControlTemplate x:Key="GridViewGroupRowTemplate1" TargetType="GridView:GridViewGroupRow">
            <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                  Background="{TemplateBinding Background}">
                <GridView:GridViewExpander x:Name="PART_GroupExpander"
                                           RowIndicatorVisibility="{TemplateBinding RowIndicatorVisibility}"
                                           Grid.Column="1"
                                           ExpandDirection="Down">
                    <GridView:GridViewExpander.Header>
                        <Border Background="Transparent"
                                Width="2000"
                                Loaded="OnLoaded">
                            <ContentControl Content="{Binding Header, Converter={StaticResource dummyConverter}}"/>
                        </Border>
                    </GridView:GridViewExpander.Header>
                    <GridView:GroupVirtualizingPanel x:Name="PART_GridViewVirtualizingPanel"/>
                </GridView:GridViewExpander>
            </Grid>
        </ControlTemplate>

I have attached the whole project.

Sincerely yours,
Ross
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Voss Grose]

Ross,
Sorry to bother you again on this.

But I'm trying to figure out how to retrieve the Child rows of the Group(GridViewExpander) that the menu was clicked on.

Basically below is what I have:

private void OnMenuItemClick(object sender, RoutedEventArgs e)
 {
            RadContextMenu menu = (RadContextMenu)sender;
            RadMenuItem clickedItem = ((RadRoutedEventArgs)e).OriginalSource as RadMenuItem;
            GroupRecord gr = (GroupRecord)((FrameworkElement)menu.UIElement).DataContext;
}
Thanks,
Voss.

[Rossen Hristov]

Hi Voss Grose,

Here is how you can get the data and the actual rows:

        private void OnMenuItemClick(object sender, RoutedEventArgs e)
        {
            RadContextMenu menu = (RadContextMenu)sender;
            RadMenuItem clickedItem = ((RadRoutedEventArgs)e).OriginalSource as RadMenuItem;
            GroupRecord gr = (GroupRecord)((FrameworkElement)menu.UIElement).DataContext;

            // Data records
            StringBuilder sb  = new StringBuilder();
            foreach (Record record in gr.Records)
            {
                var dataRecord = record as DataRecord;
                if (dataRecord != null)
                {
                    sb.Append(dataRecord.Data.ToString());
                    sb.AppendLine();
                }
            }
            MessageBox.Show(sb.ToString());

            // UI elements
            GridViewGroupRow groupRow = (GridViewGroupRow)this.playersGrid.ItemsControl.ItemsGenerator.ContainerFromItem(gr);
            sb = new StringBuilder();
            foreach (GridViewRow row in groupRow.ChildrenOfType<GridViewRow>())
            {
                sb.Append("I am the row holding " + row.DataItem);
                sb.AppendLine();
            }
            MessageBox.Show(sb.ToString());
       }

I have attached the modified project.

Sincerely yours,
Ross
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.