Resize RadSplitter to 100% Inside a RadMultiPage

[Daniel]

Hello,

My project contains a RadSplitter. It contains: RadTabStrip and RadMultiPage. Inside the RadMultiPage there is a RadPageView. Inside the RadPageView there is another RadSplitter.

The RadSplitter contains 3 RadPanes: RadPane_Header, RadPane_Main and RadPane_Footer. The RadPane_Header and the RadPane_Footer have a fixed size in pixels. The RadPane_Main should fill all the remaining space. The project’s requirements are that the RadPane_Header should dock to top of the page and the RadPane_Footer should dock to the bottom of the page. Also, it is required that the internal RadSplitter will fill 100% of the RadPageView’s size.

Currently the inner splitter’s size is much smaller than the size of the page.
Only when the user resizes the browser’s window, the inner splitter changes its size to the appropriate size, i.e. it resizes to fill the whole page.

Please see the following video:
http://youtu.be/uMm2FJEO4Ic


My code:

html, body, form, RadPageView
{
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}
    .ContentPane {
        height: auto !important;
    }

<div id="ParentDivElement" style="height: 100%;">
        <telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%"
            Orientation="Horizontal" Skin="Outlook">
            <telerik:RadPane ID="TopPane" runat="server" Height="100" MinHeight="85" MaxHeight="150"
                Scrolling="none">
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadsplitbarTop" runat="server" CollapseMode="Forward" />
            <telerik:RadPane ID="MainPane" runat="server" Scrolling="none" MinWidth="500">
                <telerik:RadSplitter ID="NestedSplitter" runat="server" Skin="Outlook" LiveResize="true">
                    <telerik:RadPane ID="LeftPane" runat="server" Width="200" MinWidth="150" MaxWidth="400"></telerik:RadPane>
                    <telerik:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="Forward" />
                    <telerik:RadPane ID="ContentPane" runat="server" CssClass="ContentPane">
                        <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" SelectedIndex="0">
                            <Tabs>
                                <telerik:RadTab Text="Grid" Value="Grid1"></telerik:RadTab>
                                <telerik:RadTab Text="Chart" Value="Chart1"></telerik:RadTab>
                                <telerik:RadTab Text="Grid_Chart" Value="Grid_Chart"></telerik:RadTab>
                            </Tabs>
                        </telerik:RadTabStrip>
                        <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0">
                            <telerik:RadPageView ID="RadPageView1" runat="server"></telerik:RadPageView>
                            <telerik:RadPageView ID="RadPageView2" runat="server">
                                <div id="Div1" style="height: 100%;">
                                    <telerik:RadSplitter ID="RadSplitter_Chart" runat="server" Orientation="Horizontal" Height="100%" Width="100%">
                                        <telerik:RadPane ID="RadPane_Chart_Header" runat="server" Height="40">RadPane_Chart_Header</telerik:RadPane>
                                        <telerik:RadPane ID="RadPane_Chart_Main" runat="server" CssClass="RadPane_Chart_Main">RadPane_Chart_Main
                                            <telerik:RadGrid ID="RadGrid3" runat="server"></telerik:RadGrid></telerik:RadPane>
                                        <telerik:RadPane ID="RadPane1" runat="server" Height="50">RadPane_Chart_Header</telerik:RadPane>
                                    </telerik:RadSplitter></div>
                            </telerik:RadPageView>
                            <telerik:RadPageView ID="RadPageView3" runat="server"></telerik:RadPageView>
                        </telerik:RadMultiPage></telerik:RadPane>
                </telerik:RadSplitter></telerik:RadPane>
        </telerik:RadSplitter>
    </div>

 

How can I solve this?

Thank you,
Daniel.

[Vessy]

Hi Daniel,

The experienced problem is caused by the fact the Splitter is placed into initially not visible parent and so it cannot calculate its size properly. In order to fix the issue you will need to add two more configurations:

• set the TabStrip's AutoPostBack property to "true":
• set the MultiPage's RenderSelectedPageOnly property to "true"

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" SelectedIndex="0" AutoPostBack="true">
    <Tabs>
        <telerik:RadTab Text="Grid" Value="Grid1"></telerik:RadTab>
        <telerik:RadTab Text="Chart" Value="Chart1"></telerik:RadTab>
        <telerik:RadTab Text="Grid_Chart" Value="Grid_Chart"></telerik:RadTab>
    </Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" RenderSelectedPageOnly="true">
    <telerik:RadPageView ID="RadPageView1" runat="server"></telerik:RadPageView>
    <telerik:RadPageView ID="RadPageView2" runat="server">
       ...
    </telerik:RadPageView>
    <telerik:RadPageView ID="RadPageView3" runat="server"></telerik:RadPageView>
</telerik:RadMultiPage>

Furthermore, I would suggest that you consider adding one additional Splitter with two panes - one holding the TabStrip, and one holding the Multipage. In this case you will avoid wrong MultiPage height calculation and the auto height CSS will not be needed:

<telerik:RadPane ID="ContentPane" runat="server" CssClass="ContentPane" Scrolling="None">
    <telerik:RadSplitter ID="AdditionalSplitter1" runat="server" Orientation="Horizontal">
        <telerik:RadPane ID="AdditionalPane1" runat="server" Height="25px">
            <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" SelectedIndex="0" AutoPostBack="true">
                ...
            </telerik:RadTabStrip>
        </telerik:RadPane>
        <telerik:RadPane ID="AdditionalPane2" runat="server">
            <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" RenderSelectedPageOnly="true">
                ...
            </telerik:RadMultiPage>
        </telerik:RadPane>
    </telerik:RadSplitter>
</telerik:RadPane>

Additionally, please note that neither RadSplitter does not support auto height CSS styling and it is highly recommended not to use such configurations. I am attaching a sample page with your code modified per the suggestions above, so you can examine it on your side.

Regards,
Vessy
Telerik

 

 

[Daniel]

Hello Vessy,

Thank you for your answer!

You helped me a lot.

Sincerely,
Daniel.

[Vessy]

Hi,

You are welcome, Daniel. Feel free to conct us again should we can be of any further assistance.

Regards,
Vessy
Telerik

 

 

[Mike]

Hi,

I know this is an old post, but i was wondering if there was any way to solve this problem without rendering each page separately and posting to the server to switch pages? Not only do i want to avoid posting back, RenderSelectedPageOnly="true" is causing issues with nested controls that have been ajaxified with the RadAjaxManager. I'm aware that I can (probably) resolve this issue by programmatically adding the Ajax settings when I switch pages, but I would like to avoid this and declare them programmatically in markup.

Thanks.

[Vessy]

Hi Mike,

I am afraid to say that, but there is no another way to nest RadMultiPage inside a Splitter at the moment in case that the sum of all Splitters inside the configured PageViews is more than 1.

If you have a Splitter only in one of the PageViews, though, you can try the following approach:
 - Set the Height of RadMultiPage and the target PageView to 100%;
 - Set the ResizeWithParentPane property of the target Splitter to false.

For convenience I am attaching a sample page demonstrating this approach.

Another possible option you cna consider is resizing the Splitter manually on the client in a similar way (but resizing it depending on its wrapper height, but not its content one):
http://www.telerik.com/support/kb/aspnet-ajax/splitter/details/initially-resize-the-radsplitter-according-to-its-content

Regards,
Vessy
Telerik by Progress

[Mike]

Hi,

Thanks for the response. For now I am posting back using the AjaxManager and it is performing nicely.

Thanks for the ideas,

mike