Problem with SlidingPane during slide

3 posts, 0 answers
  1. Rubens
    Rubens avatar
    2 posts
    Member since:
    Apr 2009

    Posted 29 Apr 2009 Link to this post

    Hi,

    I'm currently evaluating the ASP NET package and have run into a problem with the SlidingPane.

    The code below displays the tree view properly when the sliding pane is docked open.  Once it is closed, clicking on the Tab will make it slide open again but the Tree view is almost completely obscured.  I'm probably doing something wrong and would appreciate some help as I don't have much time remaining to finish the evaluation.  Here is the relevant section with the nested panes.

        <telerik:RadSplitter ID="RadSplitter1" Runat="server"
           Orientation="Horizontal" Skin="Outlook"
            SplitBarsSize="" ResizeMode="EndPane"  FullScreenMode="True">
            <telerik:RadPane ID="HEADER_Pane" runat="server" Height="50" Scrolling="None">
            <h1>Title</h1>
            </telerik:RadPane>
            <telerik:RadPane ID="CONTENT_Pane" runat="server" Scrolling="None">
                <telerik:RadSplitter ID="RadSplitter2" runat="server" Skin="Office2007">
                    <telerik:RadPane ID="NAVIGATION_Pane" runat="server" Scrolling="None" MinWidth="22" Width="22" MaxWidth="22">
                        <telerik:RadSlidingZone ID="NAVIGATION_SlidingZone" runat="server" ClickToOpen="True" SlideDuration="300" DockedPaneId="MENU_SlidingPane">
                            <telerik:RadSlidingPane ID="MENU_SlidingPane" runat="server" Title="Menu" Width="200px" Scrolling="None">

                                <telerik:RadSplitter ID="RadSplitter3" runat="server" Orientation="Horizontal">
                                    <telerik:RadPane ID="NAVIGATION_Pane2" runat="server" Scrolling="None" >
                                        <%-- MENU_TreeView --%>
                                        <telerik:RadTreeView ID="MENU_TreeView" runat="server" Skin="Office2007"
                                            onnodeclick="MENU_TreeView_NodeClick">
                                            <Nodes>
                                                <telerik:RadTreeNode runat="server" AllowDrag="False" Expanded="True"
                                                    ImageUrl="~/icons/aspneticons/user3_16x16.gif" Text="root" NodeType="userRoot">
                                                    <Nodes>
                                                        <telerik:RadTreeNode runat="server"
                                                            ImageUrl="~/icons/aspneticons/image_16x16.gif" Text="Item1" Expanded="True" Category="myItem1">
                                                        </telerik:RadTreeNode>
                                                        <telerik:RadTreeNode runat="server"
                                                            ImageUrl="~/icons/aspneticons/report2_16x16.gif" Text="Item2" Expanded="True"  Category="myItem2">
                                                        </telerik:RadTreeNode>
                                                        <telerik:RadTreeNode runat="server"
                                                            ImageUrl="~/icons/aspneticons/web_16x16.gif" Text="Item3" Expanded="True" ExpandMode="ClientSide"  Category="myItem3">
                                                        </telerik:RadTreeNode>
                                                    </Nodes>
                                                </telerik:RadTreeNode>
                                            </Nodes>
                                        </telerik:RadTreeView>
    </telerik:RadPane>
                    <telerik:RadSplitBar ID="RadSplitBar2" runat="server"  CollapseMode="Forward" />
    <telerik:RadPane runat="server" Scrolling="None">
    south west pane
    </telerik:RadPane>
                                </telerik:RadSplitter>                       
                            </telerik:RadSlidingPane>

                        </telerik:RadSlidingZone>
                    </telerik:RadPane>
                    <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" />
                    <telerik:RadPane ID="MAINCONTENT_Pane" runat="server">
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadPane>
        </telerik:RadSplitter>


    Thanks.

  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 01 May 2009 Link to this post

    Hi Rubens,

    Thank you for the provided code, I built up a test demo based on it and I was able to reproduce the problem.

    You should not set any sizes to the nested splitters if they are directly nested in a RadPane  - when a RadSplitter is directly nested in a RadPane, it automatically resizes itself to occupy 100% of the parent pane. If you set width, height, fullscreenmode, the splitters will make a lot of calculations to resize themselves and this is not necessary and slows down the performance significantly. If the nested splitters are not directly nested in a RadPane but in another element, set their sizes and also set the ResizeWithParentPane property to false. That was causing the problem in this case because the splitter with the treeview is nested in a RadSlidingPane but also in its parent RadPane - that is why it tries to resize according to it. After I set the mentioned property to false, the problem disappeared.


    I also recommend to remove the FullScreenMode poperty from all the splitters. Set the outermost parent splitter's Width and Height properties to 100% and if it is nested in another element, e.g DIV, set explicitly its height, too (do this for all the parent elements of the outermost RadSplitter).

    Put the following style in the page's head section:

     

    <style>     
    html, body, form     
    {     
      height: 100%;     
      margin0px;     
      padding0px;     
    }     
    </style>   

    Since your outermost splitter is configured in percentages, it needs to calculate its size and I suggest to set VisibleDuringInit="false" to it in order to hide this initial resize from the end user.

    After I made all the above explained modifications, the project started behaving as expected and for your convenience I attached it to the thread.

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rubens
    Rubens avatar
    2 posts
    Member since:
    Apr 2009

    Posted 01 May 2009 Link to this post

    Svetlina, you're the best!

    It works.

    Many thanks,

    Rubens.
Back to Top