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

RadPane with scrolling inside RadSlidingZone

4 Answers 99 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Lucas Bonifacius
Top achievements
Rank 1
Lucas Bonifacius asked on 18 Apr 2010, 01:13 PM
Hi,

in my application, there are some RadPanes inside an RadSlidingPane which is inside an RadSlidingZone filling the entire page. Is it possible to have scrolling enabled in one of these nested RadPanes?

It seems as if there are scrollbars, but they aren't visible. I tried many tricks I found on your website but without results.

Best regards
Lucas

4 Answers, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 21 Apr 2010, 12:25 PM
Hello Lucas,

I am afraid that we could not completely understand what is your exact setup and thus what I can suggest is the following:

1) If you have a RadSplitter nested in a RadSlidingPane as I understood, set ResizeWithParentPane="false" for this nested splitter.

2) If the above does not help, share your markup here and attach a screenshot with the problem clearly marked.


Sincerely yours,
Svetlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Lucas Bonifacius
Top achievements
Rank 1
answered on 21 Apr 2010, 06:05 PM
Hello,

thank you very much for the response. Unfortunately the problem still exists. I hope the code snippet below will cleary point my problem out. I also attached a sample screenshot.

On the right part of the page there are two sliding panes, nested inside another RadSplitter. In one of these sliding panes there are some RadPanes. Although I set Scrolling="both", no scrollbars will be display in IE and Firefox in the desired RadPane. (I guess, they are displayed but hidden behind the sliding tiles.).
Second problem is, that the pane will initially not be sized to 100% height. After resizing the hole window, the RadPane is resized to 100% height.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %> 
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
 
<!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 id="Head1" runat="server">  
    <style type="text/css">  
        html, body, form  
        {  
            height:100%;  
            margin:0px;  
            padding:0px;  
        }  
    </style>   
</head> 
<body class="Main" style="overflow:hidden;">  
    <form id="form1" runat="server">      
      
    <telerik:RadScriptManager ID="ScriptManager1" runat="server">  
    </telerik:RadScriptManager> 
      
    <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal" ResizeMode="AdjacentPane" Width="100%" Height="100%" VisibleDuringInit="false">  
           <telerik:RadPane ID="RadPane1" runat="server" Height="50px" Scrolling="None">     
                [Logo] [Main menu]  
           </telerik:RadPane>     
           <telerik:RadPane ID="RadPane2" runat="server" Scrolling="None">  
            <telerik:RadSplitter runat="server" ID="s1">  
                <telerik:RadPane runat="server" ID="p21" Width="400">  
                </telerik:RadPane> 
                <telerik:RadSplitBar runat="server" ID="RadSplitBar1"/>  
                <telerik:RadPane runat="server" ID="p2" Scrolling="None">  
                    [Main content]  
                </telerik:RadPane> 
                <telerik:RadSplitBar runat="server" ID="RadSplitBar2"/>  
                <telerik:RadPane runat="server" ID="p3" Scrolling="None">  
                    <telerik:RadSlidingZone id="Radslidingzone1" runat="server" Width="22" DockedPaneId="p31" SlideDirection="Left">  
                        <telerik:RadSlidingPane Title="Sliding pane 1" runat="server" ID="p31" Scrolling="None" Width="280">                      
                            <telerik:RadSplitter runat="server" ID="RadSplitter3" Orientation="Horizontal">  
                               <telerik:RadPane runat="server" ID="RadPane3" Height="37px" Scrolling="None">                      
                                    [Toolbar]  
                               </telerik:RadPane> 
                               <telerik:RadPane runat="server" ID="RadPane4" Scrolling="Both">  
                                    This pane should have scrollbars.<br/> 
                                      
                                    Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br /> 
                                    Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br /> 
                                    Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br /> 
                                    Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br /> 
                                    Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br /> 
                                    Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br /> 
                                    Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br /> 
                                    Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br /> 
                                    Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br /> 
                                    Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br /> 
                                    Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br /> 
                                    Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br /> 
                                    Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br /> 
                                    Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br /> 
                                    Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br />Content<br /> 
                                    Content<br />Content<br />Content<br /> 
                                </telerik:RadPane> 
                            </telerik:RadSplitter>                      
                        </telerik:RadSlidingPane> 
                          
                        <telerik:RadSlidingPane Title="Sliding pane 2" runat="server" ID="p32" Width="250px">  
                              
                        </telerik:RadSlidingPane> 
                    </telerik:RadSlidingZone>               
                </telerik:RadPane> 
                </telerik:RadSplitter> 
            </telerik:RadPane> 
        </telerik:RadSplitter>       
          
    </form> 
</body> 
</html> 


0
Svetlina Anati
Telerik team
answered on 23 Apr 2010, 11:15 AM
Hello Lucas,

Thank you for the provided code but I did not see that you have set ResizeWithParentPane="false" as I suggested. When I set this property, the scrolling started working as expected - please test your modified code below:

<form id="form1" runat="server">
  <asp:ScriptManager ID="ScriptManager1" runat="server">
  </asp:ScriptManager>
  <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal" ResizeMode="AdjacentPane"
      Width="100%" Height="100%" VisibleDuringInit="false">
      <telerik:RadPane ID="RadPane1" runat="server" Height="50px" Scrolling="None">
          [Logo] [Main menu]
      </telerik:RadPane>
      <telerik:RadPane ID="RadPane2" runat="server" Scrolling="None">
          <telerik:RadSplitter runat="server" ID="s1">
              <telerik:RadPane runat="server" ID="p21" Width="400">
              </telerik:RadPane>
              <telerik:RadSplitBar runat="server" ID="RadSplitBar1" />
              <telerik:RadPane runat="server" ID="p2" Scrolling="None">
                  [Main content]
              </telerik:RadPane>
              <telerik:RadSplitBar runat="server" ID="RadSplitBar2" />
              <telerik:RadPane runat="server" ID="p3" Scrolling="None">
                  <telerik:RadSlidingZone ID="Radslidingzone1" runat="server" Width="22" DockedPaneId="p31"
                      SlideDirection="Left">
                      <telerik:RadSlidingPane Title="Sliding pane 1" runat="server" ID="p31" Scrolling="None"
                          Width="280">
                          <telerik:RadSplitter runat="server" ID="RadSplitter3" Orientation="Horizontal" ResizeWithParentPane="false"
                              Width="100%" Height="100%">
                              <telerik:RadPane runat="server" ID="RadPane3" Height="37px" Scrolling="None">
                                  [Toolbar]
                              </telerik:RadPane>
                              <telerik:RadPane runat="server" ID="RadPane4" Scrolling="Both">
                                  This pane should have scrollbars.<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                                  Content<br />
                              </telerik:RadPane>
                          </telerik:RadSplitter>
                      </telerik:RadSlidingPane>
                      <telerik:RadSlidingPane Title="Sliding pane 2" runat="server" ID="p32" Width="250px">
                      </telerik:RadSlidingPane>
                  </telerik:RadSlidingZone>
              </telerik:RadPane>
          </telerik:RadSplitter>
      </telerik:RadPane>
  </telerik:RadSplitter>
  </form>



All the best,
Svetlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Lucas Bonifacius
Top achievements
Rank 1
answered on 23 Apr 2010, 04:16 PM
Hello Svetlina,

thank you very much for your assistance. Now it works as expected.

Best regards,
Lucas
Tags
Splitter
Asked by
Lucas Bonifacius
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Lucas Bonifacius
Top achievements
Rank 1
Share this question
or