Arrow Image disappeared while adding ItemTemplate for RadMenuItem

3 posts, 0 answers
  1. Nish
    Nish avatar
    5 posts
    Member since:
    Jun 2012

    Posted 16 Feb 2012 Link to this post

    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 
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 21 Feb 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Nish
    Nish avatar
    5 posts
    Member since:
    Jun 2012

    Posted 21 Feb 2012 Link to this post

    Thanks Kate. Your solution worked. :)
Back to Top