Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

[Solved] RadSplitter re-size issues with update panels

10 Answers 383 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Steve
Top achievements
Rank 1
Steve asked on 23 May 2013, 04:36 PM
Screen-1.png
Screen-2.png
Screen-3.png
Screen-4.png
Screen-5.png
document-add.png
document-edit.png
document-out.png
Hi

I am using Telerik version 2012.3.1308.40

I'm trying to get the full height/width scenario working with splitter controls, and have followed some of the other posts on here and thought I had it working, until I clicked a button and did a postback.

Attached as 5 screen shots which I will reference through this scenario and also the demo html will be shown here.

To start with here is my stylesheet.css I am using to get the desired look and feel for the master page and therefore web site.

*
{
    margin: 0;
    padding: 0;
}
 
html, body, form
{
    height: 100%;
    overflow: hidden;
}
 
.wrapper
{
    min-height: 100%;
    height: 100%;
    margin: 0 auto -59px; /* The bottom margin is the negative value of the footer's height */   
    position: relative;
}
 
.header
{
    height: 87px;
    background-color: Gray;
}
 
.menustretch
{
    height: 26px;
    background-color: Black;
}
 
.toolbar
{
    height: 68px;   
}
 
.content
{
    height: 100%;
}
 
.push
{
    height: 59px; /* .push must be the same height as .footer */
}
 
.footer
{
    height: 59px; /* .push must be the same height as .footer */
    background-color: Gray;
}


The master page is listed below:  This is made up of div's and then using a RadSplitter to hold the contentplaceholder.

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site.master.vb" Inherits="Telerik_RadSplitter_Demo.Site" %>
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<head runat="server">
    <title></title>
    <link href="../BaseLayout.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="wrapper">
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
 
            <div class="header">
            </div>
 
            <div class="menustretch">
            </div>
 
            <div class="toolbar">
                <telerik:RadToolBar ID="rtbMainToolbar" runat="server" Width="100%">
                    <Items>
                        <telerik:RadToolBarButton Text="New" ToolTip="Add new selection" ImagePosition="AboveText" ImageUrl="~/i/Enabled/document_add.png"></telerik:RadToolBarButton>
                        <telerik:RadToolBarButton Text="Open" ToolTip="Open existing selection" ImagePosition="AboveText" ImageUrl="~/i/Enabled/document_out.png"></telerik:RadToolBarButton>
                        <telerik:RadToolBarButton Text="Edit" ToolTip="Modify selection" ImagePosition="AboveText" ImageUrl="~/i/Enabled/document_edit.png"></telerik:RadToolBarButton>
                    </Items>
                </telerik:RadToolBar>
            </div>
 
            <div class="content">
                <telerik:RadSplitter ID="rsMainContent" runat="server" Width="100%" Height="100%" HeightOffset="240" ResizeWithBrowserWindow="true" ResizeWithParentPane="true">
                    <telerik:RadPane ID="rpMainContent" runat="server" Width="100%" Height="100%">
                        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
         
                        </asp:ContentPlaceHolder>
                    </telerik:RadPane>
                </telerik:RadSplitter>               
            </div>
             
            <div class="push"></div>
        </form>
    </div>
 
    <div class="footer"></div>
</body>
</html>

I've attached the 3 images used in the master page for the radtoolbar.

