How do you change the width of a docked RadSlidingPane?

8 posts, 1 answers
  1. chris
    chris avatar
    7 posts
    Member since:
    Jun 2009

    Posted 15 Jul 2009 Link to this post

    Repro steps:
    1. go to http://demos.telerik.com/aspnet-ajax/splitter/examples/sp_clientsideapi/defaultcs.aspx
    2. click on pane 1 and click the pin to dock it.
    3. click  the "Toggle 'Pane 1' width 200 / 100 px" link

    expected behavior:
    pane is resized

    actual behavior:
    no resize occurs

    Thanks,
    Chris
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 20 Jul 2009 Link to this post

    Hi Chris,

    In order to resize a docked RadSlidingPane you should resize its parent RadPane by using the client-side method resize of the pane which is listed below:

    http://www.telerik.com/help/aspnet-ajax/splitter_clientsideradpane.html

    I prepared for you the following code for demonstration purposes:

    <body> 
        <form id="form1" runat="server">  
        <telerik:RadScriptManager ID="scriptManager" runat="server" /> 
     
        <script type="text/javascript">  
     
            function ResizePane()  
            {  
               $find("<%=LeftPane.ClientID %>").resize(500, 1);  
            }  
              
        </script> 
     
        <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="400" Width="800" VisibleDuringInit="false">  
            <telerik:RadPane ID="LeftPane" runat="server" Width="22" Scrolling="None">  
                <telerik:RadSlidingZone ID="SlidingZone1" runat="server" Width="22" ClickToOpen="true">  
                    <telerik:RadSlidingPane ID="Pane1" runat="server" Title="Pane1" Width="150" EnableResize="true">  
                        RadSlidingPane  
                    </telerik:RadSlidingPane> 
                </telerik:RadSlidingZone> 
            </telerik:RadPane> 
            <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward" /> 
            <telerik:RadPane ID="EndPane" runat="server">  
            </telerik:RadPane> 
        </telerik:RadSplitter> 
        <button onclick="ResizePane();return false;">  
            Resize docked</button> 
        </form> 
    </body> 

    If you first dock teh RadSlidingPane and after that click teh button, its width will resize accordingly. I hope that my suggestion and the provided code are helpful, let us know how it goes.

    Best wishes,
    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. chris
    chris avatar
    7 posts
    Member since:
    Jun 2009

    Posted 20 Jul 2009 Link to this post

    Thanks for your response. That works well.

    I would note that from an API intuitiveness point of view it is not a good implementation. That is, the fact that the RadPane is the pane that must be resized when the SlidingPane is docked is not obvious in any of the documentation nor is it intuitive. To the un-initiated it's all just a SlidingPane so you should be able to call resize (or set_width or whatever) directly on the sliding pane regardless of wether it's docked or not.

    Thanks for your help,
    Chris
  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 21 Jul 2009 Link to this post

    Hello Chris,

    In order to change the size of a RadSlidingPane which is docked you should change the size of its parent RadPane - otherwise even the sliding pane is resized, the bigger width will not be visible. That is why we believe that it makes sense to resize a docked RadSlidingPane by resizing its parent RadPane. However, we agree with you that this might not be very intuitive for our customers and that is why I updated our help according to your suggestion.

    Thank you for your cooperation, we appreciate it! 

    Sincerely yours,
    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.
  6. chris
    chris avatar
    7 posts
    Member since:
    Jun 2009

    Posted 28 Jul 2009 Link to this post

    To add on to my original question, how to do you make a RadSlidingPane resize it's parent RadPane? That is, when a user resizes a sliding pane we want it to resize all of it's sibling sliding panes to be the same size. One of them may be docked so you'd need to resize the parent RadPane. I've attached some code fired by the OnClientResized event of the RadSlidingPane but the problem is that if you try to resize your parent RadPane it fires OnClientResized events for all it's child RadSlidingPanes so you end up in a loop.

    1             function ResizeSiblingPanes(sender, eventArgs) {  
    2                 var parentSlidingZone = sender._zone;  
    3                 var siblings = parentSlidingZone.getPanes();  
    4                 var newSize = sender.get_width();  
    5                 var parentRadPane = sender.get_parentPane();  
    6                 var currentPane;  
    7                 var isDocked;  
    8  
    9                 //resize the sibling SlidingPanes  
    10                 for (var i in siblings) {  
    11                     currentPane = siblings[i];  
    12                     if (currentPane != sender) {  
    13                         currentPane.set_width(newSize);  
    14                     }  
    15                 }  
    16  
    17                 //resize the parent RadPane (takes the delta rather than the complete size)  
    18                 parentRadPane.resize(parentRadPane.get_width() - newSize);  
    19             }  
    20  

    Thanks,
    Chris
  7. Answer
    Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 03 Aug 2009 Link to this post

    Hello chris,

    I examined the provided code and I think that you should make your code more complex - e.g determine the direction in which you should resize the RadPane, etc. I prepared for you the following sample code:

    <body> 
        <form id="frmMain" runat="server">  
            <telerik:RadScriptManager ID="rsmMain" runat="server" /> 
     
            <script type="text/javascript">  
     var newSize = 0;  
     function ResizeSiblingPanes(sender, eventArgs)   
            {     
                  var parentSlidingZone = $find("<%=zone.ClientID%>");     
                  var siblings = parentSlidingZone.getPanes();     
     
                   if(!sender.get_docked())  
                   {  
                      newSize = sender.get_width();    
                   }   
                    var parentRadPane = sender.get_parentPane();     
     
                    //resize the sibling SlidingPanes     
                     for (var i in siblings)   
                     {     
                         currentPane = siblings[i];     
                         if (currentPane != sender) {     
                           
                         if(currentPane.get_docked())  
                         {  
     
                                  if(newSize > parentRadPane.get_width())  
                                  {  
                                    parentRadPane.resize(newSize - parentRadPane.get_width(), 1);    
                                  }  
                                  else  
                                  {  
                                    parentRadPane.resize(newSize - parentRadPane.get_width(), 2);    
                                  }  
     
                         }  
                         else  
                         {  
                             currentPane.set_width(newSize);   
                         }    
                     }     
                   }     
                   
                 }     
            
            </script> 
     
            <telerik:RadSplitter ID="rsMain" runat="server" Width="100%" Height="100%" VisibleDuringInit="false">  
                <telerik:RadPane ID="rp1" runat="server" Width="22">  
                    <telerik:RadSlidingZone ID="zone" runat="server">  
                        <telerik:RadSlidingPane ID="slide1" runat="server" Title="First" OnClientResized="ResizeSiblingPanes">  
                        </telerik:RadSlidingPane> 
                        <telerik:RadSlidingPane ID="slide2" runat="server" Title="Second" OnClientResized="ResizeSiblingPanes">  
                        </telerik:RadSlidingPane> 
                        <telerik:RadSlidingPane ID="slide3" runat="server" Title="Third" OnClientResized="ResizeSiblingPanes">  
                        </telerik:RadSlidingPane> 
                    </telerik:RadSlidingZone> 
                </telerik:RadPane> 
                <telerik:RadPane ID="rp2" runat="server">  
                </telerik:RadPane> 
            </telerik:RadSplitter> 
        </form> 
    </body> 

    and for your conveninece I also attached a sample test page. Please, use this code as a start point for your implementation.

    Kind regards,
    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.
  8. chris
    chris avatar
    7 posts
    Member since:
    Jun 2009

    Posted 04 Aug 2009 Link to this post

    Thanks for your help. This worked great.

    It might be good to clarify the documentation of these resize methods.

    It's really unclear what "backward" and "forward" mean in this context. It seems more like it means "reduce" or "increase" by the number of pixels specified. It would be more intuitive to have it just infer backward/forward by passing in a positive or negative value or to have the resize method do the "if (newSize > parentRadPane.get_width())..." logic itself.

    To further add to the confusion there is the setVarSize method. What do you mean by the resizable direction? How does this method differ from resize?

    Thanks,
    Chris
  9. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 07 Aug 2009 Link to this post

    Hello chris,

    Straight to your questions:

    1. You are correct that indeed in this case forward and backward are actually equal to increase/decrease but this is expected - forward is to the right direction and backward - to the left which will result for this pane as increase/decrease of the size. In case there is something unclear, please tell us what exactly is it and we will do our best to explain it.
    2. When you have a vertical splitter, you do not need to set the height of a pane - it is always equal to the height of the splitter. This means that it has only one resizable direction which means that you can only change the width and not the height. Similarly, for a horizontally oriented splitter, the setVarSize method will set the height.
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017