RadPane with scrolling inside RadSlidingZone

5 posts, 0 answers
  1. Lucas Bonifacius
    Lucas Bonifacius avatar
    13 posts
    Member since:
    May 2006

    Posted 18 Apr 2010 Link to this post

    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
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 21 Apr 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Lucas Bonifacius
    Lucas Bonifacius avatar
    13 posts
    Member since:
    May 2006

    Posted 21 Apr 2010 Link to this post

    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> 


  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 23 Apr 2010 Link to this post

    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.
  6. Lucas Bonifacius
    Lucas Bonifacius avatar
    13 posts
    Member since:
    May 2006

    Posted 23 Apr 2010 Link to this post

    Hello Svetlina,

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

    Best regards,
    Lucas
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017