Then my page is based on the master page and the code is:

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Pages/Site.Master" CodeBehind="TestPage.aspx.vb" Inherits="Telerik_RadSplitter_Demo.TestPage" %>
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:UpdatePanel ID="upTest" runat="server">
        <ContentTemplate>
            <telerik:RadSplitter ID="rsSelections" runat="server" Width="100%" Height="100%" VisibleDuringInit="false" Orientation="Horizontal" Visible="true" ResizeWithBrowserWindow="true" ResizeWithParentPane="true">
                <telerik:RadPane ID="rpSelectionsHeader" runat="server" Height="31px">
                    <asp:Label ID="lblSelectionsHeader" runat="server" Text="Selections" BackColor="#541954" ForeColor="White" Height="25px"
                                                style="display: block; padding-left: 10px; padding-top: 6px;"></asp:Label>
                </telerik:RadPane>
 
                <telerik:RadPane ID="rpSelectionsBody" runat="server">
                    <telerik:RadTreeView ID="RadTreeView1" runat="server">
                        <Nodes>
                            <telerik:RadTreeNode Text="First Node" runat="server">
                                <Nodes>
                                    <telerik:RadTreeNode Text="Node 1" runat="server"></telerik:RadTreeNode>
                                    <telerik:RadTreeNode Text="Node 2" runat="server"></telerik:RadTreeNode>
                                    <telerik:RadTreeNode Text="Node 3" runat="server"></telerik:RadTreeNode>
                                    <telerik:RadTreeNode Text="Node 3" runat="server"></telerik:RadTreeNode>
                                </Nodes>
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Second Node" runat="server">
                                <Nodes>
                                    <telerik:RadTreeNode Text="Node 1" runat="server"></telerik:RadTreeNode>
                                    <telerik:RadTreeNode Text="Node 2" runat="server"></telerik:RadTreeNode>
                                    <telerik:RadTreeNode Text="Node 3" runat="server"></telerik:RadTreeNode>
                                    <telerik:RadTreeNode Text="Node 3" runat="server"></telerik:RadTreeNode>
                                </Nodes>
                            </telerik:RadTreeNode>
                        </Nodes>
                    </telerik:RadTreeView>                           
                </telerik:RadPane>
 
                <telerik:RadPane ID="rpSelectionsFooter" runat="server">
                    <telerik:RadButton ID="btnSelect" runat="server" Text="Select">
                    </telerik:RadButton>
                </telerik:RadPane>
            </telerik:RadSplitter>
 
            
            <telerik:RadSplitter ID="rsResults" runat="server" Width="100%" Height="100%" VisibleDuringInit="false" Orientation="Horizontal" Visible="false" ResizeWithBrowserWindow="true" ResizeWithParentPane="true">
                <telerik:RadPane ID="rpResultsHeader" runat="server" Height="31px">
                    <asp:Label ID="lblResultsHeader" runat="server" Text="Results" BackColor="#541954" ForeColor="White" Height="25px"
                                                style="display: block; padding-left: 10px; padding-top: 6px;"></asp:Label>
                </telerik:RadPane>
 
                <telerik:RadPane ID="rpResultsBody" runat="server">
                </telerik:RadPane>
 
                <telerik:RadPane ID="rpResultsFooter" runat="server">
                    <telerik:RadButton ID="btnResultsBack" runat="server" Text="Back">
                    </telerik:RadButton>
                </telerik:RadPane>
            </telerik:RadSplitter> 
        </ContentTemplate>
    </asp:UpdatePanel>         
</asp:Content>


When I run the web app and have the screen maximized I get the desired results (Screen 1.png).  If I minimize the screen and re-size it again the splitter is working as I would hope.  The screen re-sizes as in (Screen 2.png).

When I press the Select button the RadSplitter is hidden and another one is shown, to show the results.  This again is re-sized as I would expect. (Screen 3.png)

The problem now comes with the results showing grab the bottom right corner of the minimized screen and drag you can see the main splitter on the mater page re-sizes but the splitter in the update panel doesn't (Screen 4.png).

I have tried this without the update panel and it works better but of course you get the flash of the screen on postback.  Also it doesn't work totally correct as the first splitter retains it's layout until the screen is moved.  So if you re-size the screen to make it smaller, press the Select button, then make the screen smaller still, and press the back button, you get scroll bars as the first splitter hasn't re-sized. (Screen 5.png)

Any ideas or help much appreciated.

Thanks

Dale

10 Answers, 1 is accepted

Sort by
0
Dobromir
Telerik team
answered on 28 May 2013, 12:48 PM
nestedSplitters.zip
Hi Dale,

The problem that you experience is due to incorrect splitters' configuration. In the provided sample there are two splitters (splitters in the content page) nested in the same pane (pane of the splitter in the master page). RadPane does not support multiple splitter's nested inside it. To correct the configuration you should set ResizeWithParentPane property to the nested splitter's to False and to configure them manually and not by the parent Pane.

For your convenience I have prepared a sample page with the modified code, please find it attached.

On a side note, the splitter in the master page has only one pane. Please note, that this is also invalid splitter configuration and may cause unexpected behavior.

Regards,
Dobromir
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Steve
Top achievements
Rank 1
answered on 28 May 2013, 03:55 PM
Screen-1.png
Screen-2.png
Hi Dobromir,

Thanks for the example project, I understand the reasons for not putting two splitters inside 1 RadPane and can change the layout to reflect that, but the example you have given me still doesn't get me what I want with regards the content page filling the remaining screen between the header/menu/toolbar and footer.

