Hide/Show Panes in RadSplitter

3 posts, 1 answers
  1. Babak Rezvani
    Babak Rezvani avatar
    13 posts
    Member since:
    Apr 2008

    Posted 15 May 2009 Link to this post

    Hi,

    I am using Telerik.Web.UI.dll version 2008.1.619.35 (Rad Controls for ASP.NET AJAX).

    I have a page where I am using Nested splitters as below:
    <rad:RadSplitter ID="RadSplitterMain" Runat="server" Width="99%" Height="99%" ResizeMode="EndPane">
       <rad:RadPane ID="RadPaneLeft" Runat="server" Width="200px" Height="100%" MinWidth="200" MaxWidth="400">
         LEFT PANE CONTENT
       </rad:RadPane>
       <rad:RadSplitBar ID="RadSplitBarMain" Runat="server" />
       <rad:RadPane ID="RadPaneRight" Runat="server" Width="" Height="100%" Scrolling="None">
          <rad:RadSplitter ID="RadSplitterRight" Runat="server" Orientation="Horizontal" ResizeMode="AdjacentPane">
             <rad:RadPane ID="RadPaneTop" Runat="server" Width="100%" Height="110" Scrolling="None" Locked="true">
                RIGHT TOP PANE CONTENT
             </rad:RadPane>
             <rad:RadSplitBar ID="RadSplitBarRight" runat="server" CollapseMode="None" />
             <rad:RadPane ID="RadPaneBottom1" Runat="server" Width="100%" Height="110" Scrolling="None" Locked="true">
                <rad:RadSplitter ID="RadSplitterRightContent" Runat="server" Orientation="Horizontal" ResizeMode="AdjacentPane">
                   <rad:RadPane ID="RadPaneMiddle1" Runat="server" Width="100%" Height="175">
                      RadPaneMiddle1 CONTENT
                   </rad:RadPane>
                   <rad:RadSplitBar ID="RadSplitBarRightMiddle" runat="server" CollapseMode="Both" />
                   <rad:RadPane ID="RadPaneMiddle2" Runat="server" Width="100%" Height="175">
                      RadPaneMiddle2 CONTENT
                   </rad:RadPane>
                </rad:RadSplitter>
             </rad:RadPane>
             <rad:RadPane ID="RadPaneBottom2" Runat="server" Width="100%" Height="110" Scrolling="None" Locked="true">
                RadPaneBottom2 CONTENT
             </rad:RadPane>
         </rad:RadSplitter>
      </rad:RadPane>
    </rad:RadSplitter>

    I have two asp.net Button controls Button1 and Button2
    When I click on Button1, I want to show RadPaneBottom1 and hide RadPaneBottom2.
    When I click on Button2, I want to show RadPaneBottom2 while hiding RadPaneBottom1.
    Is this possible? or Please suggest any other way I can achieve this functionality.

    Thanks in advance
    Vijay

  2. Answer
    Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 18 May 2009 Link to this post

    Hi Babak,

    First, let me explain how the collapse functionality works. When you collapse a RadPane, you actually resize it to 0px width/height. Additionally, in order for a RadPane to resize (collapse), it should be able to resize - e.g. in case you have one RadPane in the splitter, you cannot resize/collapse it; in case you have two RadPanes in the splitter,  one of which is collapsed, you cannot collapse the second one as well. In order to be able to resize/collapse a RadPane  you need to have an adjacent RadPane that you can resize with the delta that you what to resize the first RadPane (in case you collapse, the delta is the width/height of the first RadPane). That is why, in case you have the following:

    - expanded second pane
    - collapsed first pane 

    and you what to expand the first pane and collapse the second on the server, the following happens:

    - second pane is initialized and tries to collapse (left border moves). However, the other pane - first pane, is collapsed and thus the second pane fails to collapse.
    - first pane is initialized and tries to expand(right border moves). However, the second pane is collapsed and thus it fails to expand.

    Thus in your case, you have to control the order in which the RadPanes collapse and expand and additionally, the direction in which they collapse/expand. For the time being, you can specify those only on the client. That is why, I modified your page so that it achieves the desired behavior on the client and collapses/expands the panes in the correct order and with correct arguments - please find a modified version of your project attached.


    All the best,

    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Babak Rezvani
    Babak Rezvani avatar
    13 posts
    Member since:
    Apr 2008

    Posted 19 May 2009 Link to this post

    Thanks Svetlina, Its working now.
Back to Top