I have a page with a master page in a C# 4.0 Web app (Visual Studio 2012.)
From my reading I am aware that there are potential problems in making a RadSplitter fill a page.
This page consists of 3 horizontal sections on the left and one vertical one on the right.
Up till now this page has been operated using Javascript to expose/hide controls and expand/collapse the RadPaneForm control.
Basically, the expand/collapse of RadPaneForm needs to be controlled by a RadComboBox in the center left section of the splitter.
I've been trying to 'Ajax-ify' the splitter in order to replace the JavaScript with code-behind C#.
(And for once I've had the time and ability to boil the problem down to a demo. Here it is.
The page has no code-behind in either the master page or the TestPage. Note that there are two RadComboBoxes in Panel1.
The problem is as follows: The splitter displays at half page height unless I remove one of the RadComboBoxes. Then it displays at full height.
Master Page html:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="SiteTest.Master.cs" Inherits="WebApplicationSplitterTest.SiteTest" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body >
<form id="form1" runat="server" >
<asp:ContentPlaceHolder ID="cph1" runat="server">
</asp:ContentPlaceHolder>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
</Scripts>
</telerik:RadScriptManager>
<header>
</header>
<div id="ParentDivElement" style="height:85%">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<div style="text-align: center; margin: auto; margin-left: auto; margin-right: auto; width: 100%; margin-bottom: auto;height:20px">
<br />
<br />
<p> This is a footer</p>
</div>
</form>
</body>
</html>
Main Page HTML:
<%@ Page Language="C#" Async="true" MasterPageFile="~/SiteTest.Master" AutoEventWireup="true" CodeBehind="TestPage.aspx.cs" Inherits="WebApplicationSplitterTest.TestPage" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadSplitter1">
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="ddlOne">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="ddlTwo" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="ddlTwo">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadSplitter1" />
<telerik:AjaxUpdatedControl ControlID="Panel1" />
<telerik:AjaxUpdatedControl ControlID="Panel2" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadInputManager ID="RadInputManager1" runat="server">
</telerik:RadInputManager>
<telerik:RadWindowManager ID="RadWindowManager1" runat="server" VisibleStatusbar="false" VisibleTitlebar="true" Width="600px">
</telerik:RadWindowManager>
<script src="Scripts/jquery-1.7.1.js"></script>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<style type="text/css">
html, body, form {
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
</telerik:RadCodeBlock>
<telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%" HeightOffset="20" Orientation="Vertical" >
<telerik:RadPane ID="RadpaneTicket" runat="server" Height="100%" Width="70%" Scrolling="Y" >
<telerik:RadSplitter runat="server" Height="100%" Width="100%" Orientation="Horizontal">
<telerik:RadPane ID="RadPane1" runat="server" Scrolling="None" Height="25px">
<div style="width: 100%; text-align: center">
<asp:Label ID="lblAnnouncements" runat="server" Text='Announcements' Font-Bold="True" ForeColor="Blue" Font-Size="Large"></asp:Label>
</div>
</telerik:RadPane>
<telerik:RadSplitBar ID="RadSplitBar3" runat="server" Visible="false"></telerik:RadSplitBar>
<telerik:RadPane ID="RadpaneAnnouncements" runat="server" Height="15%" Scrolling="Both" BackColor="AliceBlue">
<div style="width: 100%; text-align: center;">
<asp:Label ID="lblNone" runat="server" Text='There are no current announcements' Visible="false" Font-Bold="True" BackColor="AliceBlue" ForeColor="Black" Font-Size="Large"></asp:Label>
</div>
<div style="width: 95%; height: 100%; margin-left: auto; margin-right: auto">
</div>
</telerik:RadPane>
<telerik:RadSplitBar ID="RadSplitBar2" runat="server" ></telerik:RadSplitBar>
<telerik:RadPane runat="server" Scrolling="Y" >
<telerik:RadSplitter ID="RadSplitterEditor" runat="server" >
<telerik:RadPane ID="RadPaneEditor" runat="server">
<table style="width: 100%; height: 100%; margin-top: auto; margin-bottom:auto">
<tr>
<td colspan="2">
<asp:ValidationSummary ID="ValidationSummary2" runat="server" Font-Bold="True" ForeColor="Red" />
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr style="width: 100%; vertical-align: top; height: 5%;">
<td style="text-align: left;" colspan="2">
<asp:Panel ID="Panel1" runat="server" Width="100%" Height="100%" >
<telerik:RadComboBox ID="ddlOne" runat="server"
Height="100px" Label="RadComboBox 1" Sort="Ascending" NoWrap="true" Font-Size="Large" Width="301px" Font-Names="Arial" AutoPostBack="true" CausesValidation="False">
</telerik:RadComboBox>
<telerik:RadComboBox ID="ddlTwo" runat="server"
Height="200px" Label="RadComboBox2" Sort="Ascending" NoWrap="True" Font-Size="Large" Width="275px" Font-Names="Arial" AutoPostBack="true" >
</telerik:RadComboBox>
</asp:Panel>
</td>
</tr>
<tr>
<td style="width: 100%; height: 85%" colspan="2">
</td>
</tr>
</table>
<div>
<telerik:RadProgressManager ID="RadProgressManager1" runat="server" />
<telerik:RadProgressArea ID="RadProgressArea1" runat="server" ProgressIndicators="TotalProgressBar, TotalProgress, TotalProgressPercent, RequestSize, FilesCountBar, FilesCount, SelectedFilesCount, CurrentFileName, TimeElapsed, TimeEstimated, TransferSpeed"></telerik:RadProgressArea>
</div>
</telerik:RadPane>
<telerik:RadSplitBar ID="RadSplitBarForm" runat="server"></telerik:RadSplitBar>
<telerik:RadPane ID="RadPaneForm" runat="server" Scrolling="Both" Collapsed="false" Width="100%" Height="100%">
<asp:Panel ID="Panel2" runat="server">
</asp:Panel>
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadPane>
<telerik:RadSplitBar ID="RadSplitBar5" runat="server" EnableResize="false">
</telerik:RadSplitBar>
<telerik:RadPane ID="RadPane3" runat="server" Height="40px" Scrolling="None" Width="100%" >
<table style="width:100%">
<tr style="height: 40px; width:100%">
<td style="width: 70%; float: left;">
<telerik:RadUpload ID="RadUpload1" runat="server" ControlObjectsVisibility="ClearButtons" TargetFolder="~/Files" InputSize="40" ></telerik:RadUpload>
</td>
<td style="width: 25%; float: right; text-align: right;">
<telerik:RadButton ID="btnSave" runat="server" Text="Save" ></telerik:RadButton>
  
<telerik:RadButton ID="btnCancel" runat="server" Text="Clear" CausesValidation="False" ></telerik:RadButton>
</td>
</tr>
</table>
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadPane>
<telerik:RadSplitBar ID="RadSplitBar1" runat="server"></telerik:RadSplitBar>
<telerik:RadPane ID="RadPaneRightSide" runat="server" Width="30%" Height="15%" Scrolling="None">
<telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Horizontal">
<telerik:RadPane ID="RadPane2" runat="server" Scrolling="None" Height="25px">
<div style="width: 100%; text-align: center">
<asp:Label ID="Label2" runat="server" Text='System Status' Font-Bold="True" ForeColor="Blue" Font-Size="Large"></asp:Label>
</div>
</telerik:RadPane>
<telerik:RadSplitBar ID="RadSplitBar4" runat="server" Visible="false"></telerik:RadSplitBar>
<telerik:RadPane ID="RadPaneSys" runat="server" Scrolling="Both" Height="100%">
<div style="width: 95%; margin-left: auto; margin-right: auto;">
</div>
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadPane>
</telerik:RadSplitter>
</asp:Content>
From my reading I am aware that there are potential problems in making a RadSplitter fill a page.
This page consists of 3 horizontal sections on the left and one vertical one on the right.
Up till now this page has been operated using Javascript to expose/hide controls and expand/collapse the RadPaneForm control.
Basically, the expand/collapse of RadPaneForm needs to be controlled by a RadComboBox in the center left section of the splitter.
I've been trying to 'Ajax-ify' the splitter in order to replace the JavaScript with code-behind C#.
(And for once I've had the time and ability to boil the problem down to a demo. Here it is.
The page has no code-behind in either the master page or the TestPage. Note that there are two RadComboBoxes in Panel1.
The problem is as follows: The splitter displays at half page height unless I remove one of the RadComboBoxes. Then it displays at full height.
Master Page html:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="SiteTest.Master.cs" Inherits="WebApplicationSplitterTest.SiteTest" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body >
<form id="form1" runat="server" >
<asp:ContentPlaceHolder ID="cph1" runat="server">
</asp:ContentPlaceHolder>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
</Scripts>
</telerik:RadScriptManager>
<header>
</header>
<div id="ParentDivElement" style="height:85%">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<div style="text-align: center; margin: auto; margin-left: auto; margin-right: auto; width: 100%; margin-bottom: auto;height:20px">
<br />
<br />
<p> This is a footer</p>
</div>
</form>
</body>
</html>
Main Page HTML:
<%@ Page Language="C#" Async="true" MasterPageFile="~/SiteTest.Master" AutoEventWireup="true" CodeBehind="TestPage.aspx.cs" Inherits="WebApplicationSplitterTest.TestPage" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadSplitter1">
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="ddlOne">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="ddlTwo" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="ddlTwo">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadSplitter1" />
<telerik:AjaxUpdatedControl ControlID="Panel1" />
<telerik:AjaxUpdatedControl ControlID="Panel2" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadInputManager ID="RadInputManager1" runat="server">
</telerik:RadInputManager>
<telerik:RadWindowManager ID="RadWindowManager1" runat="server" VisibleStatusbar="false" VisibleTitlebar="true" Width="600px">
</telerik:RadWindowManager>
<script src="Scripts/jquery-1.7.1.js"></script>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<style type="text/css">
html, body, form {
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
</telerik:RadCodeBlock>
<telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%" HeightOffset="20" Orientation="Vertical" >
<telerik:RadPane ID="RadpaneTicket" runat="server" Height="100%" Width="70%" Scrolling="Y" >
<telerik:RadSplitter runat="server" Height="100%" Width="100%" Orientation="Horizontal">
<telerik:RadPane ID="RadPane1" runat="server" Scrolling="None" Height="25px">
<div style="width: 100%; text-align: center">
<asp:Label ID="lblAnnouncements" runat="server" Text='Announcements' Font-Bold="True" ForeColor="Blue" Font-Size="Large"></asp:Label>
</div>
</telerik:RadPane>
<telerik:RadSplitBar ID="RadSplitBar3" runat="server" Visible="false"></telerik:RadSplitBar>
<telerik:RadPane ID="RadpaneAnnouncements" runat="server" Height="15%" Scrolling="Both" BackColor="AliceBlue">
<div style="width: 100%; text-align: center;">
<asp:Label ID="lblNone" runat="server" Text='There are no current announcements' Visible="false" Font-Bold="True" BackColor="AliceBlue" ForeColor="Black" Font-Size="Large"></asp:Label>
</div>
<div style="width: 95%; height: 100%; margin-left: auto; margin-right: auto">
</div>
</telerik:RadPane>
<telerik:RadSplitBar ID="RadSplitBar2" runat="server" ></telerik:RadSplitBar>
<telerik:RadPane runat="server" Scrolling="Y" >
<telerik:RadSplitter ID="RadSplitterEditor" runat="server" >
<telerik:RadPane ID="RadPaneEditor" runat="server">
<table style="width: 100%; height: 100%; margin-top: auto; margin-bottom:auto">
<tr>
<td colspan="2">
<asp:ValidationSummary ID="ValidationSummary2" runat="server" Font-Bold="True" ForeColor="Red" />
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr style="width: 100%; vertical-align: top; height: 5%;">
<td style="text-align: left;" colspan="2">
<asp:Panel ID="Panel1" runat="server" Width="100%" Height="100%" >
<telerik:RadComboBox ID="ddlOne" runat="server"
Height="100px" Label="RadComboBox 1" Sort="Ascending" NoWrap="true" Font-Size="Large" Width="301px" Font-Names="Arial" AutoPostBack="true" CausesValidation="False">
</telerik:RadComboBox>
<telerik:RadComboBox ID="ddlTwo" runat="server"
Height="200px" Label="RadComboBox2" Sort="Ascending" NoWrap="True" Font-Size="Large" Width="275px" Font-Names="Arial" AutoPostBack="true" >
</telerik:RadComboBox>
</asp:Panel>
</td>
</tr>
<tr>
<td style="width: 100%; height: 85%" colspan="2">
</td>
</tr>
</table>
<div>
<telerik:RadProgressManager ID="RadProgressManager1" runat="server" />
<telerik:RadProgressArea ID="RadProgressArea1" runat="server" ProgressIndicators="TotalProgressBar, TotalProgress, TotalProgressPercent, RequestSize, FilesCountBar, FilesCount, SelectedFilesCount, CurrentFileName, TimeElapsed, TimeEstimated, TransferSpeed"></telerik:RadProgressArea>
</div>
</telerik:RadPane>
<telerik:RadSplitBar ID="RadSplitBarForm" runat="server"></telerik:RadSplitBar>
<telerik:RadPane ID="RadPaneForm" runat="server" Scrolling="Both" Collapsed="false" Width="100%" Height="100%">
<asp:Panel ID="Panel2" runat="server">
</asp:Panel>
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadPane>
<telerik:RadSplitBar ID="RadSplitBar5" runat="server" EnableResize="false">
</telerik:RadSplitBar>
<telerik:RadPane ID="RadPane3" runat="server" Height="40px" Scrolling="None" Width="100%" >
<table style="width:100%">
<tr style="height: 40px; width:100%">
<td style="width: 70%; float: left;">
<telerik:RadUpload ID="RadUpload1" runat="server" ControlObjectsVisibility="ClearButtons" TargetFolder="~/Files" InputSize="40" ></telerik:RadUpload>
</td>
<td style="width: 25%; float: right; text-align: right;">
<telerik:RadButton ID="btnSave" runat="server" Text="Save" ></telerik:RadButton>
  
<telerik:RadButton ID="btnCancel" runat="server" Text="Clear" CausesValidation="False" ></telerik:RadButton>
</td>
</tr>
</table>
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadPane>
<telerik:RadSplitBar ID="RadSplitBar1" runat="server"></telerik:RadSplitBar>
<telerik:RadPane ID="RadPaneRightSide" runat="server" Width="30%" Height="15%" Scrolling="None">
<telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Horizontal">
<telerik:RadPane ID="RadPane2" runat="server" Scrolling="None" Height="25px">
<div style="width: 100%; text-align: center">
<asp:Label ID="Label2" runat="server" Text='System Status' Font-Bold="True" ForeColor="Blue" Font-Size="Large"></asp:Label>
</div>
</telerik:RadPane>
<telerik:RadSplitBar ID="RadSplitBar4" runat="server" Visible="false"></telerik:RadSplitBar>
<telerik:RadPane ID="RadPaneSys" runat="server" Scrolling="Both" Height="100%">
<div style="width: 95%; margin-left: auto; margin-right: auto;">
</div>
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadPane>
</telerik:RadSplitter>
</asp:Content>