After the changes you suggested with regards turning the ResizeWithParentPane to False I now get the following screen, (Screen 1.png).

You mention configuring them manually, can you elaborate on that for me as to what needs to be done to get them to fill the screen?

I also tried to change it so that there was only 1 RadSplitter per pane code below:  The screen then showed with scroll bars when maximised to the full.  (Screen 2.png)

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Pages/Site.Master" CodeBehind="SingleSplittersInPane.aspx.vb" Inherits="Telerik_RadSplitter_Demo.SingleSplittersInPane" %>
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
 
    <asp:UpdatePanel ID="upTest" runat="server">
        <ContentTemplate>
            <telerik:RadSplitter ID="rsWrapper" runat="server" Width="100%" Height="100%" VisibleDuringInit="false" Orientation="Horizontal" ResizeWithBrowserWindow="true" ResizeWithParentPane="true">
                <telerik:RadPane ID="rpSelections" runat="server" Height="100%" Width="100%">
                    <telerik:RadSplitter ID="rsSelections" runat="server" Width="100%" Height="100%" VisibleDuringInit="false" Orientation="Horizontal" ResizeWithBrowserWindow="true" ResizeWithParentPane="true">
                        <telerik:RadPane ID="rpSelectionsHeader" runat="server" Height="31px">
                            <asp:Label ID="lblSelectionsHeader" runat="server" Text="Selections" BackColor="#541954" ForeColor="White" Height="25px"
                                                style="display: block; padding-left: 10px; padding-top: 6px;"></asp:Label>
                        </telerik:RadPane>
                        <telerik:RadPane ID="rpSelectionsBody" runat="server">
                        </telerik:RadPane>
                        <telerik:RadPane ID="rpSelectionsFooter" runat="server">
                            <telerik:RadButton ID="btnSelect" runat="server" Text="Select">
                            </telerik:RadButton>
                        </telerik:RadPane>
                    </telerik:RadSplitter>
                </telerik:RadPane>
 
                <telerik:RadPane ID="rpResults" runat="server" Width="0%" Height="0%">
                    <telerik:RadSplitter ID="rsResults" runat="server" Width="100%" Height="100%" VisibleDuringInit="false" Orientation="Horizontal" ResizeWithBrowserWindow="true" ResizeWithParentPane="true">
                        <telerik:RadPane ID="rpResultsHeader" runat="server" Height="31px">
                            <asp:Label ID="lblResultsHeader" runat="server" Text="Results" BackColor="#541954" ForeColor="White" Height="25px"
                                                style="display: block; padding-left: 10px; padding-top: 6px;"></asp:Label>
                        </telerik:RadPane>
                        <telerik:RadPane ID="rpResultsBody" runat="server">
                        </telerik:RadPane>
                        <telerik:RadPane ID="rpResultsFooter" runat="server">
                            <telerik:RadButton ID="btnResultsBack" runat="server" Text="Back">
                            </telerik:RadButton>
                        </telerik:RadPane>
                    </telerik:RadSplitter>
                </telerik:RadPane>
            </telerik:RadSplitter>
        </ContentTemplate>
    </asp:UpdatePanel> 
 
</asp:Content>

You can ignore the Height and Width settings on the two panes as I was just playing with that instead of make each panel visible true/false.

Thanks

Dale
0
Vessy
Telerik team
answered on 31 May 2013, 01:56 PM
nestedSplitters-modified.zip
Hi Dale,

When you want a Splitter to take size in percentages, you have to make sure that all of its parent also have  size configured in percentages (up to a parent with a fixed size). You can find detailed information on the subject in the following online resources:
    Filling the Entire Page
    Specifying Size
    Resize with Window
    Full Window sample app

For your convenience I am attaching  the modified page with your code, so you can see how it should be configured properly. The changes I made were to remove the splitter from the Master page, set a style with height:100% to the UpdatePanel, wrapping the rsWrapper Splitter and applied the HeightOffset="240" to this Splitter.

I hope this would be helpful for you. Do not hesitate to contact us if any further questions appear.

Regards,
Veselina Raykova
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Steve
Top achievements
Rank 1
answered on 03 Jun 2013, 08:34 AM
Screen-1.png
Screen-2.png
Screen-3.png
Screen-4.png
Screen-5.png
Hi Veselina

Thanks for your reply.

I have made the changes you suggested and that has now removed the issue I was having with the fixed 400px after the first change.

