This is a migrated thread and some comments may be shown as answers.
Switch expand/collapse logic.
5 Answers 30 Views
This is a migrated thread and some comments may be shown as answers.
Jan Pfeffer
Top achievements
Rank 1
Jan Pfeffer asked on 17 Sep 2012, 12:00 PM
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

5 Answers, 1 is accepted

Sort by
0
Kate
Telerik team
answered on 18 Sep 2012, 03:55 PM
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.
0
Jan Pfeffer
Top achievements
Rank 1
answered on 19 Sep 2012, 09:29 AM
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
0
Kate
Telerik team
answered on 20 Sep 2012, 10:38 AM
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.
0
Jan Pfeffer
Top achievements
Rank 1
answered on 20 Sep 2012, 02:06 PM
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
0
Accepted
Kate
Telerik team
answered on 24 Sep 2012, 02:55 PM
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.
Asked by
Jan Pfeffer
Top achievements
Rank 1
Answers by
Kate
Telerik team
Jan Pfeffer
Top achievements
Rank 1
Share this question
or