Collapsable Panel

7 posts, 1 answers
  1. Raka
    Raka avatar
    71 posts
    Member since:
    Sep 2011

    Posted 25 Jul 2012 Link to this post

    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.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 25 Jul 2012 Link to this post

    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.
  3. Raka
    Raka avatar
    71 posts
    Member since:
    Sep 2011

    Posted 26 Jul 2012 Link to this post

    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
  4. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 26 Jul 2012 Link to this post

    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.
  5. Raka
    Raka avatar
    71 posts
    Member since:
    Sep 2011

    Posted 27 Jul 2012 Link to this post

    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
  6. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 30 Jul 2012 Link to this post

    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.
  7. Raka
    Raka avatar
    71 posts
    Member since:
    Sep 2011

    Posted 30 Jul 2012 Link to this post

    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
Back to Top