I also now feel it's better without the splitter on the master page, as Dobromir also suggested that could cause issues.

The problem I have though is still there from my first post.  Whenever you press the RadButton and do a postback the screen changes the visible pane of the splitter, if you re-size the screen the current visible pane works as expected, but when you then press the Back button the original pane is still the same size as it was, and only re-sizes when you re-size the screen.

Steps:

Run the application and have the screen in full window mode, everything is correct on screen.  (Screen 1.png)

Press the Select buttons, and the rpSelections pane is made Visible=False and the rpResults pane is made Visible=True.  This is also correct.  (Screen 2.png)

Now take the screen out of full screen mode and minimize it.  You will see the splitter moves as expected.  (Screen 3.png).

Now press the Back button and the rpResults pane is made Visible=False and the rpSelections pane is made Visible=True.  You can now see that the original pane rpSelections when the screen re-sized in the step above has not re-sized but stayed the same size.  (Screen 4.png)

If you grab the bottom right of the screen and make it a bit larger you can see it then re-sizes as expected.  I wanted it to have re-sized in the background like the Visible pane does.

On another note if you keep re-sizing the screen to make it larger and then press the Select button again, the rpResults pane then comes back and it looks like it's fixed again at a certain height. (Screen 5.png)

Is there anyway of re-sizing the panes that are not visible on the splitter so that this issue does not happen?

Thanks

Dale
0
Vessy
Telerik team
answered on 06 Jun 2013, 07:08 AM
nestedSplitters.zip
Hi Dale,

The Splitter (in your case with ID="rsSelections" and ID="rsResults") is not able to calculate its size in percentages properly if it has initially not visible parent and so its ResizeWithParentPane property should be configured to "False", along with Width and Height set to 100%.

Additionally it is recommended to set the Scrolling="None" of the Panes, which have nested Splitters in them. In this case you will use the scroll-bars of the nested Splitter (if needed) and would prevent the preserving of the space for the Pane scroll-bars.

Please, find attached the modified page, according to the suggestions above.


Regards,
Veselina Raykova
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Steve
Top achievements
Rank 1
answered on 06 Jun 2013, 09:18 AM
Screen-1.png
Screen-2.png
Screen-3.png
Hi Veselina,

Thanks for the reply.

I have implemented the changes you suggested, but there is no difference in the behaviour of the splitters when re-sizing the screen and doing a button click.  The width seems to be ok, but it's the Height that's the issue.

The pane which is Visible=False still does not re-size the splitter correctly when shown after a re-size of screen.

The Master page hasn't changed so here is my testpage with the splitters to show I have what you suggested.

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Pages/Site.Master" CodeBehind="TestPage.aspx.vb" Inherits="FullHeightLayout.TestPage" %>
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:UpdatePanel ID="upTest" runat="server" style="height: 100%;">
        <ContentTemplate>     
            <telerik:RadSplitter ID="rsWrapper" runat="server" Width="100%" Height="100%" VisibleDuringInit="false" HeightOffset="240" Orientation="Horizontal" ResizeWithBrowserWindow="true" ResizeWithParentPane="true">
                <telerik:RadPane ID="rpSelections" runat="server" Scrolling="None">
                    <telerik:RadSplitter ID="rsSelections" runat="server" Width="100%" Height="100%" VisibleDuringInit="false" Orientation="Horizontal" ResizeWithBrowserWindow="true" ResizeWithParentPane="false">
                        <telerik:RadPane ID="rpSelectionsHeader" runat="server" Height="31">
                            <asp:Label ID="lblSelectionsHeader" runat="server" Text="Selections" BackColor="#541954" ForeColor="White" Height="25px"
                                                style="display: block; padding-left: 10px; padding-top: 6px;"></asp:Label>
                        </telerik:RadPane>
                        <telerik:RadPane ID="rpSelectionsBody" runat="server">
 
                        </telerik:RadPane>
                        <telerik:RadPane ID="rpSelectionsFooter" runat="server">
                            <telerik:RadButton ID="btnSelect" runat="server" Text="Select"></telerik:RadButton>
                        </telerik:RadPane>
                    </telerik:RadSplitter>
                </telerik:RadPane>
 
                <telerik:RadPane ID="rpResults" runat="server" Scrolling="None" Visible="false">
                    <telerik:RadSplitter ID="rsResults" runat="server" Width="100%" Height="100%" VisibleDuringInit="false" Orientation="Horizontal" ResizeWithBrowserWindow="true" ResizeWithParentPane="false">
                        <telerik:RadPane ID="rpResultsHeader" runat="server" Height="31">
                            <asp:Label ID="lblResultsHeader" runat="server" Text="Results" BackColor="#541954" ForeColor="White" Height="25px"
                                                style="display: block; padding-left: 10px; padding-top: 6px;"></asp:Label>
                        </telerik:RadPane>
                        <telerik:RadPane ID="rpResultsBody" runat="server">
 
                        </telerik:RadPane>
                        <telerik:RadPane ID="rpResultsFooter" runat="server">
                            <telerik:RadButton ID="btnBack" runat="server" Text="Back"></telerik:RadButton>
                        </telerik:RadPane>
                    </telerik:RadSplitter>
                </telerik:RadPane>
            </telerik:RadSplitter>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>


