Hi,
I've a Master Page containing splitter with two panes.. Left pane is for menu and right pane is for content pages... I've set it to work when you update your content page and which is longer than usual then re set the height of the splitter so that we can see full page. The problem comes when validaition fires on the page,I've to show them in validation summary, at that time splitter size does not get changed and hence hiding bottom portion of the page.
I am attaching files for it.
In SplitterDemo page... Selecting Check box will show hidden panel with long contents. This time splitter's size is changed. Which is desired.
But
Problem 1. When un selecting check box - panel hides but spliiter's size is not changes.
Problem 2. After selecting check box - click on button "Click Me' to fire validation. Now since validation summary gets displayed and bottom text boxes gets hidden.
P.S - I do not want to set scrolling = "Y" as this will brings up two scrolls and user gets confuse about it.
My Master Page:
My Content Page (.aspx):
I've a Master Page containing splitter with two panes.. Left pane is for menu and right pane is for content pages... I've set it to work when you update your content page and which is longer than usual then re set the height of the splitter so that we can see full page. The problem comes when validaition fires on the page,I've to show them in validation summary, at that time splitter size does not get changed and hence hiding bottom portion of the page.
I am attaching files for it.
In SplitterDemo page... Selecting Check box will show hidden panel with long contents. This time splitter's size is changed. Which is desired.
But
Problem 1. When un selecting check box - panel hides but spliiter's size is not changes.
Problem 2. After selecting check box - click on button "Click Me' to fire validation. Now since validation summary gets displayed and bottom text boxes gets hidden.
P.S - I do not want to set scrolling = "Y" as this will brings up two scrolls and user gets confuse about it.
My Master Page:
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site.master.vb" Inherits="RadControlsWebApp.Site" %>
<!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
runat
=
"server"
>
<
title
></
title
>
<
script
type
=
"text/javascript"
src
=
"http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.min.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.map"
></
script
>
<
link
rel
=
"Stylesheet"
type
=
"text/css"
href
=
"../App_Themes/Default/Application.css"
/>
<
asp:ContentPlaceHolder
ID
=
"cnthead"
runat
=
"server"
>
</
asp:ContentPlaceHolder
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadAjaxManager
ID
=
"ram"
runat
=
"server"
>
</
telerik:RadAjaxManager
>
<
telerik:RadScriptManager
ID
=
"rsm"
runat
=
"server"
>
<
CompositeScript
>
<
Scripts
>
<
asp:ScriptReference
Path
=
"~/Content/Scripts/Common.js"
/>
</
Scripts
>
</
CompositeScript
>
</
telerik:RadScriptManager
>
<
telerik:RadScriptBlock
ID
=
"rtsb"
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
CheckSplitterSize = function () {
var splitter = $find("<%= RadSplitter1.ClientID %>");
var pane = splitter.getPaneById('<%= contentPane.ClientID %>');
var height = pane.getContentElement().scrollHeight;
splitter.set_height(height);
pane.set_height(height);
}
SplitterLoaded = function (splitter, arg) {
//alert('in SplitterLoaded ');
var pane = splitter.getPaneById('<%= contentPane.ClientID %>');
var height = pane.getContentElement().scrollHeight; splitter.set_height(height); pane.set_height(height);
}
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function (sender, e) {
$get("<%= appLoadingPanel.ClientID %>").style.height = document.documentElement.clientHeight + "px";
var loadingImage = document.getElementById('<%= appLoadingPanel.FindControl("imgLoading").ClientID %>');
$.showInCenter(loadingImage);
if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
$get("<%= appLoadingPanel.ClientID %>").style.height = document.documentElement.scrollHeight + "px";
}
});
</
script
>
</
telerik:RadScriptBlock
>
<
telerik:RadWindowManager
ID
=
"rwm"
runat
=
"server"
Style
=
"z-index: 21000"
/>
<
asp:ContentPlaceHolder
ID
=
"ScriptPlaceHolder"
runat
=
"server"
>
</
asp:ContentPlaceHolder
>
<
table
cellpadding
=
"0"
cellspacing
=
"0"
style
=
"border-style: solid; width: 100%; background-color: White;"
>
<
tr
>
<
td
style
=
"width: 100%;"
>
<
p
>
This is header.
</
p
>
</
td
>
</
tr
>
<
tr
>
<
td
style
=
"width: 100%;"
>
<
asp:ContentPlaceHolder
ID
=
"cphTopPage"
runat
=
"server"
>
</
asp:ContentPlaceHolder
>
</
td
>
</
tr
>
<
tr
>
<
td
style
=
"width: 100%;"
>
<
telerik:RadSplitter
ID
=
"RadSplitter1"
runat
=
"server"
Width
=
"100%"
Height
=
"400px"
SkinID
=
"Sunset"
OnClientLoaded
=
"SplitterLoaded"
>
<
telerik:RadPane
ID
=
"navigationPane"
runat
=
"server"
Width
=
"15%"
MinWidth
=
"100"
Scrolling
=
"None"
Height
=
"100%"
>
<
asp:Panel
ID
=
"pnlLeftTreeView"
runat
=
"server"
Height
=
"100%"
CssClass
=
"ScrollingMenu"
>
<
telerik:RadPanelBar
ID
=
"pnlBarLeftNav"
runat
=
"server"
Width
=
"100%"
ExpandMode
=
"SingleExpandedItem"
Skin
=
"Telerik"
>
</
telerik:RadPanelBar
>
</
asp:Panel
>
</
telerik:RadPane
>
<
telerik:RadSplitBar
ID
=
"RadSplitbar1"
runat
=
"server"
Height
=
"100%"
CollapseMode
=
"Forward"
>
</
telerik:RadSplitBar
>
<
telerik:RadPane
ID
=
"contentPane"
runat
=
"server"
Height
=
"100%"
Width
=
"85%"
ShowContentDuringLoad
=
"false"
Scrolling
=
"None"
>
<
table
style
=
"width: 100%;"
>
<
tr
>
<
td
>
<
asp:ValidationSummary
ID
=
"vsMain"
runat
=
"server"
DisplayMode
=
"BulletList"
CssClass
=
"ValidationSummary"
/>
</
td
>
</
tr
>
<
tr
>
<
td
align
=
"left"
>
</
td
>
</
tr
>
<
tr
>
<
td
align
=
"right"
valign
=
"top"
>
<
asp:ContentPlaceHolder
ID
=
"cphRadButtons"
runat
=
"server"
>
</
asp:ContentPlaceHolder
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
asp:ContentPlaceHolder
ID
=
"cphContent"
runat
=
"server"
>
</
asp:ContentPlaceHolder
>
</
td
>
</
tr
>
</
table
>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
p
>
This is site footer.
</
p
>
</
td
>
</
tr
>
</
table
>
<
telerik:RadAjaxLoadingPanel
ID
=
"appLoadingPanel"
runat
=
"server"
IsSticky
=
"true"
Transparency
=
"50"
ClientIDMode
=
"Static"
BackgroundPosition
=
"Center"
CssClass
=
"LoadingPanel"
ZIndex
=
"100000"
>
<
div
style
=
"height: 100%; width: 100%; background-color: #fff;"
>
<
asp:Image
ID
=
"imgLoading"
runat
=
"server"
AlternateText
=
"Loading"
SkinID
=
"sknLoading"
/>
</
div
>
</
telerik:RadAjaxLoadingPanel
>
</
form
>
</
body
>
</
html
>
My Content Page (.aspx):
Content Page Code Behind:<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master"
CodeBehind="SplitterDemo.aspx.vb" Inherits="RadControlsWebApp.SplitterDemo" %>
<
asp:Content
ID
=
"Content1"
ContentPlaceHolderID
=
"cnthead"
runat
=
"server"
>
</
asp:Content
>
<
asp:Content
ID
=
"Content2"
ContentPlaceHolderID
=
"ScriptPlaceHolder"
runat
=
"server"
>
<
telerik:RadScriptBlock
ID
=
"scr"
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
OnRequestEnd = function (sender, arg) {
CheckSplitterSize();
}
</
script
>
</
telerik:RadScriptBlock
>
</
asp:Content
>
<
asp:Content
ID
=
"Content3"
ContentPlaceHolderID
=
"cphTopPage"
runat
=
"server"
>
</
asp:Content
>
<
asp:Content
ID
=
"Content4"
ContentPlaceHolderID
=
"cphRadButtons"
runat
=
"server"
>
<
div
>
<
telerik:RadAjaxPanel
ID
=
"rapContent"
runat
=
"server"
LoadingPanelID
=
"appLoadingPanel"
>
<
asp:Button
ID
=
"btnClickMe"
runat
=
"server"
Text
=
"Click Me"
/>
</
telerik:RadAjaxPanel
>
</
div
>
</
asp:Content
>
<
asp:Content
ID
=
"Content5"
ContentPlaceHolderID
=
"cphContent"
runat
=
"server"
>
<
telerik:RadAjaxPanel
ID
=
"RadAjaxPanel1"
runat
=
"server"
LoadingPanelID
=
"appLoadingPanel"
ClientEvents-OnResponseEnd
=
"OnRequestEnd"
>
<
asp:CheckBox
ID
=
"chkSelect"
runat
=
"server"
Text
=
"Show/Hide Panel"
AutoPostBack
=
"true"
/>
<
asp:Panel
ID
=
"pnlHiddenPanel"
runat
=
"server"
Visible
=
"false"
>
<
div
style
=
"height: 800px"
>
This is very long text.
<
br
/>
<
asp:Label
ID
=
"lblSelect"
runat
=
"server"
/>
<
br
/>
<
asp:DropDownList
ID
=
"drpSelect"
runat
=
"server"
AutoPostBack
=
"true"
>
<
asp:ListItem
Text
=
"C#"
Value
=
"C#"
/>
<
asp:ListItem
Text
=
"Asp.Net"
Value
=
"Asp.Net"
/>
<
asp:ListItem
Text
=
"SQL"
Value
=
"SQL"
/>
<
asp:ListItem
Text
=
"Telerik"
Value
=
"Telerik"
/>
</
asp:DropDownList
>
</
div
>
</
asp:Panel
>
<
br
/>
Name:
<
asp:TextBox
ID
=
"txtName"
runat
=
"server"
></
asp:TextBox
>
<
asp:RequiredFieldValidator
ID
=
"req1"
runat
=
"server"
ControlToValidate
=
"txtName"
ErrorMessage
=
"Name required"
Text
=
"!"
ForeColor
=
"Red"
></
asp:RequiredFieldValidator
>
<
br
/>
Last Name:
<
asp:TextBox
ID
=
"txtLastName"
runat
=
"server"
></
asp:TextBox
>
<
asp:RequiredFieldValidator
ID
=
"RequiredFieldValidator1"
runat
=
"server"
ControlToValidate
=
"txtLastName"
ErrorMessage
=
"Last Name required"
Text
=
"!"
ForeColor
=
"Red"
></
asp:RequiredFieldValidator
>
<
br
/>
Age:
<
asp:TextBox
ID
=
"txtAge"
runat
=
"server"
></
asp:TextBox
>
<
asp:RequiredFieldValidator
ID
=
"RequiredFieldValidator2"
runat
=
"server"
ControlToValidate
=
"txtAge"
ErrorMessage
=
"Age required"
Text
=
"!"
ForeColor
=
"Red"
></
asp:RequiredFieldValidator
>
</
telerik:RadAjaxPanel
>
</
asp:Content
>
Common.js :Public
Class
SplitterDemo
Inherits
System.Web.UI.Page
Protected
Sub
Page_Load(
ByVal
sender
As
Object
,
ByVal
e
As
System.EventArgs)
Handles
Me
.Load
End
Sub
Private
Sub
btnClickMe_Click(sender
As
Object
, e
As
System.EventArgs)
Handles
btnClickMe.Click
End
Sub
Private
Sub
chkSElect_CheckedChanged(sender
As
Object
, e
As
System.EventArgs)
Handles
chkSelect.CheckedChanged
ConsumeTime(2)
pnlHiddenPanel.Visible =
CBool
(chkSelect.Checked)
End
Sub
Private
Sub
ConsumeTime(
ByVal
seconds
As
Integer
)
Dim
ticker
As
DateTime = DateTime.Now()
While
DateDiff(DateInterval.Second, ticker, DateTime.Now) <= seconds
End
While
End
Sub
Private
Sub
drpSelect_SelectedIndexChanged(sender
As
Object
, e
As
System.EventArgs)
Handles
drpSelect.SelectedIndexChanged
lblSelect.Text =
"You selected :"
+ drpSelect.SelectedValue
End
Sub
End
Class
application.css :$.getRadWindow =
function
(win) {
var
oWindow =
null
;
if
(win.radWindow) oWindow = win.radWindow;
else
if
(win.frameElement && win.frameElement.radWindow) oWindow = win.frameElement.radWindow;
return
oWindow;
}
$.showRadWindow =
function
(id) {
var
window = $find(id);
if
(window !=
null
) {
window.set_status(
"Ready"
);
window.show();
return
true
;
}
else
return
false
;
}
$.showInCenter =
function
(ctrl) {
posY = $.getScrollOffset() + ($.getInnerHeight() / 2) - (ctrl.height / 2);
posX = document.documentElement.clientWidth / 2 - (ctrl.width / 2);
$(ctrl).css({ position:
"relative"
, top: posY +
"px"
, left: posX +
"px"
});
}
$.getInnerHeight =
function
() {
var
y;
if
(self.innerHeight)
// all except Explorer
y = self.innerHeight;
else
if
(document.documentElement && document.documentElement.clientHeight)
y = document.documentElement.clientHeight;
else
if
(document.body)
// other Explorers
y = document.body.clientHeight;
return
(y);
}
$.getScrollOffset =
function
() {
var
y;
if
(self.pageYOffset)
y = self.pageYOffset;
else
if
(document.documentElement && document.documentElement.scrollTop)
y = document.documentElement.scrollTop;
else
if
(document.body)
y = document.body.scrollTop;
return
(y);
}
Image.skin:body
{
background-color
:
#C0C0C0
;
margin
:
0
;
padding
:
2px
;
font-family
:
Verdana
,
Arial
,
Helvetica
,
sans-serif
;
font-style
:
normal
;
line-height
:
18px
;
color
:
#333333
;
font-weight
:
normal
;
font-size
:
12px
;
height
:
auto
;
}
a
{
text-decoration
:
underline
;
}
a:hover
{
color
:
#d0981b
;
}
.ValidationSummary
{
border
:
2px
solid
red
;
color
:
red
;
margin
:
5px
0px
;
padding
:
15px
;
background
:
#fff
url
(images/errors.png)
no-repeat
5px
50%
;
}
.ValidationSummary ul
{
margin
:
0
;
padding
:
0
;
margin-left
:
60px
;
list-style-type
:
square
;
}
.InformationMessage
{
border
:
2px
solid
yellow;
color
:
maroon
;
margin
:
5px
0px
;
padding
:
15px
;
background
:
#fff
url
(images/information.png)
no-repeat
5px
50%
;
}
.InformationMessage li
{
margin
:
0
;
padding
:
0
;
margin-left
:
60px
;
list-style-type
:
square
;
}
.ScrollingDiv
{
position
:
relative
;
border-color
:
#4682b4
;
border-style
:
solid
;
background-color
:
#FFFFCC
;
}
.ScrollingMenu
{
position
:
relative
;
}
.LoadingPanel
{
z-index
:
100000
;
background-color
:
#ffffdd
;
border-color
: Gray;
position
:
absolute
;
height
:
100%
;
width
:
100%
;
top
:
0px
;
left
:
0px
;
}
Attaching Loading.gif What i am missing?? How can i resolve both problems?<
asp:Image
SkinID
=
"sknLoading"
runat
=
"server"
ImageUrl
=
"Images/Loading.gif"
/>