Hi friends, I am trying to figure out to replicate the functionality available on one of the demo pages, with the help of concerned documentation, at two different places
I think I need to figure out the right place to write the java-script ...
I am using this code ...for the first place where there is no master page:
here I am getting an err saying "getElementById" is not a valid method, the standard msJavascript dialog box..
And here is another case where I've Nested master page ...
I think I need to figure out the right place to write the java-script ...
I am using this code ...for the first place where there is no master page:
here I am getting an err saying "getElementById" is not a valid method, the standard msJavascript dialog box..
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SlidingPaneDemo.aspx.cs"
Inherits="SlidingPaneDemo" %>
<!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
>
<
telerik:RadStyleSheetManager
ID
=
"RadStyleSheetManager1"
runat
=
"server"
/>
</
head
>
<
body
>
<
form
id
=
"form1"
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"
>
//Put your JavaScript code here.
</
script
>
<
telerik:RadCodeBlock
ID
=
"CodeBlock1"
runat
=
"server"
>
<
script
type
=
"text/javascript"
id
=
"telerikClientEvents1"
>
//
<![CDATA[
function ToggleButton_Clicked(sender, args) {
var splitter = Document.getElementById('SplitterID');
var pane = Document.getElementById('RightPane');
if (pane.collapse()) {
pane.expand(pane);
}
}
//]]>
</
script
>
</
telerik:RadCodeBlock
>
<
telerik:RadAjaxManager
ID
=
"RadAjaxManager1"
runat
=
"server"
>
</
telerik:RadAjaxManager
>
<
telerik:RadSkinManager
ID
=
"RadSkinManager1"
runat
=
"server"
Skin
=
"Telerik"
>
</
telerik:RadSkinManager
>
<
asp:UpdatePanel
ID
=
"SlidingPaneUpdatePanel"
runat
=
"server"
>
<
ContentTemplate
>
<
telerik:RadSplitter
runat
=
"server"
ID
=
"SplitterID"
>
<
telerik:RadPane
runat
=
"server"
>
<
telerik:RadButton
ID
=
"ToggleButton"
runat
=
"server"
OnClientClicked
=
"ToggleButton_Clicked"
>
</
telerik:RadButton
>
</
telerik:RadPane
>
<
telerik:RadSplitBar
runat
=
"server"
>
</
telerik:RadSplitBar
>
<
telerik:RadPane
ID
=
"RightPane"
runat
=
"server"
Width
=
"481px"
Height
=
"300px"
Scrolling
=
"Y"
>
<
telerik:RadSlidingZone
ID
=
"SlidingZone1"
runat
=
"server"
Width
=
"100%"
SlideDirection
=
"Right"
>
<
telerik:RadSlidingPane
ID
=
"telerikPane"
runat
=
"server"
Title
=
"I can slide"
Width
=
"482px"
PersistScrollPosition
=
"true"
>
<
telerik:RadCodeBlock
ID
=
"CodeBlock"
runat
=
"server"
>
<
iframe
id
=
"iFrame"
runat
=
"server"
src
=
"Default.aspx"
width
=
"100%"
height
=
"100%"
frameborder
=
"0"
scrolling
=
"yes"
></
iframe
>
<
telerik:RadDatePicker
ID
=
"RadDatePicker1"
runat
=
"server"
>
</
telerik:RadDatePicker
>
</
telerik:RadCodeBlock
>
</
telerik:RadSlidingPane
>
</
telerik:RadSlidingZone
>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
</
ContentTemplate
>
</
asp:UpdatePanel
>
<
div
>
<
asp:TextBox
ID
=
"TextBox1"
runat
=
"server"
></
asp:TextBox
>
<
asp:Button
ID
=
"Button1"
runat
=
"server"
OnClick
=
"Button1_Click"
Text
=
"Button"
/>
<
asp:Label
ID
=
"Label1"
runat
=
"server"
Text
=
"Label"
></
asp:Label
>
</
div
>
</
form
>
</
body
>
</
html
>
And here is another case where I've Nested master page ...
<
asp:Content
ID
=
"ContentPlaceHolder1A"
ContentPlaceHolderID
=
"ContentPlaceHolder1"
runat
=
"server"
>
<
telerik:RadCodeBlock
ID
=
"RadCodeBlock1"
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
//<![CDATA[
window.onresize = function () { getClientSize(); };
window.onload = function () { getClientSize(); };
document.readyState = function () { getClientSize(); }
function getClientSize() {
var width = 0, height = 0;
//cross browser compatible
if (typeof (window.innerWidth) == 'number') {
//Non-IE
width = window.innerWidth;
height = window.innerHeight;
} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
//IE 6+ in 'standards compliant mode'
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
//IE 4 compatible
width = document.body.clientWidth;
height = document.body.clientHeight;
}
if (width <= 1024 || height <= 768) {
document.getElementById("<%=TreePane_CaseTree.ClientID %>").Visible = false;
document.getElementById("<%=TreePane_CaseTree.ClientID %>").style.visibility = "none";
var splitter = $find("<%=Radsplitter1.ClientID%>");
var pane = $find("TreePane_CaseTree");
var DidItCollapsed = pane.collapse();
confirm("Hide");
}
else {
document.getElementById("<%=TreePane_CaseTree.ClientID %>").Visible = true;
document.getElementById("<%=TreePane_CaseTree.ClientID %>").style.visibility = "visible";
var splitter = $find("<%=Radsplitter1.ClientID%>");
var pane = $find("TreePane_CaseTree");
var DidItExpanded = pane.expand();
slidingZone.expandPane(slidingPane.get_id());
confirm("Show");
}
};
...