Resize of expanded sliding pane not working.

13 posts, 0 answers
  1. Doug
    Doug avatar
    23 posts
    Member since:
    Feb 2009

    Posted 13 Nov 2009 Link to this post

    I am having a problem with resizing sliding panes while expanded.  Below is an example of this problem.  The structure of this is designed this way because the outer RadSplitter is in a MasterPage. The inner two RadSplitters are in a dynamically loaded control.  I have a feeling your answer is going to be "The SlidingPane will not resize because there is no adjacent pane in the splitter."  Is that a bug or is it "by design"?  I am using Q2 2009.  Are these issues addressed in the Q3 2009?

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestSlidingPanes.aspx.vb" Inherits="Construction.TestSlidingPanes" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server">  
        <title></title>  
    </head> 
    <body style="height:100%; width:100%">  
        <form id="form1" runat="server" style="height:100%; width:100%">  
        <telerik:RadScriptManager ID="rsm" runat="server" EnableScriptCombine="true" /> 
    <telerik:RadSplitter ID="RadSplitter1" Runat="server" Orientation="Vertical" ResizeWithParentPane="true" FullScreenMode="true" > 
        <telerik:RadPane ID="RadPane3" runat="server" Scrolling="None" MinHeight="100" Height="100%">  
            <telerik:RadSplitter ID="rsLeftNav" Runat="server" Orientation="Horizontal" ResizeWithParentPane="true" > 
                <telerik:RadPane ID="rpTop" runat="server" Scrolling="None" MinHeight="100" > 
                    <telerik:RadSplitter ID="rsLeftNavVert" Runat="server" Orientation="Vertical" ResizeWithParentPane="true" > 
                        <telerik:RadPane ID="rpSearch" runat="server" Scrolling="None" MinHeight="100" Width="22px" > 
                            <telerik:RadSlidingZone ID="rszTop" runat="server" ClickToOpen="true" Width="22px">  
                                <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Title="Quick Search" EnableResize="true" Width="150" > 
                                This is the content of the Top RadSlidingPane  
                                </telerik:RadSlidingPane> 
                            </telerik:RadSlidingZone> 
                        </telerik:RadPane> 
                    </telerik:RadSplitter>                        
                </telerik:RadPane>      
                <telerik:RadSplitBar runat="server"/>  
                <telerik:RadPane ID="RadPane4" runat="server" Scrolling="None" MinHeight="100" > 
                    <telerik:RadSplitter ID="RadSplitter2" Runat="server" Orientation="Vertical" ResizeWithParentPane="true" > 
                        <telerik:RadPane ID="RadPane5" runat="server" Scrolling="None" MinHeight="100" > 
                            <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" ClickToOpen="true">  
                                <telerik:RadSlidingPane ID="RadSlidingPane2" runat="server" Title="Quick Search" EnableResize="true" > 
                                This is the content of the Bot RadSlidingPane  
                                </telerik:RadSlidingPane> 
                            </telerik:RadSlidingZone> 
                        </telerik:RadPane> 
                    </telerik:RadSplitter>                        
                </telerik:RadPane>      
            </telerik:RadSplitter> 
        </telerik:RadPane> 
        <telerik:RadSplitBar runat="server" /> 
        <telerik:RadPane ID="RadPane1" runat="server" Scrolling="None" MinHeight="100" > 
        Pane 2  
        </telerik:RadPane>      
        <telerik:RadPane ID="RadPane2" runat="server" Scrolling="None" MinHeight="100" > 
        Pane 3  
        </telerik:RadPane>      
    </telerik:RadSplitter> 
     
        </form> 
    </body> 
    </html> 
     


    Thanks,
    Doug
  2. Doug
    Doug avatar
    23 posts
    Member since:
    Feb 2009

    Posted 13 Nov 2009 Link to this post

    The reason that I am forseeing your answer is I took your demo which worked as expected and removed the adjacent panels and the problem appeared.

    Doug
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 18 Nov 2009 Link to this post

    Hi Doug,


    All the best,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 18 Nov 2009 Link to this post

    Hello Doug,

    Indeed, in order to be able to resize or dock a RadSlidingPane there should be an adjacent RadPane to the RadPane which holds the sliding pane. However, this is by design and it will not be addressed since this is not a problem but the logic of the control is such. Furthermore, there is a logical problem in your setup - you have a RadSplitter e.g rsLeftNavVert which is as big as its paret pane. However, in your code it has only RadPane and in this case this RadPane should occupy all the area in the splitter and at the same time you have set it to be only 22px wide. As you see even only this messes up calculations and it is invalid. Furthermore, the RadSplitter performes a lot of complex calculations automatically and when you want to use it in a manner it is not designed to be used this will cause unexpected behavior. This being said, if you want to have the RadSlidingPanes working correctly you should modify your code in teh following manner:

    <%@ Page Language="vb" AutoEventWireup="false" %>
      
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">
    <head id="Head1" runat="server">
        <title></title>
    </head>
    <body style="height: 100%; width: 100%">
        <form id="form1" runat="server" style="height: 100%; width: 100%">
            <asp:ScriptManager ID="rsm" runat="server" />
            <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Vertical" ResizeWithParentPane="true"
                FullScreenMode="true">
                <telerik:RadPane ID="RadPane3" runat="server" Scrolling="None" MinHeight="100" Height="100%">
                    <telerik:RadSplitter ID="rsLeftNav" runat="server" Orientation="Horizontal" ResizeWithParentPane="true">
                        <telerik:RadPane ID="rpTop" runat="server" Scrolling="None" MinHeight="100">
                            <telerik:RadSplitter ID="rsLeftNavVert" runat="server" Orientation="Vertical" ResizeWithParentPane="true">
                                <telerik:RadPane ID="rpSearch" runat="server" Scrolling="None" MinHeight="100" Width="22px">
                                    <telerik:RadSlidingZone ID="rszTop" runat="server" ClickToOpen="true" Width="22px">
                                        <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Title="Quick Search"
                                            EnableResize="true" Width="150">
                                            This is the content of the Top RadSlidingPane
                                        </telerik:RadSlidingPane>
                                    </telerik:RadSlidingZone>
                                </telerik:RadPane>
                                <telerik:RadPane ID="RadPane6" runat="server" Scrolling="None" MinHeight="100">
                                </telerik:RadPane>
                            </telerik:RadSplitter>
                        </telerik:RadPane>
                        <telerik:RadSplitBar runat="server" />
                        <telerik:RadPane ID="RadPane4" runat="server" Scrolling="None" MinHeight="100">
                            <telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Vertical" ResizeWithParentPane="true">
                                <telerik:RadPane ID="RadPane5" runat="server" Scrolling="None" MinHeight="100" Width=22>
                                    <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" ClickToOpen="true">
                                        <telerik:RadSlidingPane ID="RadSlidingPane2" runat="server" Title="Quick Search"
                                            EnableResize="true">
                                            This is the content of the Bot RadSlidingPane
                                        </telerik:RadSlidingPane>
                                    </telerik:RadSlidingZone>
                                </telerik:RadPane>
                                <telerik:RadPane ID="RadPane7" runat="server" Scrolling="None" MinHeight="100">
                                </telerik:RadPane>
                            </telerik:RadSplitter>
                        </telerik:RadPane>
                    </telerik:RadSplitter>
                </telerik:RadPane>
                <telerik:RadSplitBar runat="server" />
                <telerik:RadPane ID="RadPane1" runat="server" Scrolling="None" MinHeight="100">
                    Pane 2
                </telerik:RadPane>
                <telerik:RadPane ID="RadPane2" runat="server" Scrolling="None" MinHeight="100">
                    Pane 3
                </telerik:RadPane>
            </telerik:RadSplitter>
        </form>
    </body>
    </html>

    The RadSplitter is a layout control and it is not expected to hold only one pane with RadSlidingPanes. If you need a popup control, I recommend to examine other controls which are with popup behavior, e.g the
    RadPanelBar. You can find a demo where it slides as a sliding pane below:

    http://demos.telerik.com/aspnet-ajax/panelbar/examples/applicationscenarios/slidingpanelbar/defaultcs.aspx

    Kind regards,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  6. Mbott
    Mbott avatar
    24 posts
    Member since:
    Dec 2008

    Posted 22 Dec 2009 Link to this post

    Hi.  I am having the same problem with sliding panes not being able to be resized when expaneded.  Here is my code...

      <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%" Orientation="Vertical"   
                    Skin="Telerik" ResizeMode="Proportional" FullScreenMode="true">  
                          
                        <%-- Left Pane--%> 
                        <telerik:RadPane ID="Radpane1" runat="server" Scrolling="Both">  
                            <telerik:RadSlidingZone ID="RadSlidingZoneLeft" runat="server" SlideDirection="Right">  
                                <telerik:RadSlidingPane ID="RadSlidingPaneLeft" runat="server" Title="Special Left" 
                                    OnClientDocked="OnClientDockedLeft" OnClientUndocked="OnClientUnDockedLeft" EnableResize="true">  
                                      
                                    <telerik:RadDockZone runat="server" ID="RadDockZoneSpecialLeft">  
                                    </telerik:RadDockZone> 
                                      
                                </telerik:RadSlidingPane> 
                            </telerik:RadSlidingZone> 
                        </telerik:RadPane> 
                          
                      
                          
                        <%-- Middle Pane--%> 
                        <telerik:RadPane ID="RadPane2" runat="server" Scrolling="Both">  
                            <telerik:RadDockZone runat="server" ID="RadDockZone1">  
                            </telerik:RadDockZone>                          
                        </telerik:RadPane> 
                          
                      
                            
                        <%-- Right Pane--%> 
                        <telerik:RadPane ID="Radpane3" runat="server" Scrolling="Both">  
                            <telerik:RadSlidingZone ID="RadSlidingZoneRight" runat="server" SlideDirection="Left">  
                              
                                <telerik:RadSlidingPane ID="RadSlidingPaneRight" runat="server" Title="Special Right" 
                                   OnClientDocked="OnClientDockedRight" OnClientUndocked="OnClientUnDockedRight" EnableResize="true">  
                                      
                                    <telerik:RadDockZone runat="server" ID="RadDockZoneSpecialRight">  
                                    </telerik:RadDockZone> 
                                      
                                </telerik:RadSlidingPane> 
                            </telerik:RadSlidingZone> 
                        </telerik:RadPane> 
                    </telerik:RadSplitter> 

    I would like the left and right panes to resize when expanded if needed.  I guess I'm having trouble with how all these controls are nested and whatnot.  Any help would be appreciated.
  7. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 22 Dec 2009 Link to this post

    Hi Mike Ott,

    Would you please provide some more details how exactly do you resize the sliding pane? Do you do this by dragging the resize handle or you do it by uisng client code (I did not see such in the provided code snippet) ? If you resize a RadSlidngPane by using client side methods while it is expanded, the resize will take effect after the pane is collapsed and shown again which is expected. Otherwise you should not experience problems.

    Regards,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  8. Mbott
    Mbott avatar
    24 posts
    Member since:
    Dec 2008

    Posted 22 Dec 2009 Link to this post

    Hi.  Thanks for responding.  I would like the resizing to be done by the user dragging the handle.  The problem is there doesn't seem to be a handle when the sliding pane is expanded. 

    What I'm trying to acheive in the overall layout is to have a 3 column page with the left and right columns taking up 30% of the available window, then the middle column using the remaining 40%.  The left and right columns are sliding panes that I would like to have the users able to resize.
  9. Mbott
    Mbott avatar
    24 posts
    Member since:
    Dec 2008

    Posted 22 Dec 2009 Link to this post

    Also, Do I have to have to have the the RadSplitBar control in order to make the pane resizable?
  10. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 24 Dec 2009 Link to this post

    Hi Mike,

    In order to enable the resize of a RadSlidingPane, it is enough to set EnableResize="true" as shown below:

    http://demos.telerik.com/aspnet-ajax/splitter/examples/sp_enableresizedock/defaultcs.aspx

    and it is not necessary to have a RadSplitBar.

    In order to enable the resize of a RadPane, you should have a RadSplitBar with EnableResize="true" (the default value) as shown below:

    http://demos.telerik.com/aspnet-ajax/splitter/examples/resizemodes/defaultcs.aspx

    In case you need further assistance, please provide a more clear explanation of the exact control you want to resize - a RadSlidingPane or a RadPane and also provide a full page source code with explanations of the problem (best tell us the ID of the pane in the sample code and attach a screenshot of the issue) and I will do my best to help.

    Best wishes,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  11. Mbott
    Mbott avatar
    24 posts
    Member since:
    Dec 2008

    Posted 24 Dec 2009 Link to this post

    Thank you.  
    I would like to resize the sliding pane.

    It seems the RadSlidingPane is only resizeable when it is not docked. Once it is docked, the user can no longer resize the pane.

    here is the code on my master page

    <telerik:RadAjaxPanel ID="UpdatePanel1" runat="server">  
            <telerik:RadDockLayout runat="server" ID="RadDockLayoutSpecial">  
                <div style="position: absolute; left: 0; top: 90px; width: 100%; height: 100%">  
                    <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%" 
                        Skin="Telerik">  
                        <telerik:RadPane ID="Radpane1" runat="server" Width="21px" Height="99%" Scrolling="None">  
                            <telerik:RadSlidingZone ID="RadSlidingZoneLeft" runat="server" Width="21">  
                                <telerik:RadSlidingPane ID="RadSlidingPaneLeft" runat="server" Title="Special" Width="250" 
                                    OnClientDocked="OnClientDockedLeft" OnClientUndocked="OnClientUnDockedLeft" Scrolling="Both" 
                                    EnableResize="true">  
                                    <telerik:RadDockZone runat="server" ID="RadDockZoneSpecialLeft" Height="100%" Width="97%" 
                                        MinHeight="98%" MinWidth="95%">  
                                    </telerik:RadDockZone> 
                                </telerik:RadSlidingPane> 
                            </telerik:RadSlidingZone> 
                        </telerik:RadPane> 
                        <telerik:RadPane ID="RadPane2" runat="server" Scrolling="none" Height="99%">  
                            <telerik:RadDockZone runat="server" ID="RadDockZone1" Height="100%" Width="97%" MinHeight="98%" 
                                MinWidth="95%">  
                            </telerik:RadDockZone> 
                        </telerik:RadPane> 
                        <telerik:RadPane ID="Radpane3" runat="server" Width="21px" Height="99%" Scrolling="None">  
                            <telerik:RadSlidingZone ID="RadSlidingZoneRight" runat="server" Width="21" SlideDirection="Left">  
                                <telerik:RadSlidingPane ID="RadSlidingPaneRight" runat="server" MinWidth="200" Title="Special" 
                                    Width="300" OnClientDocked="OnClientDockedRight" OnClientUndocked="OnClientUnDockedRight" 
                                    EnableResize="true">  
                                    <telerik:RadDockZone runat="server" ID="RadDockZoneSpecialRight" Width="90%" MinHeight="100%">  
                                    </telerik:RadDockZone> 
                                </telerik:RadSlidingPane> 
                            </telerik:RadSlidingZone> 
                        </telerik:RadPane> 
                    </telerik:RadSplitter> 
                </div> 
            </telerik:RadDockLayout> 
        </telerik:RadAjaxPanel> 
  12. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 25 Dec 2009 Link to this post

    Hi Mike,

    Indeed, in order to resize a docked sliding pane, you should have a RadSplitBar next to its parent pane. Actually, when you dock teh sliding pane, it becomes a child of its parent pane and they become with the same width. Thus I should resize the parent pane by using teh splitbar. Please, take a look at teh following code snippet:

    <form id="form1" runat="server">
           <telerik:RadScriptManager ID="ScriptManager2" runat="server" EnableTheming="True">
           </telerik:RadScriptManager>
           <telerik:RadAjaxPanel ID="UpdatePanel1" runat="server">
               <telerik:RadDockLayout runat="server" ID="RadDockLayoutSpecial">
                   <div style="position: absolute; left: 0; top: 90px; width: 100%; height: 100%">
                       <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%"
                           Skin="Telerik">
                           <telerik:RadPane ID="Radpane1" runat="server" Width="21px" Height="99%" Scrolling="None">
                               <telerik:RadSlidingZone ID="RadSlidingZoneLeft" runat="server" Width="21">
                                   <telerik:RadSlidingPane ID="RadSlidingPaneLeft" runat="server" Title="Special" Width="250"
                                       Scrolling="Both" EnableResize="true">
                                       <telerik:RadDockZone runat="server" ID="RadDockZoneSpecialLeft" Height="100%" Width="97%"
                                           MinHeight="98%" MinWidth="95%">
                                       </telerik:RadDockZone>
                                   </telerik:RadSlidingPane>
                               </telerik:RadSlidingZone>
                           </telerik:RadPane>
                           <telerik:RadSplitBar ID="splibar1" runat="server" />
                           <telerik:RadPane ID="RadPane2" runat="server" Scrolling="none" Height="99%">
                               <telerik:RadDockZone runat="server" ID="RadDockZone1" Height="100%" Width="97%" MinHeight="98%"
                                   MinWidth="95%">
                               </telerik:RadDockZone>
                           </telerik:RadPane>
                           <telerik:RadSplitBar ID="splitbar2" runat="server" />
                           <telerik:RadPane ID="Radpane3" runat="server" Width="21px" Height="99%" Scrolling="None">
                               <telerik:RadSlidingZone ID="RadSlidingZoneRight" runat="server" Width="21" SlideDirection="Left">
                                   <telerik:RadSlidingPane ID="RadSlidingPaneRight" runat="server" MinWidth="200" Title="Special"
                                       Width="300" EnableResize="true">
                                       <telerik:RadDockZone runat="server" ID="RadDockZoneSpecialRight" Width="90%" MinHeight="100%">
                                       </telerik:RadDockZone>
                                   </telerik:RadSlidingPane>
                               </telerik:RadSlidingZone>
                           </telerik:RadPane>
                       </telerik:RadSplitter>
                   </div>
               </telerik:RadDockLayout>
           </telerik:RadAjaxPanel>
       </form>

    By including these two splitbarsm you will be able to resize the RadSlidingPane when it is docked.

    Kind regards,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  13. Mbott
    Mbott avatar
    24 posts
    Member since:
    Dec 2008

    Posted 29 Dec 2009 Link to this post

    Thank you for all your help!  It's working well now. :)
  14. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 30 Dec 2009 Link to this post

    Hello Mike,

    I am glad I could help! In case you experience any further problems, do not hesitate to contact us again, will be happy to assist you to resolve all encountered issues.

    Greetings,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017