I've started the application non full screen to show again the quick issue.

(Screen 1.png) app launched, then click the Select button and rpResults is shown and it looks fine, re-size the screen (Screen 2.png), and click the back button you can see the splitter hasn't re-sized (Screen 3.png)  if you then re-size the screen it does work.

Thanks

Dale
0
Vessy
Telerik team
answered on 11 Jun 2013, 08:52 AM
Hello Dale,

Please, excuse me for the lapse - I have investigated the issue further, and it turns out that since the Splitter keeps its size in the ClientState, you will need to force its recalculation on every PostBack.

For example:
Default.aspx.cs

protected void btnSelect_Click(object sender, EventArgs e)
{
    rpSelections.Visible = !rpSelections.Visible;
    rpResults.Visible = !rsResults.Visible;
 
    if (rsResults.Visible)
    {
        rpResults.Height = Unit.Percentage(100);
        rpResults.Width = Unit.Percentage(100);
    }
    else
    {
        rpSelections.Height = Unit.Percentage(100);
        rpSelections.Width = Unit.Percentage(100);
    }
 
 
}
protected void btnResultsBack_Click(object sender, EventArgs e)
{
    rpSelections.Visible = !rpSelections.Visible;
    rpResults.Visible = !rpResults.Visible;
 
    if (rsResults.Visible)
    {
        rpResults.Height = Unit.Percentage(100);
        rpResults.Width = Unit.Percentage(100);
    }
    else
    {
        rpSelections.Height = Unit.Percentage(100);
        rpSelections.Width = Unit.Percentage(100);
    }
}

Please, give it a try and let me know how it goes.

Regards,
Veselina Raykova
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Steve
Top achievements
Rank 1
answered on 26 Jun 2013, 09:04 AM
Screen-1.png
Screen-2.png
Screen-3.png
Screen-4.png
Screen-5.png
document-add.png
document-edit.png
document-out.png
Hi Veselina

I've been away so only just had chance to try your suggestion, which I had already tried before to be honest.

Again there is no difference to the splitter controls height within the scenario I have described.  Again I have put some screenshots on to try to explain the issue.

1. Screen 1.png is the application running in full screen mode, when the app first launches.
2. Minimize the screen and the splitter does re-size as expected, Screen 2.png
3. Click the Select button and the rsSelections splitter is hidden and the rsResults splitter is shown.  Screen 3.png
4. re-size the screen to make it bigger in both height and width, Screen 4.png
5. Click the Back button and the rsResults splitter is hidden and the rsSelecitons splitter is shown, Screen 5.png

As you can clearly see the rsSelections splitter shown is not right and the height has not been maximized correctly.

In the postback events for the buttons I have the following code as you suggested.

Private Sub btnSelect_Click(sender As Object, e As EventArgs) Handles btnSelect.Click
    rsSelections.Visible = False
    rsResults.Visible = True
 
    If rsResults.Visible Then
        rsResults.Height = New Unit(100, UnitType.Percentage)
        rsResults.Width = New Unit(100, UnitType.Percentage)
    Else
        rsSelections.Height = New Unit(100, UnitType.Percentage)
        rsSelections.Width = New Unit(100, UnitType.Percentage)
    End If
End Sub
 
 
Private Sub btnBack_Click(sender As Object, e As EventArgs) Handles btnBack.Click
    rsResults.Visible = False
    rsSelections.Visible = True
 
    If rsResults.Visible Then
        rsResults.Height = New Unit(100, UnitType.Percentage)
        rsResults.Width = New Unit(100, UnitType.Percentage)
    Else
        rsSelections.Height = New Unit(100, UnitType.Percentage)
        rsSelections.Width = New Unit(100, UnitType.Percentage)
    End If
