Switch expand/collapse logic.

6 posts, 1 answers
  1. Jan Pfeffer
    Jan Pfeffer avatar
    55 posts
    Member since:
    Aug 2006

    Posted 17 Sep 2012 Link to this post

    Hey at Telerik

    I would like to know if there's a way to switch the expand/collapse logic of the RadPanelBar regarding the design.

    I have a RadPanelBar locked in the middle at the bottom of my page and would like the expand/collapse images (logic) to be switched.

    I have tried playing with css for elements

    .rpExpandHandle and

    .rpCollapseHandle


    but with no luck.

    Any help would be greatly appreciated.

    Sincerly

    Jan
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 18 Sep 2012 Link to this post

    Hi Jan,

    Yes, you can easily override the current css classes for the expanded and collapsed state of the RadPanenlBar control. Here you can also refer to the different css classes that are currently applied to the control. For instance by using the Default skin and the following selectors you can achieve the desired look:
    div.RadPanelBar_Default .rpExpandable span.rpExpandHandle,
     div.RadPanelBar_Default a.rpExpandable:hover .rpNavigation .rpExpandHandle
           {
               background-position: 0 -181px;
           }
      div.RadPanelBar_Default .rpExpandable:hover span.rpExpandHandle,
      div.RadPanelBar_Default a.rpExpandable:hover .rpNavigation .rpExpandHandle
           {
               background-position: 100% -181px;
           }
            
      div.RadPanelBar_Default .rpExpanded span.rpExpandHandle,
      div.RadPanelBar_Default a.rpExpanded:hover .rpNavigation .rpExpandHandle
           {
               background-position: 0 -5px;
           }
            
      div.RadPanelBar_Default .rpExpanded:hover span.rpExpandHandle,
       div.RadPanelBar_Default a.rpExpanded:hover .rpNavigation .rpExpandHandle
           {
               background-position: 100% -5px;
           }

    Kind regards,
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jan Pfeffer
    Jan Pfeffer avatar
    55 posts
    Member since:
    Aug 2006

    Posted 19 Sep 2012 Link to this post

    Hey Kate

    Indeed it works for the various skins, and i thank you.

    I still have the problem that i have 2 RadPanelBars on the page. One that directs upwards and another that directs downwards.

    This means i cannot override the default skin. Is there a way to achieve this without creating an entire skin for one of the RadPanelBars.

    I have tried to use a css with the property CssClass but with no luck.

    I hope you can help me.

    Sincerly Jan
  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 20 Sep 2012 Link to this post

    Hello Jan,

    I am not quite sure that I completely understand your scenario. Can you please elaborate a bit more? If you can provide few images of the current appearance of the RadPanelBar that you have as well how you would expect it to look like would be very useful for me. Can you also elaborate on the skins that you are using?

    Regards,
    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.
  6. Jan Pfeffer
    Jan Pfeffer avatar
    55 posts
    Member since:
    Aug 2006

    Posted 20 Sep 2012 Link to this post

    Hey KAte

    I have upped a screenshot that illustrates the situation.

    In the upper right corner there is a RadPanelBar. This RadPanelBar looks as it should, expand/collapse arrows pointing in the right direction. The RadPanelBar expand downwards and collapses upwards.

    In  the lower left corner there is another RadPanelBar. The expand/collapse arrows should point in the opposite direction of the first RadPanelBar because it expands upwards and collapses downwards.

    This means i cannot override the default skin because it will affect both RadPanelBars in this case the Skin Forest. Is there a way to achieve this without creating an entire skin for one of the RadPanelBars.

    I have tried to use a css with the property CssClass but with no luck.

    I hope you can help me.

    Jan
  7. Answer
    Kate
    Admin
    Kate avatar
    1898 posts

    Posted 24 Sep 2012 Link to this post

    Hi Jan,

    You do not need to create a separate stylesheet for the different RadPanelBar controls. Simply adding css class using the CssClass property to the RadPanelBar whose expand/collapse arrow you are trying to alter and then add the name of the newly added css class to the previously suggested selector should work as expected:
    <telerik:RadPanelBar runat="server" ID="rpnlHelper" ExpandMode="MultipleExpandedItems"
            CssClass="test">

    css styles:
    div.RadPanelBar_Default.test .rpExpandable span.rpExpandHandle,
            div.RadPanelBar_Default.test a.rpExpandable:hover .rpNavigation .rpExpandHandle
           {
               background-position: 0 -181px;
           }
           div.RadPanelBar_Default.test .rpExpandable:hover span.rpExpandHandle,
            div.RadPanelBar_Default.test a.rpExpandable:hover .rpNavigation .rpExpandHandle
           {
               background-position: 100% -181px;
           }
           div.RadPanelBar_Default.test .rpExpanded span.rpExpandHandle,
            div.RadPanelBar_Default.test a.rpExpanded:hover .rpNavigation .rpExpandHandle
           {
               background-position: 0 -5px;
           }
           div.RadPanelBar_Default.test .rpExpanded:hover span.rpExpandHandle,
            div.RadPanelBar_Default.test a.rpExpanded:hover .rpNavigation .rpExpandHandle
           {
               background-position: 100% -5px;
           }
     
    Regards,
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017