Question

I know this has been asked countless times before, and they all seem to be resolved by this approach, Although I can’t seem to get it to work for my situation.

I’m moving away from CSSFriendly as it is not supported in .net 4 (unless I render it as 3.5), and I’m close to mimicing the functionality using the default CSS styling, although I’m stuck on one issue – Parent selected.

I’ve read a few solutions on SO and .net forums, although I still can’t get it to work for my situation, here is my predicment:

I have an asp.net 4 Menu in a masterpage together with a SiteMapDataSource which loads from a site map. When clicking on the child node, I want its parents CSS to change as well.

Here is a simplified version of my sitemap

<siteMapNode Parent - hidden/no url>
   <siteMapNode Home - url="~/" >
   <siteMapNode Item - no url >
       <siteMapNode Item-child1 - url = "~/child"/>
       <siteMapNode Item-child2 - url = "~/child2"/>
   </siteMapNode>
</siteMapNode>

All the CSS styling works fine, however I have a horizontal menu which before the ul li css would change as the CSS attribute was “selected”. However now, the .net 4 implementation only selects the menu item you select.

I’ve tried to manually select the parent on the MenuItemDataBound hook, although this does 2 things:

1. Applys “selected” to the ‘a’ tag (I need to style the ul li)

2. Deselects the sub menu item (I can’t have both items selected)

Heres the CSS:

.elfabMenu{position:relative;}
.elfabMenu ul li a.popout{padding:0px !important; background-image:none !important;}
.elfabMenu ul{display:block;width:961px!important;margin:0;padding:0}
.elfabMenu ul li{font-family:Arial,Helvetica,sans-serif;font-size:13.5px;background:url(../images/menu_sep.png) no-repeat scroll left bottom transparent;text-decoration:none;color:#000;line-height:38px;padding:10px 23px 0}
.elfabMenu ul li li{background-image:none!important;width:230px;border-bottom:1px solid #000;border-top:1px solid #121212;padding:0;background-color:#0E0E0E;color:#ffffff}
.elfabMenu ul li li a{color:#ffffff; padding:5px 0 5px 15px}
.elfabMenu ul li li:hover{background-color:#000!important}
.elfabMenu ul li li a.selected{background-color:#000!important}
.elfabMenu ul li a.selected{background-image:none!important}
.elfabMenu ul li li.has-popup{background:url(../images/primary-menu-current-children.gif) no-repeat scroll 210px 20px #0E0E0E !important}
.elfabMenu ul li ul li ul.level3 {margin-top:-1px!important}

Heres the databound method:

void ElfabMenu_MenuItemDataBound(object sender, MenuEventArgs e)
{
  if (SiteMap.CurrentNode != null)
  {
    if (e.Item.Selected == true)
    {
      e.Item.Selected = true;
      e.Item.Parent.Selectable = true;
      e.Item.Parent.Selected = true;
    }
   }
}

Hopefully I’m just overlooking something here, but its driving me mad! Would very much appretiate someones help.

Cheers,

Rocky

Update
By design the ASP.net menu can only have one menuitem selected at a time. This is always applied to the <a> tag of the menuitem list. I’ve changed the menu to incorporate this design, and decided that having the menu parent node selected and not its children is good enough, as I looks like a javascript/page rendering hack is required.

Instead what I do is find the current selected node, use recursion to find the parent and select it. Heres the code for anyone wanting to do the same:

protected void ElfabMenu_MenuItemDataBound(object sender, MenuEventArgs e)
{
    if (SiteMap.CurrentNode != null)
    {
        if (e.Item.Selected)
        {
            MenuItem parent = MenuParent_Recursion(e.Item);
            parent.Selectable = true;
            parent.Selected = true;
        }
    }
}

static MenuItem MenuParent_Recursion(MenuItem item)
{
    if (item.Parent == null)
    {
        return item;
    }

    return MenuParent_Recursion(item.Parent);

}

Answer 1

Answering my own question – By design the ASP.net menu can only have one menuitem selected at a time. This is always applied to the tag of the menuitem list. I’ve changed the menu to incorporate this design, and decided that having the menu parent node selected and not its children is good enough, as I looks like a javascript/page rendering hack is required.

Instead what I do is find the current selected node, use recursion to find the parent and select it. Heres the code for anyone wanting to do the same:

protected void ElfabMenu_MenuItemDataBound(object sender, MenuEventArgs e)
{
    if (SiteMap.CurrentNode != null)
    {
        if (e.Item.Selected)
        {
            MenuItem parent = MenuParent_Recursion(e.Item);
            parent.Selectable = true;
            parent.Selected = true;
        }
    }
}

static MenuItem MenuParent_Recursion(MenuItem item)
{
    if (item.Parent == null)
    {
        return item;
    }

    return MenuParent_Recursion(item.Parent);

}