End Sub


I have removed the rsWrapper splitter from previous example as it was overkill and I was trying to get it down to the least amount of controls I could in order to find the issue.  So the master page is now:

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site.master.vb" Inherits="FullHeightLayout.Site" %>
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<!DOCTYPE html>
 
<head runat="server">
    <title></title>
    <link href="../BaseLayout.css" rel="stylesheet" />
</head>
<body>
    <div class="wrapper">
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
 
            <div class="header">
 
            </div>
 
            <div class="menustretch">
 
            </div>
 
            <div class="toolbar">
                <telerik:RadToolBar ID="rtbMainToolbar" runat="server" Width="100%">
                    <Items>
                        <telerik:RadToolBarButton Text="New" ToolTip="Add new selection" ImagePosition="AboveText" ImageUrl="../Images/document-add.png"></telerik:RadToolBarButton>
                        <telerik:RadToolBarButton Text="Open" ToolTip="Open existing selection" ImagePosition="AboveText" ImageUrl="../Images/document-out.png"></telerik:RadToolBarButton>
                        <telerik:RadToolBarButton Text="Edit" ToolTip="Modify selection" ImagePosition="AboveText" ImageUrl="../Images/document-edit.png"></telerik:RadToolBarButton>
                    </Items>
                </telerik:RadToolBar>
            </div>
 
            <div class="content">
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
         
                </asp:ContentPlaceHolder>
            </div>
 
            <div class="push">
 
            </div>
        </form>
    </div>
 
    <div class="footer">
 
    </div>
     
</body>
</html>


And the testpage which inherits is:

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Pages/Site.Master" CodeBehind="TestPage.aspx.vb" Inherits="FullHeightLayout.TestPage" %>
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:UpdatePanel ID="upTest" runat="server" style="height: 100%;">
        <ContentTemplate>     
 
            <telerik:RadSplitter ID="rsSelections" runat="server" Width="100%" Height="100%" VisibleDuringInit="false" HeightOffset="240" Orientation="Horizontal" ResizeWithBrowserWindow="true" ResizeWithParentPane="false" Visible="true">
                <telerik:RadPane ID="rpSelectionsHeader" runat="server" Height="31">
                    <asp:Label ID="lblSelectionsHeader" runat="server" Text="Selections" BackColor="#541954" ForeColor="White" Height="25px"
                                        style="display: block; padding-left: 10px; padding-top: 6px;"></asp:Label>
                </telerik:RadPane>
                <telerik:RadPane ID="rpSelectionsBody" runat="server">
 
                </telerik:RadPane>
                <telerik:RadPane ID="rpSelectionsFooter" runat="server">
                    <telerik:RadButton ID="btnSelect" runat="server" Text="Select"></telerik:RadButton>
                </telerik:RadPane>
            </telerik:RadSplitter>
 
            <telerik:RadSplitter ID="rsResults" runat="server" Width="100%" Height="100%" VisibleDuringInit="false" HeightOffset="240" Orientation="Horizontal" ResizeWithBrowserWindow="true" ResizeWithParentPane="false" Visible="false">
                <telerik:RadPane ID="rpResultsHeader" runat="server" Height="31">
                    <asp:Label ID="lblResultsHeader" runat="server" Text="Results" BackColor="#541954" ForeColor="White" Height="25px"
                                        style="display: block; padding-left: 10px; padding-top: 6px;"></asp:Label>
                </telerik:RadPane>
                <telerik:RadPane ID="rpResultsBody" runat="server">
 
                </telerik:RadPane>
                <telerik:RadPane ID="rpResultsFooter" runat="server">
                    <telerik:RadButton ID="btnBack" runat="server" Text="Back"></telerik:RadButton>
                </telerik:RadPane>
            </telerik:RadSplitter>
             
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

BaseLayout.CSS

*
{
    margin: 0;
    padding: 0;
}
 
html, body, form
{
    height: 100%;
    overflow: hidden;
}
 
.wrapper
{
    min-height: 100%;
    height: 100%;
    margin: 0 auto -59px; /* The bottom margin is the negative value of the footer's height */   
    position: relative;
}
 
.header
{
    height: 87px;
    background-color: Gray;
}
 
