Resize RadSplitter to 100% Inside a RadMultiPage

4 posts, 1 answers
  1. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 26 Nov 2014 Link to this post

    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.
  2. Answer
    Vessy
    Admin
    Vessy avatar
    1389 posts

    Posted 27 Nov 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 01 Dec 2014 in reply to Vessy Link to this post

    Hello Vessy,

    Thank you for your answer!

    You helped me a lot.

    Sincerely,
    Daniel.
  5. Vessy
    Admin
    Vessy avatar
    1389 posts

    Posted 02 Dec 2014 Link to this post

    Hi,

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

    Regards,
    Vessy
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top