How to implement DropDown arrow for item with Children for RadMenu

3 posts, 0 answers
  1. Khourshed Yakubov
    Khourshed Yakubov avatar
    6 posts
    Member since:
    Oct 2009

    Posted 26 Jun 2010 Link to this post

    Hi!
    I am trying to assess telerik components in my project, moving from your competitor.
    I am trying to replace menu with radmenu.
    I successfully created new Skin, based on Simple skin and trying to add "dropdown arrow feature" for root menu items which have child items.
    I have read documentation and forum. For example this topic: 

    But unfortunately couldn't find solution. It seems it is impossible.
    I tried to change css styles for rmExpandDown selector, but failed to do anything.

    Could anybody help me with this problem. Please show example how to do this using "Simple" skin.
  2. Khourshed Yakubov
    Khourshed Yakubov avatar
    6 posts
    Member since:
    Oct 2009

    Posted 29 Jun 2010 Link to this post

     protected void RadMenu1_ItemDataBound(object sender, Telerik.Web.UI.RadMenuEventArgs e) 
        { 
            SiteMapNode d = (SiteMapNode)e.Item.DataItem; 
            if (d.ChildNodes.Count > 0 && e.Item.Level==0) 
            { 
                e.Item.Text += "<span class=\"DropDown\">▼</span>";  
            } 
     
        } 

    .DropDown 
            font-size:6pt;  
            margin-left:5px
    It is not so good as skin
    But it anyway interesting, how to achive the same result using skin
  3. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 01 Jul 2010 Link to this post

    Hello Khourshed,

    Currently there's no easy way to add expand arrows to root items since the same element is used for hover and selected state backgrounds. One way to do that is yours, another is to add an element on javascript pageLoad() event:
    function pageLoad() {
        var $ = $telerik.$;
        
        $('.rmRootGroup .rmExpandDown').append($('<b class="rmRootExpandImage">&nbsp;&nbsp;&nbsp;</b>'));
    }


    and style it with this CSS:
    div.RadMenu_Vista .rmRootGroup .rmRootExpandImage
    {
        background: transparent url('images/rootMenuItemArrow.png') 0 -18px;
        width: 9px;
        height: 14px;
        display: inline;
        vertical-align: middle;
    }
    div.RadMenu_Vista .rmRootGroup .rmLink:hover .rmRootExpandImage,
    div.RadMenu_Vista .rmRootGroup .rmFocused .rmRootExpandImage,
    div.RadMenu_Vista .rmRootGroup .rmExpanded .rmRootExpandImage
    {
        background-position: -9px -18px;
    }


    You can also combine both methods and add this element on the server-side and again style it with the CSS above.

    All the best,
    Kamen Bundev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top