.menustretch
{
    height: 26px;
    background-color: Black;
}
 
.toolbar
{
    height: 68px;   
}
 
.content
{
    height: 100%;
}
 
.push
{
    height: 59px; /* .push must be the same height as .footer */
}
 
.footer
{
    height: 59px; /* .push must be the same height as .footer */
    background-color: Gray;
}


Any other ideas on how to get this to re-size properly?  Is there a way to force the splitter control to redraw itself after setting the height and width perhaps?

Thanks

Dale
0
Accepted
Vessy
Telerik team
answered on 29 Jun 2013, 04:32 PM
nestedSplitters.zip
Hello Dale,

The only way to force a Splitter to recalculate its size is to reset the size of its Panes. Setting the size just of the Splitter itself will not update its children. The reason why this approach is working properly in my previous reply is that when a Splitter is nested in another Splitter it inherits the size of its parent Pane and so we are updating its dimensions.

With you latest markup, where the wrapping splitter is removed, you will need to iterate through all of the Panes of the currently visible Splitter, e.g:
Private Sub btnSelect_Click(sender As Object, e As EventArgs) Handles btnSelect.Click
    rsSelections.Visible = False
    rsResults.Visible = True
 
    If rsResults.Visible Then
        'rsResults.Height = New Unit(100, UnitType.Percentage)
        'rsResults.Width = New Unit(100, UnitType.Percentage)
        rpResultsHeader.Height = New Unit(31, UnitType.Pixel)
        rpResultsHeader.Width = New Unit(100, UnitType.Percentage)
        rpResultsBody.Height = Unit.Empty
        rpResultsBody.Width = New Unit(100, UnitType.Percentage)
        rpResultsFooter.Height = Unit.Empty
        rpResultsFooter.Width = New Unit(100, UnitType.Percentage)
    Else
        'rsSelections.Height = New Unit(100, UnitType.Percentage)
        'rsSelections.Width = New Unit(100, UnitType.Percentage)
        rpSelectionsHeader.Height = New Unit(31, UnitType.Pixel)
        rpSelectionsHeader.Width = New Unit(100, UnitType.Percentage)
        rpSelectionsBody.Height = Unit.Empty
        rpSelectionsBody.Width = New Unit(100, UnitType.Percentage)
        rpSelectionsFooter.Height = Unit.Empty
        rpSelectionsFooter.Width = New Unit(100, UnitType.Percentage)
    End If
End Sub
 
 
Private Sub btnBack_Click(sender As Object, e As EventArgs) Handles btnBack.Click
    rsResults.Visible = False
    rsSelections.Visible = True
 
    If rsResults.Visible Then
        'rsResults.Height = New Unit(100, UnitType.Percentage)
        'rsResults.Width = New Unit(100, UnitType.Percentage)
        rpResultsHeader.Height = New Unit(31, UnitType.Pixel)
        rpResultsHeader.Width = New Unit(100, UnitType.Percentage)
        rpResultsBody.Height = Unit.Empty
        rpResultsBody.Width = New Unit(100, UnitType.Percentage)
        rpResultsFooter.Height = Unit.Empty
        rpResultsFooter.Width = New Unit(100, UnitType.Percentage)
    Else
        'rsSelections.Height = New Unit(100, UnitType.Percentage)
        'rsSelections.Width = New Unit(100, UnitType.Percentage)
        rpSelectionsHeader.Height = New Unit(31, UnitType.Pixel)
        rpSelectionsHeader.Width = New Unit(100, UnitType.Percentage)
        rpSelectionsBody.Height = Unit.Empty
        rpSelectionsBody.Width = New Unit(100, UnitType.Percentage)
        rpSelectionsFooter.Height = Unit.Empty
        rpSelectionsFooter.Width = New Unit(100, UnitType.Percentage)
    End If
End Sub

For your convenience I am attaching two sample pages - one with and one without a wrapping Splitter, so you can investigate their configurations on your side.

I hope that this information will be helpful in coping with the Splitter's resizing.

Regards,
Veselina Raykova
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Steve
Top achievements
Rank 1
answered on 01 Jul 2013, 08:32 AM
Hi Veselina

Thanks for that, and your patience in getting to the bottom of the issue.

Thanks

Dale
Tags
Splitter
Asked by
Steve
Top achievements
Rank 1
Answers by
Dobromir
Telerik team
Steve
Top achievements
Rank 1
Vessy
Telerik team
Share this question
or