This is a migrated thread and some comments may be shown as answers.

Collapsable Panel

6 Answers 159 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Raka
Top achievements
Rank 1
Raka asked on 25 Jul 2012, 05:46 PM
Hi -- Is there a way to change the icon for collapsible panel.  By default it shows a caret (^) in right hand corner.  We have users who don't find that intuitive.

Thank you.
Raka.

6 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 26 Jul 2012, 04:13 AM
Hi Raka,

Try overriding the default css as follows to achieve your scenario. 

CSS:
<style type="text/css">
 .RadPanelBar_Default .rpExpandable span.rpExpandHandle
 {
  background-image: url("../Images/ExpandableImage.jpg") !important;
  background-position:0 !important;
 }
  .RadPanelBar_Default .rpExpanded span.rpExpandHandle
 {
  background-image: url("../Images/ExpandedImage.jpg") !important;
  background-position:0 !important;
 }
 </style>

Hope this helps.

Thanks,
Princy.
0
Raka
Top achievements
Rank 1
answered on 26 Jul 2012, 11:52 AM
Hello Princy

Thank you for helping me with this.  I put this script inside the contentplaceholder before javascript script.  However it had no effect.  We are creating the expandable area with --
<telerik:RadDock ID="rdDock" runat="server" Title="Filter Criteria" DefaultCommands="ExpandCollapse" Resizable="false"
 EnableDrag="false" DocMode="Dock" ExpandText="Expand" CollapseText="Collapse" Collapsed="false" OnClientCommand="onClientCommand">
...
</telerik:RadDock>

I also tried placing the style block that you gave me in master page, but that did not help either.  Will this information be helpful for you to diagnose the problem?

Thanks much, Raka
0
Princy
Top achievements
Rank 2
answered on 27 Jul 2012, 04:41 AM
Hi Raka,

Try setting the following css to change the icon for collapsible panel in RadDock.

CSS:
<style type="text/css">
.rdCollapse, .rdExpand
{
 background-position:0 !important;
 background-image:url("Image.jpg") !important;
}
</style>

Thanks,
Princy.
0
Raka
Top achievements
Rank 1
answered on 27 Jul 2012, 04:37 PM
Hi Princy

This doesn't work either.  I am not sure how it will work since we need two different images, one for collapse and another for expand.  I tried to separate these into two sections (one for .rdCollapse and second for .rdExpand).  Either way it doesn't make any difference. 

The RadDock itself has 'expand/collapse' command set up on it.  There is no real 'Panel' inside RadDock. 
So we have something like below...  We want to be able to expand and collapse each RadDock.  I am sorry if I initially wrote it in confusing manner.  I apologise.

<RadDockZone>
    <RadDock ID="rd1"...  DefaultCommand="ExpandCollapse">
        <ContentTemplate>
            <div>
                ...
            </div>
        </ContentTemplate>
    </RadDock>

    <RadDock ID="rd2"...  DefaultCommand="ExpandCollapse">
        <ContentTemplate>
            <div>
                ...
            </div>
        </ContentTemplate>
    </RadDock>

</RadDockZone>


Thanks, Sandhia
0
Accepted
Princy
Top achievements
Rank 2
answered on 30 Jul 2012, 07:02 AM
Hi Sandhia,

Unfortunately I couldn't replicate the issue. Here is the code that I tried based on your scenario which works as expected at my end. Please have a look into the screenshot attached.

<telerik:RadDockZone runat="server" ID="RadDockZone1" Width="400" >
  <telerik:RadDock runat="server" ID="RadDock2" Title="ExpandCollapse" EnableRoundedCorners="true" DefaultCommands="ExpandCollapse">
   <ContentTemplate>
     ...........................
   </ContentTemplate>
 </telerik:RadDock>
 <telerik:RadDock runat="server" ID="RadDock3" Title="Custom Commands" DefaultCommands="ExpandCollapse" EnableRoundedCorners="true">
   <ContentTemplate>
     ...........................
   </ContentTemplate>
  </telerik:RadDock>
</telerik:RadDockZone>

CSS:
<style type="text/css">
 .rdCollapse
 {
  background-position:0 !important;
  background-image:url("../Images/image1.jpg") !important;
 }
 .rdExpand
 {
  background-position:0 !important;
  background-image:url("../Images/image2.jpg") !important;
 }
</style>

Thanks,
princy.
0
Raka
Top achievements
Rank 1
answered on 30 Jul 2012, 12:51 PM
Hello Princy -- Ok, my mistake.  It does work.  I had to put the css in the master page's css file.  Earlier I was trying to place it in the page that used expandCollapse functionality.

Thanks a lot.
Sandhia
Tags
General Discussions
Asked by
Raka
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Raka
Top achievements
Rank 1
Share this question
or