Switch expand/collapse logic.

[Jan Pfeffer]

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

[Kate]

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

[Jan Pfeffer]

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

[Kate]

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

[Jan Pfeffer]

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

[Kate]

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