Question

I am having a problem displaying the context menu RadContextMenu with Icon, I am using dynamic binding to observable collection, which contains context menu items (Text and Icon), I am following this tutorial “Dynamic Binding“, following is my XAML

<!-- Context Menu Resources Start-->
    <Style x:Key="MenuItemStyle" TargetType="{x:Type telerik:RadMenuItem}">
            <Setter Property="Icon">
                <Setter.Value>
                    <Image Source="{Binding IconPath, Converter={StaticResource pathtoimage}}" />
                </Setter.Value>
            </Setter>
        </Style>

        <HierarchicalDataTemplate x:Key="MenuItemTemplate">
            <telerik:RadButton Content="{Binding Title}" HorizontalContentAlignment="Left" Background="Transparent" BorderBrush="Transparent" />
        </HierarchicalDataTemplate>

<!-- Context Menu Resources End -->

and following is the XAML of RadGridView, on which context menu is placed.

<telerik:RadGridView x:Name="myGridView" AutoGenerateColumns="False" ItemsSource="{Binding GridData}" VerticalAlignment="Top">
        <telerik:RadGridView.Columns>
            <telerik:GridViewDataColumn DataMemberBinding="{Binding Result}" Header="Result"/>
            <telerik:GridViewDataColumn DataMemberBinding="{Binding Category}" Header="Category"/>
        </telerik:RadGridView.Columns>
        <telerik:RadContextMenu.ContextMenu>
            <telerik:RadContextMenu ItemsSource="{Binding ContextMenuItems}" ItemContainerStyle="{StaticResource MenuItemStyle}" ItemTemplate="{StaticResource MenuItemTemplate}">                 
            </telerik:RadContextMenu>

View Model is as follows

class MainViewModel
{
    private ObservableCollection<MenuItemObj> menuitems_;
    public ObservableCollection<MenuItemObj> ContextMenuItems
    {
        get
        {
            return menuitems_;
        }
        set
        {
            menuitems_ = value;
        }
    }

    private ObservableCollection<GridRowDataObj> griddata_;
    public ObservableCollection<GridRowDataObj> GridData
    {
        get
        {
            return griddata_;
        }
        set
        {
            griddata_ = value;
        }
    }
}

public class MenuItemObj
{
    public string Title { get; set; }
    public string IconPath { get; set; }
}

public class GridRowDataObj
{
    public string Result { set; get; }
    public string Category { set; get; }
}

and setting DataContext as

//TODO
        ObservableCollection<GridRowDataObj> gd = new ObservableCollection<GridRowDataObj>();
        gd.Add(new GridRowDataObj() { Result = "Primary School", Category = "SSC" });
        gd.Add(new GridRowDataObj() { Result = "Higher School", Category = "HSSC" });
        gd.Add(new GridRowDataObj() { Result = "Higher School", Category = "HSSC" });

        //TODO
        ObservableCollection<MenuItemObj> mi = new ObservableCollection<MenuItemObj>();
        mi.Add(new MenuItemObj() { Title = "My Item 1", IconPath = "/Images/item1.png" });
        mi.Add(new MenuItemObj() { Title = "My Item 2", IconPath = "/Images/item2.png" });
        mi.Add(new MenuItemObj() { Title = "My Item 3", IconPath = "/Images/item3.png" });

        MainViewModel mvm = new MainViewModel();
        mvm.ContextMenuItems = mi;
        mvm.GridData = gd;

        this.DataContext = mvm;

But when I run the code, this is what I get

I am not sure why the icons for first and second menu items are not displayed, I have checked that the icon is displayed for last menu item only. I have complete project replicating this scenario, if any one need it he/she can ask for?, Please help me out?

Answer 1

I posted the question on Telerik support forum and got a working solution here,

RadContextMenu icon issue