Arrow Image disappeared while adding ItemTemplate for RadMenuItem

[Nish]

Telerik Team,

My requirement is to dynamically bind a RadMenu inside the RadPanelBar. I am able to achieve this, but the problem here is if I am trying to create the ItemTemplate for each RadMenuItem inside the RadMenu then the arrow image is getting disappeared if a menu item has submenu items. It will be great if you can suggest me how I can achieve this. I have attached the sample code snippets as well as the screenshot.

Thanks,
Nish 

[Kate]

Hi Nish,

In general when you use an ItemTemplate there is a div tag that renders on the page in contrast to the case when using a simple MenuItem when a link tag is rendered instead. Thus, due to the styles that are applied to the div tag (when using an ItemTemplate and not to the link tag that normally renders when using a menu Item) you get neither the hover effect not the arrow image. However, if you need to apply the arrow image anyway, you can simply assign a css class to the menu item and set a background image and position. For instance you can apply the following class (I also attached the sprite image that is used for the RadMenu):

<style type="text/css">
        .new
        {
            /* background-color: Red !important;*/
             background-image: url("../Menu/Menu/rmSprite.png") !important;
             background-position: 100% -217px !important;
        }

        .new:hover
        {
            background-image: url("../Menu/Menu/rmSprite.png") !important;
             background-position: 100% -313px !important;
        }

    </style>

markup:

<telerik:RadMenu runat="server" ID="menu1" Flow="Vertical">
            <Items>
                <telerik:RadMenuItem Text="item1" CssClass="new">
                    <ItemTemplate>
                        <asp:Label runat="server" ID="label1" Text="labeel1"></asp:Label>
                    </ItemTemplate>
                    <Items>
                        <telerik:RadMenuItem Text="item1">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="item1">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="item1">
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="item1">
                    <Items>
                        <telerik:RadMenuItem Text="item1">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="item1">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="item1">
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="item1">
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenu>

Regards,
Kate
the Telerik team

[Nish]

Thanks Kate. Your solution worked. :)