Right Place

8 posts, 0 answers
  1. Aarsh
    Aarsh avatar
    192 posts
    Member since:
    Jun 2012

    Posted 23 Aug 2012 Link to this post

    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");
                    }
                };
     
    ...
  2. Aarsh
    Aarsh avatar
    192 posts
    Member since:
    Jun 2012

    Posted 23 Aug 2012 Link to this post

    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");
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 24 Aug 2012 Link to this post

    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.
  5. Aarsh
    Aarsh avatar
    192 posts
    Member since:
    Jun 2012

    Posted 24 Aug 2012 Link to this post

    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
  6. Aarsh
    Aarsh avatar
    192 posts
    Member since:
    Jun 2012

    Posted 24 Aug 2012 Link to this post

    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.

  7. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 29 Aug 2012 Link to this post

    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.
  8. Aarsh
    Aarsh avatar
    192 posts
    Member since:
    Jun 2012

    Posted 28 Sep 2012 Link to this post

    Hi Helen, it is on both the pages, master and content page...
  9. Rumen
    Admin
    Rumen avatar
    12849 posts

    Posted 03 Oct 2012 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017