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

[Solved] Not able to resize splitter according to available height

1 Answer 109 Views

Splitter

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

Ira asked on 07 Sep 2011, 02:41 PM

Hi...

I want to set the splitter to take available height in a table. A table has 3 rows and in the last row, splitter is there. User can click on a link given in 2nd row to toggle the display of the first row. So if first row is set to display = 'none', the splitter should take available space i.e. its height should increase. And if user sets the display = 'block' for first row, then splitter's height should decrease. But in any case, window should not have scroll.

My splitter is having panelbar in 1 of its pane. So if that pane is docked or undocked, splitter should always get proper height and no data should cut.

My page is quite complex, so I was thinking that I am doing something wrong. So I tried creating smaller version of my actual page. In that page also I am not able to get expected result.

Here I am attaching html of the smaller page.

I would appreciate a very very quick response as I've already struggled for 3-4 days to get it work.

aspx page.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PostedToTelerik.aspx.cs" Inherits="TelerikPlayGround.Splitter.PostedToTelerik" %>

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

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

<head id="Head1" runat="server">

<title></title>

<style type="css">

html, body, form

{

height: 100%;

margin: 0px;

padding: 0px;

overflow: hidden;

}

</style>

</head>

<body>

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

<asp:ScriptManager ID="ScriptManager" runat="server" />

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

<script type="text/javascript">

function toggle()

{

var d = document.getElementById("divHeader");

if (d)

{

if (d.style.display != 'none')

{

d.style.display = 'none';

}

else

{

d.style.display = 'block';

}

</script>

</telerik:RadScriptBlock>

<table id="tblMain" border="10" style="height:100%;width:100%;" >

<tr >

<td>

<div id="divHeader" style="display:block;">

header

<br />1

<br />2

<br />3

<br />4

<br />5

<br />6

<br />7

<br />8

<br />9

<br />10

</div>

</td>

</tr>

<tr>

<td>

<a href = "#" onclick="toggle()">

Toggle

</a>

</td>

</tr>

<tr id="trSplitter" >

<td id="tdSplitter" >

<telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal" Skin="Office2007" Height="100%" Width="100%">

<telerik:RadPane ID="MainPane" runat="server" Scrolling="none">

<telerik:RadSplitter ID="NestedSplitter" runat="server" Skin="Office2007" LiveResize="true">

<telerik:RadPane ID="LeftPane" runat="server">

<telerik:RadSlidingZone ID="SlidingZone1" runat="server" Width="22" DockedPaneId="slidingPaneSearchPanels">

<telerik:RadSlidingPane ID="slidingPaneSearchPanels" runat="server" Width="250" Title="SearchPanels"

Font-Bold="true" Scrolling="None" DockOnOpen="false" EnableResize="false">

<div style="padding-left: 0px; padding-top: 0px;">

<telerik:RadPanelBar runat="server" ID="panelBarLeftSearchPanels" Height="100%" ExpandMode="MultipleExpandedItems"

Style="margin-right: 30px; overflow: hidden;" Skin="Office2007" >

<Items>

<telerik:RadPanelItem Text="1"></telerik:RadPanelItem>

<telerik:RadPanelItem Text="2"></telerik:RadPanelItem>

<telerik:RadPanelItem Text="3"></telerik:RadPanelItem>

<telerik:RadPanelItem Text="4"></telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

</div>

</telerik:RadSlidingPane>

</telerik:RadSlidingZone>

</telerik:RadPane>

<telerik:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="Forward" />

<telerik:RadPane ID="ContentPane" runat="server">

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPane>

</telerik:RadSplitter>

</td>

</tr>

</table>

</form>

</body>

</html>

1 Answer, 1 is accepted

answered on 08 Sep 2011, 01:05 PM

Hi Ira,

In order to configure RadSplitter to use percentage values for its Width and Height properties all its parents need to have set height.

In the case the table, the table cells do get expanded to fill the table, but they do not have preset width and height and the splitter cannot calculate correctly its size. To achieve the required result I would suggest you to manually size the splitter according the the table cell's size, e.g.:

<script type="text/javascript">

function toggle()

{

var d = document.getElementById("divHeader");

var splitter = $find("<%=RadSplitter1.ClientID %>");

if (d) {

if (d.style.display != 'none') {

d.style.display = 'none';

}

else {

d.style.display = 'block';

}

resizeSplitter(splitter);

}

function resizeSplitter(splitter, shouldIncrease)

{

var wrapperTD = $get("tdSplitter");

splitter.resize(wrapperTD.offsetWidth, wrapperTD.offsetHeight);

}

function OnClientLoaded(splitter, args)

{

resizeSplitter(splitter);

}

</script>

I hope this helps.

All the best,
Dobromir
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>