2

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);

}
3
  • I've solved this in the past by taking the cssfriendly menu adapter, and adapting to my own needs. I can dig up the code if you want it. It has the advantage that it works for all menus without having to attach an event handler. Oct 4, 2011 at 17:52
  • @MennovandenHeuvel I was using CSSFriendly when the site was in .net 2, although the developer hasn't released a .net4 version. I've been through the source and tried to strip a lot out, and modify and it does work, but only if I render the control as 3.5 in my web.config rather than 4.0. Also when I use it, it fails the W3C Validation, due to some of its resources. I think I might have to settle with selecting the parent node, and nothing else. Thanks for your input though! Appreciate it.
    – tutts
    Oct 5, 2011 at 10:36
  • although if your version passes W3C and renders under 4.0 I would love to have a look! :)
    – tutts
    Oct 5, 2011 at 10:41

3 Answers 3

2

Slight modification of this worked for me.

if (SiteMap.CurrentNode != null)
        {
            if (e.Item.Selected)
            {
                if (e.Item.Depth == 1)
                {
                    e.Item.Parent.Selectable = true;
                    e.Item.Parent.Selected = true;
                }
                if (e.Item.Depth == 2)
                {
                    e.Item.Parent.Parent.Selectable = true;
                    e.Item.Parent.Parent.Selected = true;
                }
                if (e.Item.Depth == 3)
                {
                    e.Item.Parent.Parent.Parent.Selectable = true;
                    e.Item.Parent.Parent.Parent.Selected = true;
                }
            }            
        }

Not sure why my depths were one lower, maybe because I have ShowStartingNode="False" on my site map.

1
  • Not sure about the link ad in your answer. I'm sure it's fine in your profile but doesn't seem to fit the spirit of things here to have an unrelated link in your answer.
    – Jamie Bull
    Nov 12, 2012 at 0:15
0

This probably isn't the real issue, but it seems that even if you get the selected class onto the li, you don't yet have a css declaration (eg li.selected {...}) that does anything with it.

1
  • thanks, but the CSS is not the issue here. I haven't declared any CSS for it yet, because the li is never selected, and it appears after further research that the asp.net menu can only select one menuitem by design, and it attaches the class to the <a> tag not the <li>. I've changed the menu design to incorporate this, but it appears what I'm doing is not possible without some ugly JS hacks.
    – tutts
    Oct 4, 2011 at 11:07
0

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);

}
2
  • if anyone has a better solution please let me know, I'd love to find out how it can be done.
    – tutts
    Oct 5, 2011 at 10:39
  • I spent like 4 hours trying to get this to work. Your solution worked. Thanks for sharing it!
    – Rich
    Apr 22, 2012 at 17:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.