Problem with SlidingPane during slide

[Rubens]

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.

[Svetlina Anati]

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%;
  margin: 0px;
  padding: 0px;
}
</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.

[Rubens]

Svetlina, you're the best!

It works.

Many thanks,

Rubens.