I am using RadSplitter on my master page for layout. My layout is similar to layout in THIS demo. Thea only difference is that I have one extra pane at the bottom for footer. So, my master page layout would be something like this:
I want NestedSplitter to resize according to ContentPane height, with no vertical scroll bar within ContentPane. I've also found THIS article describing how to accomplish that but I keep getting some JavaScript error: "undefined" is null or not an object. Could you please help me?
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
runat
=
"server"
>
<
title
>FullWindow</
title
>
<
style
type
=
"text/css"
>
html, body, form
{
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
</
style
>
<
asp:ContentPlaceHolder
ID
=
"HeadContent"
runat
=
"server"
>
</
asp:ContentPlaceHolder
>
</
head
>
<
body
>
<
form
id
=
"form2"
runat
=
"server"
>
<
asp:ScriptManager
ID
=
"ScriptManager"
runat
=
"server"
/>
<
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"
>
<!-- Place the content of the pane here -->
</
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"
>
<!-- Place the content of the pane here -->
</
telerik:RadPane
>
<
telerik:RadSplitBar
ID
=
"VerticalSplitBar"
runat
=
"server"
CollapseMode
=
"Forward"
/>
<
telerik:RadPane
ID
=
"ContentPane"
runat
=
"server"
>
<
asp:ContentPlaceHolder
ID
=
"MainContent"
runat
=
"server"
/>
</
telerik:RadPane
>
<
telerik:RadPane
ID
=
"FooterPane"
CssClass
=
"footer"
Height
=
"35px"
runat
=
"server"
>
My footer © 2012. All rights reserved.
</
telerik:RadPane
>
</
telerik:RadSplitter
>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
</
div
>
</
form
>
</
body
>
</
html
>
I want NestedSplitter to resize according to ContentPane height, with no vertical scroll bar within ContentPane. I've also found THIS article describing how to accomplish that but I keep getting some JavaScript error: "undefined" is null or not an object. Could you please help me?
8 Answers, 1 is accepted
0
Hi Jasmin,
The approach you have to follow is almost the same as the one in the KB article you have already found. The only difference is that you are using nested splitters, so you do not have to resize the height of the inner splitter (ID="NestedSplitter") but of its containing pane ( ID="MainPane").
This is done because by design when a Splitter is nested in another one it calculates its size depending on its parent pane's size. You could find more information about this behavior in this live demo and this help article.
Regards,
Veselina
the Telerik team
The approach you have to follow is almost the same as the one in the KB article you have already found. The only difference is that you are using nested splitters, so you do not have to resize the height of the inner splitter (ID="NestedSplitter") but of its containing pane ( ID="MainPane").
This is done because by design when a Splitter is nested in another one it calculates its size depending on its parent pane's size. You could find more information about this behavior in this live demo and this help article.
Regards,
Veselina
the Telerik team
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

asimptota
Top achievements
Rank 1
answered on 27 Aug 2012, 01:30 PM
Thank you for your reply.
But I still haven't solved my problem. I have done as you said and used this JavaScript for resizing:
and called it on this client event:
but I still get that error: 'undefined is null or not an object'.
Could you please post some code snippet so I could see how should I correctly use this JavaScript and on which splitter?
Thank You
But I still haven't solved my problem. I have done as you said and used this JavaScript for resizing:
<
script
type
=
"text/javascript"
>
function SplitterLoaded(splitter, arg)
{
var pane = splitter.getPaneById('<%= MainPane.ClientID %>');
var height = pane.getContentElement().scrollHeight;
splitter.set_height(height);
pane.set_height(height);
}
</
script
>
and called it on this client event:
<
telerik:RadSplitter
ID
=
"MainSplitter"
runat
=
"server"
Height
=
"100%"
Width
=
"100%"
Orientation
=
"Horizontal"
Skin
=
"Default"
OnClientLoaded
=
"SplitterLoaded"
>
Could you please post some code snippet so I could see how should I correctly use this JavaScript and on which splitter?
Thank You
0
Hi Jasmin,
For your convenience I prepared a sample project demonstrating the described approach. There are some additional lines in the JavaScript (used in the previously mentioned KB) which have to be added because of the nested splitter in the setup.
Please, give it a try and tell me how it goes.
Greetings,
Veselina
the Telerik team
For your convenience I prepared a sample project demonstrating the described approach. There are some additional lines in the JavaScript (used in the previously mentioned KB) which have to be added because of the nested splitter in the setup.
Please, give it a try and tell me how it goes.
Greetings,
Veselina
the Telerik team
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

asimptota
Top achievements
Rank 1
answered on 30 Aug 2012, 10:41 AM
Thank you so much. It works. But, it only works after full page postback. My scenario is that I have an ajaxified hierarchy grid in my content page (which is placed inside ContentPane of the splitter as you could see on my code snippet I've provided). I want to resize the NestedSplitter when I expand a row in my hierarchy grid. Help?
0
Hi Jasmin,
I tried to reproduce the described issue but to no avail. I tested the previously sent project with a RadGrid in the ContentPane (using a simple data) and a button, adding some static value to the data source I am using.
I am sending you this test project, so you could see how the splitter is being resized depending on the lines in the grid. Please, examine it and tell me how does it differs from the Splitter's behavior on your side?
Furthermore, there are some specifics when trying to ajaxify a RadSplitter - you could find more information in this help article: AJAX updates.
If non of the above is the case, could you please provide a sample fully runnable project, so we could examine it further?
Regards,
Veselina
the Telerik team
I tried to reproduce the described issue but to no avail. I tested the previously sent project with a RadGrid in the ContentPane (using a simple data) and a button, adding some static value to the data source I am using.
I am sending you this test project, so you could see how the splitter is being resized depending on the lines in the grid. Please, examine it and tell me how does it differs from the Splitter's behavior on your side?
Furthermore, there are some specifics when trying to ajaxify a RadSplitter - you could find more information in this help article: AJAX updates.
If non of the above is the case, could you please provide a sample fully runnable project, so we could examine it further?
Regards,
Veselina
the Telerik team
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

asimptota
Top achievements
Rank 1
answered on 31 Aug 2012, 11:08 AM
I wasn't able to upload .zip solutions so here are code snippets:
Site.Master
Site.Master.cs
Default.aspx
Default.aspx.cs
If I don't ajaxify RadGrid1 (comment RadAjaxManager on Default.aspx) splitter expands correctly. I want splitter on master page to expand along with ajaxified RadGrid on content page. Hope you could help me.
Site.Master
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Splitter.SiteMaster" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
xml:lang
=
"en"
>
<
head
runat
=
"server"
>
<
title
></
title
>
<
link
href
=
"~/Styles/Site.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
asp:ContentPlaceHolder
ID
=
"HeadContent"
runat
=
"server"
>
</
asp:ContentPlaceHolder
>
</
head
>
<
body
>
<
form
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
>
<
Scripts
>
<%--Needed for JavaScript IntelliSense in VS2010--%>
<%--For VS2008 replace RadScriptManager with ScriptManager--%>
<
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
>
<
script
type
=
"text/javascript"
>
function SplitterLoaded(splitter, arg) {
var pane = splitter.getPaneById("<%= ContentPane.ClientID %>");
var height = pane.getContentElement().scrollHeight;
var parentPane = $find("<%= MainPane.ClientID %>"); //$find("MainPane"); //$find(splitter._parentPaneId);
parentPane.resize(height - parentPane.get_height(), 1);
splitter._windowResizeHandler();
//Original
// $find(splitter._parentPaneId).resize(height - $find(splitter._parentPaneId).get_height(), 1);
// $find(splitter._parentPaneId).get_splitter()._windowResizeHandler();
}
function SplitterLoaded_(splitter, arg) {
var pane = splitter.getPaneById("<%= ContentPane.ClientID %>");
var height = pane.getContentElement().scrollHeight;
var parentPane = find("<%= MainPane.ClientID %>"); //get the pane containing the nested splitter
var delta = height - parentPane.get_height();
parentPane.resize(delta, 1);
parentPane.get_splitter()._windowResizeHandler();
// splitter.set_height(splitter.get_height() - pane.get_height() + height);
// pane.set_height(height);
}
</
script
>
<
div
id
=
"ParentDivElement"
style
=
"height: 100%;"
>
<
telerik:RadSplitter
ID
=
"MainSplitter"
runat
=
"server"
Width
=
"100%"
Height
=
"100%"
Orientation
=
"Horizontal"
Skin
=
"Outlook"
>
<
telerik:RadPane
ID
=
"TopPane"
runat
=
"server"
Height
=
"100"
MinHeight
=
"85"
MaxHeight
=
"150"
Scrolling
=
"none"
>
<!-- Place the content of the pane here -->
</
telerik:RadPane
>
<
telerik:RadSplitBar
ID
=
"RadsplitbarTop"
runat
=
"server"
CollapseMode
=
"Forward"
/>
<
telerik:RadPane
ID
=
"MainPane"
runat
=
"server"
MinWidth
=
"500"
Scrolling
=
"None"
>
<
telerik:RadSplitter
ID
=
"NestedSplitter"
runat
=
"server"
Skin
=
"Outlook"
LiveResize
=
"true"
OnClientLoaded
=
"SplitterLoaded"
>
<
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"
Scrolling
=
"None"
>
<
asp:ContentPlaceHolder
ID
=
"MainContent"
runat
=
"server"
/>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
</
telerik:RadPane
>
<
telerik:RadSplitBar
ID
=
"RadsplitbarFooter"
runat
=
"server"
CollapseMode
=
"Forward"
/>
<
telerik:RadPane
ID
=
"FooterPane"
Height
=
"35px"
runat
=
"server"
>
My footer © 2012. All rights reserved.
</
telerik:RadPane
>
</
telerik:RadSplitter
>
</
div
>
</
form
>
</
body
>
</
html
>
Site.Master.cs
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
namespace
Splitter
{
public
partial
class
SiteMaster : System.Web.UI.MasterPage
{
protected
void
Page_Load(
object
sender, EventArgs e)
{
}
}
}
Default.aspx
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="Splitter._Default" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<
asp:Content
ID
=
"HeaderContent"
runat
=
"server"
ContentPlaceHolderID
=
"HeadContent"
>
</
asp:Content
>
<
asp:Content
ID
=
"BodyContent"
runat
=
"server"
ContentPlaceHolderID
=
"MainContent"
>
<
telerik:RadAjaxLoadingPanel
runat
=
"server"
ID
=
"RadajaxLoadingPanel1"
Skin
=
"Default"
/>
<
telerik:RadAjaxManager
runat
=
"server"
ID
=
"RadAjaxManager1"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"RadGrid1"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadGrid1"
LoadingPanelID
=
"RadajaxLoadingPanel1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
</
telerik:RadAjaxManager
>
<
telerik:RadGrid
ID
=
"RadGrid1"
runat
=
"server"
DataSourceID
=
"CustomersDS"
AllowPaging
=
"True"
>
<
ClientSettings
>
<
Selecting
AllowRowSelect
=
"True"
></
Selecting
>
</
ClientSettings
>
<
MasterTableView
DataSourceID
=
"CustomersDS"
Name
=
"Master"
DataKeyNames
=
"CustomerID"
ClientDataKeyNames
=
"CustomerID"
>
<
DetailTables
>
<
telerik:GridTableView
DataKeyNames
=
"OrderID"
ClientDataKeyNames
=
"OrderID"
DataSourceID
=
"OrdersDS"
Width
=
"100%"
runat
=
"server"
>
</
telerik:GridTableView
>
</
DetailTables
>
</
MasterTableView
>
<
FilterMenu
EnableImageSprites
=
"False"
></
FilterMenu
>
</
telerik:RadGrid
>
<
asp:EntityDataSource
ID
=
"CustomersDS"
runat
=
"server"
ConnectionString
=
"name=NWEntities"
DefaultContainerName
=
"NWEntities"
EnableFlattening
=
"False"
EntitySetName
=
"Customers"
Select
=
"it.[CustomerID], it.[CompanyName], it.[ContactName], it.[ContactTitle], it.[Address], it.[City], it.[Country]"
OrderBy
=
"it.CustomerID"
>
</
asp:EntityDataSource
>
<
asp:EntityDataSource
ID
=
"OrdersDS"
runat
=
"server"
ConnectionString
=
"name=NWEntities"
DefaultContainerName
=
"NWEntities"
EnableFlattening
=
"False"
EntitySetName
=
"Orders"
Select
=
"it.[OrderID], it.[CustomerID], it.[OrderDate], it.[RequiredDate], it.[ShippedDate], it.[ShipVia], it.[ShipCity]"
OrderBy
=
"it.OrderID"
>
</
asp:EntityDataSource
>
</
asp:Content
>
Default.aspx.cs
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
namespace
Splitter
{
public
partial
class
_Default : System.Web.UI.Page
{
protected
void
Page_Load(
object
sender, EventArgs e)
{
}
}
}
If I don't ajaxify RadGrid1 (comment RadAjaxManager on Default.aspx) splitter expands correctly. I want splitter on master page to expand along with ajaxified RadGrid on content page. Hope you could help me.
0
Accepted
Hi Jasmin,
This is the expected behavior of the page since you only the grid is being ajaxified. In order to make the nested splitter expand depending on the ajaxified grid you should make the following changes:
1. Exchange the RadScriptManager in the Site.master with a ScriptManager:
2. Modify the SplitterLoaded() function in Site.master:
3. Add the logic which is calling the SplitterLoaded() function on every PostBack of the grid (in Default.asp.cs):
For your convenience I have attached the modified project.
All the best,
Veselina
the Telerik team
This is the expected behavior of the page since you only the grid is being ajaxified. In order to make the nested splitter expand depending on the ajaxified grid you should make the following changes:
1. Exchange the RadScriptManager in the Site.master with a ScriptManager:
<
asp:ScriptManager
ID
=
"ScriptManager1"
runat
=
"server"
></
asp:ScriptManager
>
2. Modify the SplitterLoaded() function in Site.master:
<script type=
"text/javascript"
>
function
SplitterLoaded() {
var
splitter = $find(
"<%=NestedSplitter.ClientID %>"
);
var
pane = splitter.getPaneById(
"<%= ContentPane.ClientID %>"
);
var
height = pane.getContentElement().scrollHeight;
var
parentPane = $find(
"<%= MainPane.ClientID %>"
);
parentPane.resize(height - parentPane.get_height(), 1);
splitter._windowResizeHandler();
}
</script>
3. Add the logic which is calling the SplitterLoaded() function on every PostBack of the grid (in Default.asp.cs):
public
void
Page_Load(
object
sender, EventArgs e)
{
if
(IsPostBack && Request.Params[
"__EVENTTARGET"
] !=
null
&& Request.Params[
"__EVENTTARGET"
].ToString().Contains(RadGrid1.UniqueID))
//check if RadGrid or its child controls have triggered the PostBack
{
ScriptManager.RegisterStartupScript(Page, Page.GetType(),
"KEY"
,
"Sys.Application.add_load(function(){SplitterLoaded();})"
,
true
);
}
}
For your convenience I have attached the modified project.
All the best,
Veselina
the Telerik team
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

asimptota
Top achievements
Rank 1
answered on 04 Sep 2012, 07:26 AM
Now we're talkin'! :) It works.Thank you!