RadSplitter and RadPane

[Marco]

Dear Support-Team,

I have the following issue:

I have downloaded the WebMail application and built a test website based on it. I just changes the contents of the panes but not the buildup of the application. I have a left pane on the left that contans a bottom pane (the links to contacts, notes, etc.) and on the right side, I have a right pane that stores emails, contacts, etc.

Please do the following with th demo application from your website:

View the WebMail in maximized window, then collapse the left pane, then minimize the webmail so that the browser window gets smaller than in maximized mode and then expand the left pane again. Now, the bottom left pane inside the left pane can't be seen, because its position has not been updated.

Vice versa:
If you star the webMail application not in maximized mode, then collapse the left pane and then maximize the browser window and then expand the left pane again, the bottom left pane inside the left pane will be on the original position, but not at the bottom (as it would be expected to be).

I have tested mny possible solutions, but I didn't get a result. So I would kindly like to ask you if you have a workaround for me or could help to solve this problem!

I am looking forward to hearing from you soon,
Marco

[Fiko]

Hello Marco,

I was able to reproduce the problem. Please note that we used percent values for the RadSplitter3 (on the master page). In this case after the left pane is collapsed and then expanded again the topLeftPane occupies all of the available height and then the bottomLeftPane cannot fit its content in the view port. There is a simple solution for that issue - just enable scrolling of the leftPane :

<telerik:RadPane runat="Server" ID="leftPane" Width="240px" MinWidth="240" MaxWidth="600" Scrolling="Y">

and the bottom pane will be always available simply by scrolling.

I hope this helps.

Fiko
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.

[Marco]

Hallo Fiko,

thanks for your feedback. I tried the option but didn't get a satisfiying result. The bottom left pane still remains in the initial position when I havea "small" browser window, collapse the pane, then maximize the broser window and expand the pane again.

Then, the bottom left pane remains in the position, the "small" browser window (the bottom left position, the windows previously had). This behavior also occurs, when I do the scrolling around the y axis.

Any other idea?

Kind regards,
Marco

[Svetlina Anati]

Hi Marco,

As far as I understood the problem you describe is that the panes do not preserve their proportional size when they have been collapsed, you resize the browser and then expand them. If so,  this behavior  is the expected one because of the way the splitter works. When you collapse a RadPane, it "remembers" its size before it is collpased and when you expand it later it shows with this "old" size. We cannot expand it with the proportional size because there are various scenarios which will break in this case - e.g if other size has been set through client code or if the user resizes the RadPane by using the RadSplitBar before collapsing it, etc. This being said, keeping the proportions after the pane has been collapsed and the browser resized is correct only if all the RadPanes sizes are set in percentages and there are not any RadSplitBars which is not the common case.

I suggest to calculate the size of the RadPane and set it in the OnClientExpanded event e.g as shwon below:

 <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager" runat="server" />

        <script type="text/javascript">
        function Hide(id)
        {
        document.getElementById(id).control.Collapse(Telerik.Web.UI.SplitterDirection.Forward);
        }

        function Show(id)
        {
        document.getElementById(id).control.Expand(Telerik.Web.UI.SplitterDirection.Forward);
        }
        function OnClientExpand(sender, args)
        {
           sender.resize($find("<%=BottomSplitter.ClientID %>").get_width()/2 - sender.get_width(), 1);
        }
        </script>

        <telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%"
            Orientation="Horizontal">
            <telerik:RadPane ID="TopPane" runat="server" Height="30">
                <button id="HideLeft" onmouseover="Hide('LeftPane')">
                    Hide Left Pane</button>
                <button id="ShowLeft" onmouseover="Show('LeftPane')">
                    Show Left Pane</button>
            </telerik:RadPane>
            <telerik:RadPane ID="BottomPane" runat="server" Scrolling=None>
                <telerik:RadSplitter ID="BottomSplitter" runat="server">
                    <telerik:RadPane ID="LeftPane" runat="server" Width="50%" OnClientExpanded="OnClientExpand">
                        Left Pane
                    </telerik:RadPane>
                    <telerik:RadPane ID="RightPane" runat="server" Width="50%">
                        Right Pane
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadPane>
        </telerik:RadSplitter>
    </form>

Please, use this idea as a start point and direction and extend it further in order to fit in your particular case.

All the best,
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.