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

Right Place

7 Answers 153 Views
ScriptManager and StyleSheetManager
This is a migrated thread and some comments may be shown as answers.
Aarsh
Top achievements
Rank 1
Aarsh asked on 23 Aug 2012, 09:18 PM
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..

<%@ 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">
<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");
                }
            };
 
...

7 Answers, 1 is accepted

Sort by
0
Aarsh
Top achievements
Rank 1
answered on 23 Aug 2012, 10:37 PM
Also tried to use "Globally declared variables ... but that too, did not worked :-(

<asp:Content ID="ContentPlaceHolder1" ContentPlaceHolderID="ContentPlaceHolder1"
    runat="server">
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            var width = 0, height = 0;
            var splitter = document.getElementById("<%= Radsplitter1.ClientID %>");
            var pane = document.getElementById("<%= TreePane_CaseTree.ClientID %>");
            //<![CDATA[
            window.onresize = function () { getClientSize(); };
            window.onload = function () { getClientSize(); };
            document.readyState = function () { getClientSize(); }
            function getClientSize() {
                splitter = document.getElementById("<%= Radsplitter1.ClientID %>");
                pane = document.getElementById("<%= TreePane_CaseTree.ClientID %>");
                //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) {
 
                    alert($find("<%= Radsplitter1.ClientID %>"));
                    alert(splitter.getPaneById("<%= TreePane_CaseTree %>"));
                    pane.Collapsed = true;
 
                    confirm("Hide");
                }
                else {
                     
                    pane.expand = true;
 
                    confirm("Show");
0
Helen
Telerik team
answered on 24 Aug 2012, 10:27 AM
Hell Aarsh,

You should use "$find" instead of "document.getElementById", when working with client-side objects:
http://www.telerik.com/help/aspnet-ajax/splitter-client-side-basics.html


Regards,
Helen
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.
0
Aarsh
Top achievements
Rank 1
answered on 24 Aug 2012, 12:45 PM
Hellen,

I did tried that and also got that we should put the controls between the <body> </body> tags. Here is the thing, I am trying to access those from a master page, which in turn has a master page (yes, nested master pages).
( Event.aspx has master page Master.master and Pop.master is the master of Master.master page  )

Please let me know if I am still not making my self clear. One more thing, I am hard coding the id's so it is no longer an issue, as , I've strong desire to get this job done asap :-)

here is the markup of Master.master file


    <telerik:RadSplitBar runat="server" AdjacentPanesNames-TopPaneName="TopPanel" AdjacentPanesNames-BottomPaneName="Radpane12"
        CollapseMode="Forward">
    </telerik:RadSplitBar>
    <telerik:RadPane ID="Radpane12" runat="server" Scrolling="none">
        <telerik:RadSplitter ID="Radsplitter1" runat="server">
            <telerik:RadPane ID="MainContentPanel" runat="server" Width="75%">
                <asp:ContentPlaceHolder ID="MainContent" runat="server" />
            </telerik:RadPane>
            <telerik:RadSplitBar ID="trvdCaseSplitter" runat="server" AdjacentPanesNames-LeftPaneName="MainContentPanel"
                AdjacentPanesNames-RightPaneName="TreePanel" CollapseMode="Backward">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="TreePane_CaseTree" runat="server" Width="25%"> // <--- I want to collapse this guy
                <telerik:RadSlidingZone ID="CaseTreeSlidingZone" runat="server" SlideDirection="Right">
                    <telerik:RadTreeView ID="trvwCase" runat="server" Skin="WebBlue" BackColor="white"
                        EnableDragAndDrop="false" EnableDragAndDropBetweenNodes="false" Height="100%"
                        Visible="true">
                    </telerik:RadTreeView>
                </telerik:RadSlidingZone>
            </telerik:RadPane>
        </telerik:RadSplitter>
    </telerik:RadPane>
</telerik:RadSplitter>

and the updated JavaScript that I am trying to use within the same file (the one I've posted in the first thread is a bit older by now)

<asp:Content ID="ContentPlaceHolder1" ContentPlaceHolderID="ContentPlaceHolder1"
    runat="server">
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            var width = 0, height = 0;
            var splitter = 'Radsplitter1';
            var pane = 'TreePane_CaseTree';
            document.onload = function () { getClientSize(); };
            window.onresize = function () { getClientSize(); };
            window.onload = function () { getClientSize(); };
            document.readyState = function () { getClientSize(); }
 
            function getClientSize() {
                //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) {
 
                    alert(splitter);
                    alert(pane);
                    pane.collapse(Telerik.Web.UI.SplitterDirection.Backward);
                    alert(pane.get_collapsed());
                    confirm("Hide");
                }
                else {
                    alert(splitter);
                    alert(pane);
                    pane.expand(Telerik.Web.UI.SplitterDirection.Backward);
                    alert(pane.get_collapsed());
                    confirm("Show");
                }
            };
            ...
...




Thanks,
-Aarsh
0
Aarsh
Top achievements
Rank 1
answered on 24 Aug 2012, 01:31 PM
I also tried the suggested way but due to master pages, I am getting null or undefined using $find function. Attached is the screen shot of the same.

0
Helen
Telerik team
answered on 29 Aug 2012, 10:32 AM
Hi Aarsh,

Where is the javascript code defined - on the master or on the content page?
Also you may find helpful the following forum thread:
http://www.telerik.com/community/forums/aspnet-ajax/ajax/masterpage-find-issue.aspx

Regards,
Helen
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.
0
Aarsh
Top achievements
Rank 1
answered on 28 Sep 2012, 08:56 PM
Hi Helen, it is on both the pages, master and content page...
0
Rumen
Telerik team
answered on 03 Oct 2012, 11:19 AM
Hello,

You can try to get a reference to the splitter control using the array $telerik.radControls of all Telerik controls on the page. See this KB article on the subject for more information: How-to create a JavaScript array of all particular RadControls on the page.

Kind regards,
Rumen
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.
Tags
ScriptManager and StyleSheetManager
Asked by
Aarsh
Top achievements
Rank 1
Answers by
Aarsh
Top achievements
Rank 1
Helen
Telerik team
Rumen
Telerik team
Share this question
or