This is a migrated thread and some comments may be shown as answers.

How to implement DropDown arrow for item with Children for RadMenu

2 Answers 126 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Khourshed Yakubov
Top achievements
Rank 1
Khourshed Yakubov asked on 27 Jun 2010, 12:26 AM
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 Answers, 1 is accepted

Sort by
0
Khourshed Yakubov
Top achievements
Rank 1
answered on 29 Jun 2010, 05:04 AM
 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
0
Kamen Bundev
Telerik team
answered on 01 Jul 2010, 09:29 AM
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
Tags
Menu
Asked by
Khourshed Yakubov
Top achievements
Rank 1
Answers by
Khourshed Yakubov
Top achievements
Rank 1
Kamen Bundev
Telerik team
Share this question
or