How to implement DropDown arrow for item with Children for RadMenu

[Khourshed Yakubov]

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: 

http://www.telerik.com/community/forums/aspnet-ajax/menu/arrow-indicating-children-for-submenu.aspx

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.

[Khourshed Yakubov]

 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

[Kamen Bundev]

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