Resize RadSplitter to 100% Inside a RadMultiPage

7 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
    1621 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. 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.
  4. Vessy
    Admin
    Vessy avatar
    1621 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.

     
  5. Mike
    Mike avatar
    13 posts
    Member since:
    Feb 2017

    Posted 20 Apr in reply to Vessy Link to this post

    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.

  6. Vessy
    Admin
    Vessy avatar
    1621 posts

    Posted 21 Apr Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Mike
    Mike avatar
    13 posts
    Member since:
    Feb 2017

    Posted 26 Apr in reply to Vessy Link to this post

    Hi,

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

    Thanks for the ideas,

    mike

Back to Top