Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > PanelBar > move rpSelected-class to parent-li

• Menno

  Posted on Dec 20, 2011 (permalink)

  Hi,
  
  I'm trying to style a RedPanelBar (as a submenu) and now I would like to select an li within this menu when it's active. Problem is that the 'rpSelected'-class is added to it's childelement (rpLink). Is there a simple solution to this? And wouldn't it be (more) obvious to add the "rpSelected" and "rpFocused" to the parent-li instead of its childelement? Because it's possible to select a lot of levels deeper into the DOM starting at some element, but you can't even select 1 level up into the DOM, just by CSS. Obviously it's not a problem when using javascript, but I don't want to use that just for styling-issues.
  
  I hope someone comes up with a simple solution I just overlooked. Or even better, I hope this can be changed into the basic functionality of the control... :)
  
  Thanks in advance!
  
  Menno

  Reply

• Kate Kate

  Posted on Dec 21, 2011 (permalink)

  Hello Menno,
  
  Can you please give some more details on your scenario and clarify a bit more why you need to apply a css class to the LI element? In general changing the basic functionality of the control is not an easy and trivial task to accomplish. However, I forwarded your request to our development team so that they can look at it.  
  
  Greetings,
  Kate
  the Telerik team

  If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now

  Reply


• Menno

  Posted on Dec 21, 2011 (permalink)

  Hi Kate,
  
  basically it comes down to this. Because of the design of the submenu (with flexible background-images, hover-effects and so on) the design has been slices in a way that the active status of the menuitems is put on the <li> and the <li> has some styling on its own, together with its childnodes. For this situation it would be great to actually style down the 'ladder', instead of finding a way to target the parent (the container) of the active-link.
  
  In my opinion it would always be more logical to style down. I figure there are a lot more situations where the <li> itself has to be styled, based on an active-class.
  
  For example:
  If I would like to style the li with class "rpItem rpFirst", ONLY when it contains an anchor with the class "rpSelected" (or rpFocused), I can't select/target it by CSS. But I would need to add some JavaScript to the page to get this done. I think it would be no loss to move these classes (selected/focused) to the listitem.
  
  Markup now
  

  <li class="rpItem rpFirst">

    <a href="/title" class="rpLink  rpSelected">

      <span class="rpOut rpNavigation">

        <span class="rpExpandHandle"></span>

        <span class="rpText">Title</span>

      </span>

    </a>

  </li>

  
  Markup as suggested
  

  <li class="rpItem rpFirst rpSelected">

    <a href="/title" class="rpLink">

      <span class="rpOut rpNavigation">

        <span class="rpExpandHandle"></span>

        <span class="rpText">Title</span>

      </span>

    </a>

  </li>

  
  Possible CSS
  

  .rpItem.rpSelected {
    // some styling
}
.rpItem.rpSelected .rpLink {
    // some styling 

  }

  Reply

• Ivan Zhekov Ivan Zhekov

  Posted on Dec 27, 2011 (permalink)

  Hello Menno,
  
  Some of the things you mentioned are like this due to legacy browsers and accessibility e.g. only links can be "active" or hovered. However, your suggestions do make a point, especially in a browser landscape that is dominated by standard compliant browsers.
  
  As for the things you want to achieve, they are more or less doable, by using a lesser known property of the RadMenuItem -- OuterCssClass, which puts a class name on containing LI element -- and some JS.
  
  Let me know if you need help with that.
  
  On a side note, I have awarded you some Telerik points for the suggestion.
  
  Regards,
  Ivan Zhekov
  the Telerik team

  If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > PanelBar > move rpSelected-class to parent-li