This is a migrated thread and some comments may be shown as answers.

Resize RadSplitter to 100% Inside a RadMultiPage

6 Answers 278 Views

Splitter

This is a migrated thread and some comments may be shown as answers.

Daniel asked on 26 Nov 2014, 10:04 AM

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.

6 Answers, 1 is accepted

Accepted

answered on 27 Nov 2014, 12:56 PM

Splitter.zip

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.

answered on 20 Apr 2017, 10:08 PM

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.

answered on 21 Apr 2017, 08:02 AM

Splitter.zip

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.