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 
    public Uri IconUrl 
    public bool IsSeparator 
    public ICommand Command 
    public ObservableCollection<MenuItem> SubItems 
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", 
    MenuItem pasteItem = new MenuItem() 
        IconUrl = new Uri("Images/paste.png", UriKind.Relative), 
        Text = "Paste", 
    MenuItem cutItem = new MenuItem() 
        IconUrl = new Uri("Images/cut.png", UriKind.Relative), 
        Text = "Cut", 
    MenuItem separatorItem = new MenuItem() 
        IsSeparator = true 
    MenuItem selectAllItem = new MenuItem() 
        Text = "Select All" 
    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"} 
    Dim pasteItem As New MenuItem() With {.IconUrl = New Uri("Images/paste.png", UriKind.Relative), .Text = "Paste"} 
    Dim cutItem As New MenuItem() With {.IconUrl = New Uri("Images/cut.png", UriKind.Relative), .Text = "Cut"} 
    Dim separatorItem As New MenuItem() With {.IsSeparator = True} 
    Dim selectAllItem As New MenuItem() With {.Text = "Select All"} 
    Return items 
End Function 

Finally, pass the generated collection to the DataContext.

public Default_Cs() 
    this.radContextMenu.ItemsSource = this.GetMenuItems(); 
Public Sub New() 
    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"> 
                <Image Source="{Binding}" Stretch="None"/> 
    <Setter Property="IsSeparator" Value="{Binding IsSeparator}"/> 
    <Setter Property="Header" Value="{Binding Text}"/> 
    <Setter Property="ItemsSource" Value="{Binding SubItems}"/> 
    <Setter Property="Command" Value="{Binding Command}"/> 

If you use NoXaml assemblies, set the BasedOn property to the Style. BasedOn="{StaticResource RadMenuItemStyle}"

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 x:Name="radContextMenu" 
                        ItemContainerStyle="{StaticResource MenuItemContainer}" /> 
Here is a snapshot of the result.

See Also

In this article
Not finding the help you need? Improve this article