This is a migrated thread and some comments may be shown as answers.

Resize of expanded sliding pane not working.

12 Answers 175 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Doug
Top achievements
Rank 1
Doug asked on 13 Nov 2009, 04:26 PM
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

12 Answers, 1 is accepted

Sort by
0
Doug
Top achievements
Rank 1
answered on 13 Nov 2009, 04:28 PM
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
0
Svetlina Anati
Telerik team
answered on 18 Nov 2009, 10:35 AM
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.
0
Svetlina Anati
Telerik team
answered on 18 Nov 2009, 10:47 AM
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.
0
Mbott
Top achievements
Rank 1
answered on 22 Dec 2009, 02:12 PM
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.
0
Svetlina Anati
Telerik team
answered on 22 Dec 2009, 03:30 PM
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.
0
Mbott
Top achievements
Rank 1
answered on 22 Dec 2009, 03:37 PM
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.
0
Mbott
Top achievements
Rank 1
answered on 22 Dec 2009, 06:09 PM
Also, Do I have to have to have the the RadSplitBar control in order to make the pane resizable?
0
Svetlina Anati
Telerik team
answered on 24 Dec 2009, 01:35 PM
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.
0
Mbott
Top achievements
Rank 1
answered on 24 Dec 2009, 03:38 PM
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> 
0
Svetlina Anati
Telerik team
answered on 25 Dec 2009, 11:01 AM
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.
0
Mbott
Top achievements
Rank 1
answered on 29 Dec 2009, 07:14 PM
Thank you for all your help!  It's working well now. :)
0
Svetlina Anati
Telerik team
answered on 30 Dec 2009, 10:47 AM
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.
Tags
Splitter
Asked by
Doug
Top achievements
Rank 1
Answers by
Doug
Top achievements
Rank 1
Svetlina Anati
Telerik team
Mbott
Top achievements
Rank 1
Share this question
or