Edit this page

Binding to Dynamic Data

The data displayed in the RadContextMenu has a hierarchical structure (similar to the RadTreeView). This means that each item may come with a set of items on its own. For that reason you have to use the ItemContainerStyle. This tutorial will walk you through the most important steps in creating, configuring and applying ItemContainerStyle to your RadContextMenu.

Preparing the Data

For this tutorial the following sample class will be used:

public class MenuItem
{
    public MenuItem()
    {
        this.SubItems = new ObservableCollection<MenuItem>();
    }
    public string Text
    {
        get;
        set;
    }
    public Uri IconUrl
    {
        get;
        set;
    }
    public bool IsSeparator
    {
        get;
        set;
    }
    public ICommand Command
    {
        get;
        set;
    }
    public ObservableCollection<MenuItem> SubItems
    {
        get;
        set;
    }
}
Public Class MenuItem
    Public Sub New()
        Me.SubItems = New ObservableCollection(Of MenuItem)()
    End Sub
    Public Property Text() As String
    Public Property IconUrl() As Uri
    Public Property IsSeparator() As Boolean
    Public Property Command() As ICommand
    Public Property SubItems() As ObservableCollection(Of MenuItem)
End Class

The MenuItem class holds the information for the menu items.

  • Text - represents the text value for the item.

  • IconUrl - represents the url of the image that represents the icon of the menu item.

  • SubItems - a collection of the sub menu items of the current menu item.

  • IsSeparator - indicates whether the item is a separator.

To learn more about the separator items and the RadMenuItems, please take a look at the RadMenu help content.

Next, a sample method is needed, which creates the sample data. Here is one:

public ObservableCollection<MenuItem> GetMenuItems()
{
    ObservableCollection<MenuItem> items = new ObservableCollection<MenuItem>();
    MenuItem copyItem = new MenuItem()
    {
        IconUrl = new Uri("Images/copy.png", UriKind.Relative),
        Text = "Copy",
    };
    items.Add(copyItem);
    MenuItem pasteItem = new MenuItem()
    {
        IconUrl = new Uri("Images/paste.png", UriKind.Relative),
        Text = "Paste",
    };
    items.Add(pasteItem);
    MenuItem cutItem = new MenuItem()
    {
        IconUrl = new Uri("Images/cut.png", UriKind.Relative),
        Text = "Cut",
    };
    items.Add(cutItem);
    MenuItem separatorItem = new MenuItem()
    {
        IsSeparator = true
    };
    items.Add(separatorItem);
    MenuItem selectAllItem = new MenuItem()
    {
        Text = "Select All"
    };
    items.Add(selectAllItem);

    return items;
}
Public Function GetMenuItems() As ObservableCollection(Of MenuItem)
    Dim items As New ObservableCollection(Of MenuItem)()
    Dim copyItem As New MenuItem() With {.IconUrl = New Uri("Images/copy.png", UriKind.Relative), .Text = "Copy"}
    items.Add(copyItem)
    Dim pasteItem As New MenuItem() With {.IconUrl = New Uri("Images/paste.png", UriKind.Relative), .Text = "Paste"}
    items.Add(pasteItem)
    Dim cutItem As New MenuItem() With {.IconUrl = New Uri("Images/cut.png", UriKind.Relative), .Text = "Cut"}
    items.Add(cutItem)
    Dim separatorItem As New MenuItem() With {.IsSeparator = True}
    items.Add(separatorItem)
    Dim selectAllItem As New MenuItem() With {.Text = "Select All"}
    items.Add(selectAllItem)

    Return items
End Function

Finally, pass the generated collection to the DataContext.

public Default_Cs()
{
    InitializeComponent();
    this.radContextMenu.ItemsSource = this.GetMenuItems();
}
Public Sub New()
    InitializeComponent()
    Me.radContextMenu.ItemsSource = Me.GetMenuItems()
End Sub

Creating and Applying the ItemContainerStyle

In order to visualize the data in the RadContextMenu control you have to use a ItemContainerStyle. Here is a sample Style that will be used to visualize the data in the RadContextMenu control.

<Style x:Key="MenuItemContainer" TargetType="telerik:RadMenuItem">
    <Setter Property="Icon" Value="{Binding IconUrl}"/>
    <Setter Property="IconTemplate">
        <Setter.Value>
            <DataTemplate>
                <Image Source="{Binding}" Stretch="None"/>
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="IsSeparator" Value="{Binding IsSeparator}"/>
    <Setter Property="Header" Value="{Binding Text}"/>
    <Setter Property="ItemsSource" Value="{Binding SubItems}"/>
    <Setter Property="Command" Value="{Binding Command}"/>
</Style>

When setting the ItemTemplate or ItemContainerStyle properties of the RadContextMenu, they will get inherited in the hierarchy, unless they are not explicitly set.

In order to use the created style with RadContextMenu control, you have to set its ItemContainerStyle property.

<TextBox Width="200" VerticalAlignment="Center" ContextMenu="{x:Null}" >
    <telerik:RadContextMenu.ContextMenu>
        <telerik:RadContextMenu x:Name="radContextMenu"
                        ItemsSource="{Binding}"
                        ItemContainerStyle="{StaticResource MenuItemContainer}" />
    </telerik:RadContextMenu.ContextMenu>
</TextBox>

Here is a snapshot of the result.

See Also