Collapsable Panel

[Raka]

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.

[Princy]

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.

[Raka]

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

[Princy]

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.

[Raka]

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

[Princy]

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.

[Raka]

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