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.
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"
>
<!-- Place the content of the pane here -->
<
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"
>
<!-- Place the content of the pane here -->
</
telerik:RadPane
>
</
telerik:RadSplitter
>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
</
td
>
</
tr
>
</
table
>
</
form
>
</
body
>
</
html
>