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

Splitter height to fit content

8 Answers 341 Views

Splitter

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

asimptota asked on 23 Aug 2012, 01:55 PM

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:

<%@ 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">

</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">

<asp:ContentPlaceHolder ID="MainContent" runat="server" />

</telerik:RadPane>

<telerik:RadPane ID="FooterPane" CssClass="footer" Height="35px" runat="server">

</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

answered on 27 Aug 2012, 01:00 PM

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

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.

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:

<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">

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

answered on 30 Aug 2012, 09:28 AM

Splitter-wholeContent.zip

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

answered on 30 Aug 2012, 03:35 PM

Splitter-wholeContent.zip

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

answered on 31 Aug 2012, 11:08 AM

I wasn't able to upload .zip solutions so here are code snippets:

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">

</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">

</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.

Accepted

answered on 03 Sep 2012, 03:44 PM

Splitter-resize.zip

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:

<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