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

Splitter Height when using RadAjaxManager

2 Answers 98 Views

Splitter

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

Jason Bourdette asked on 14 Feb 2015, 01:28 AM

I'm trying to resize a splitter using the HeightOffset="60" property. It works perfect until I add a RadAjaxManager to the page. After that the splitter no longer takes up the full screen like i want it too. This is a simple example just to demo my issue. Obviously i need to keep the radajaxmanager otherwise i would just remove it. Thanks. Any help would be great!!!

Notice in the code below it does not size correctly, but if i remove the radajaxmanager block it works perfect.
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadGrid1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="LatePanel" LoadingPanelID="RadAjaxLoadingPanel1"/>
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>

<%@ Page Language="C#" %>

<%@ Import Namespace="System.Data" %>

<!DOCTYPE html>

<script runat="server">

protected void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)

{

DataTable dt = new DataTable();

dt.Columns.Add("EmployeeID");

dt.Columns.Add("LastName");

dt.Columns.Add("FirstName");

dt.Columns.Add("Title");

dt.Columns.Add("ReportsTo");

dt.Rows.Add(new object[] { 1, "Davalio", "Nancy", "Sales Representative", 2 });

dt.Rows.Add(new object[] { 2, "Fuller", "Andrew", "Vice President, Sales", null });

dt.Rows.Add(new object[] { 3, "Leverling", "Janet", "Sales Representative", 2 });

dt.Rows.Add(new object[] { 4, "Peacock", "Margaret", "Sales Representative", 2 });

(sender as RadGrid).DataSource = dt;

}

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style>

html,

body,

form {

height: 100%;

width: 100%;

margin: 0px;

padding: 0px;

}

.header {

width: 100%;

height: 20px;

background: blue;

color: white;

}

.menu {

width: 100%;

height: 20px;

background: black;

color: white;

}

.footer {

height: 20px;

width: 100%;

background: blue;

color: white;

position: absolute;

bottom: 0;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableTheming="True">

</telerik:RadScriptManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="LatePanel" LoadingPanelID="RadAjaxLoadingPanel1"/>

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<div class="header">Header</div>

<div class="menu">Menu</div>

<asp:Panel ID="LatePanel" runat="server" Height="100%" Width="100%" >

<telerik:RadSplitter runat="server" id="InnerSplitter" Orientation="Vertical" VisibleDuringInit="false" Width="100%" Height="100%" HeightOffset="60">

<telerik:RadPane ID="LeftMenuPane" runat="server" Scrolling="None" BackColor="SteelBlue" Width="27%" >

right

</telerik:RadPane>

<telerik:RadSplitBar runat="server" id="RadSplitBar4" />

<telerik:RadPane ID="RightMenuPane" runat="server" Scrolling="None" BackColor="Tomato" >

<%-- >>RADGRID--%>

<telerik:RadGrid ID="RadGrid1" Height="100%" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource"

AllowSorting="true">

<ClientSettings EnablePostBackOnRowClick="true" EnableRowHoverStyle="true">

<Selecting AllowRowSelect="true" />

<Scrolling AllowScroll="True" UseStaticHeaders="True" />

</ClientSettings>

<MasterTableView Width="100%" TableLayout="Fixed" AutoGenerateColumns="false">

<Columns>

<telerik:GridBoundColumn DataField="EmployeeID" HeaderText="EmployeeID"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="LastName" HeaderText="LastName"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="FirstName" HeaderText="FirstName"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Title" HeaderText="Title"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ReportsTo" HeaderText="ReportsTo"></telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<ClientSettings>

<Scrolling AllowScroll="true" UseStaticHeaders="true" />

</ClientSettings>

</telerik:RadGrid>

<%-- <<RADGRID--%>

</telerik:RadPane>

</telerik:RadSplitter>

</asp:Panel>

<div class="footer">Footer</div>

</form>

</body>

</html>

2 Answers, 1 is accepted

answered on 16 Feb 2015, 03:46 PM

Default-aspx.zip

Hi,

The experienced behavior is caused by the way the Splitter and its parents height is configured. The reason for the problem is that you are configuring the Panel to take 100% of its parent, while the Panel itself has other sibling elements which height is not substracted from the 100% height taken of the Panel. For example if you have the following structure:

<div id='divA' style='height: 300px'>

<div id='divB' style='height: 50px'></div>

<div id='divC' style='height: 100%'></div>

</div>

divB will be rendered with height of 50px, divC will take 100% of its parent = 300px, which will make divA to be rendered with height of 350px in order to show all of its children. This is a general HTML configuration specific and you will experience the same behavior if you replace the Splitter and the Panel with simple divs with height: 100%.

In order to workaround this limitation we have implemented the HeightOffset property so you can predefine the height that has to be substracted of the Splitter's parent 100% height. As the Panel does not provide such property, though, I would suggest you

either to remove it from your configuration and update the Splitter directly, configuring its HeightOffset to substract the height of the header/footer divs
or to add one additional Splitter replacing the header/footer divs with RadPanes. In this way the Splitter will handle the size calculation on itself and no HeightOffset will be needed.

I am attaching a sample page implementing the second approach so you can examine it on your side. Hope this helps.

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.