Client-Side - Cannot get a Hook on the RadTabStrip

7 posts, 1 answers
  1. David
    David avatar
    87 posts
    Member since:
    Jul 2010

    Posted 20 Jul 2011 Link to this post

    Hi,
    I am trying to create a variable for the RadTabStrip on my page, but $find keeps returning a null value. Here is my code (the javascript is in a RadCodeBlock at the foot of the page):

    <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
     
    <%@ 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">
     
    <head runat="server">
        <title></title>
        <link href="css/StyleSheet.css" rel="stylesheet" type="text/css" />
        <script src="js/jquery-1.5_1.js" type="text/javascript"></script>
        <script src="js/behaviours.js" type="text/javascript"></script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            </telerik:RadScriptManager>
             
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                        <ClientEvents OnRequestStart="jsAjaxStarting" OnResponseEnd="ajaxFinished" />
                        <AjaxSettings>
                            <telerik:AjaxSetting AjaxControlID="Button1">
                                <UpdatedControls>
                                    <telerik:AjaxUpdatedControl ControlID="Panel1" />
                                </UpdatedControls>
                            </telerik:AjaxSetting>
                            <telerik:AjaxSetting AjaxControlID="Button2">
                                <UpdatedControls>
                                    <telerik:AjaxUpdatedControl ControlID="Panel2" />
                                    <telerik:AjaxUpdatedControl ControlID="tab1IsAJAX" />
                                </UpdatedControls>
                            </telerik:AjaxSetting>               
                        </AjaxSettings>
            </telerik:RadAjaxManager>
             
            <div id="loadingDiv" class="screenCenter" style="display: none;">
                <br />
                <br />
                <span>LOADING</span>
            </div>       
     
            <telerik:RadTabStrip ID="TestRadTabStrip" runat="server"
                                 OnClientLoad="jsStoreLicenceApplicTabStripClientObject"
                                 SelectedIndex="0" MultiPageID="RadMultiPage1">
                <Tabs>
                    <telerik:RadTab PageViewID="RadPageView1" runat="server" Text="Tab 1" Value="Tab1" ></telerik:RadTab>
                    <telerik:RadTab PageViewID="RadPageView2" runat="server" Text="Tab 2" Value="Tab2" ></telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>
             
            <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0">
                <telerik:RadPageView ID="RadPageView1" runat="server">
                    <asp:Panel ID="Panel2" runat="server">     
                        <p>This is page 1</p>
                    </asp:Panel>
                    <asp:Button ID="Button1" runat="server" Text="Go to Tab 2" OnClick="Click1" /><br />
                    <asp:Label ID="tab1IsAJAX" Text="" runat="server" />
                </telerik:RadPageView>
                <telerik:RadPageView ID="RadPageView2" runat="server">
                    <asp:Panel ID="Panel1" runat="server">               
                        <p>This is page 2</p>
                        <asp:Button ID="Button2" runat="server" Text="Go to Tab 1" OnClick="Click2" /><br />
                        <asp:Label ID="tab2IsAJAX" Text="" runat="server" />
                    </asp:Panel>
                    <asp:Button ID="Button3" runat="server" Text="Hide Panel" /><br />                       
                </telerik:RadPageView>           
            </telerik:RadMultiPage>       
             
            <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
                <script type="text/javascript">
     
                    $(document).ready(hookUpEvents);
                     
                    function hookUpEvents() {
     
                        var tabId = '<%= TestRadTabStrip.ClientID %>';
                        var tabStrip = $find(tabId);
     
                        debugger;
     
                        if (tabStrip) {
                            var selectedTab = tabStrip.get_selectedTab();
                            var tabvalue = selectedTab.get_value();
                        }
     
                        if (tabvalue === 'Tab2')
                            $('#' + '<%= RadPageView2.FindControl("Panel1").ClientID %>').bind('click', hidePanel);
                    }  
                </script>
            </telerik:RadCodeBlock>
             
        </div>
        </form>
    </body>
    </html>

    I am using a Web site project template and Telerik.Web.UI, Version=2010.3.1215.35

    Any help would be appreciated. Cheers
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 21 Jul 2011 Link to this post

    Hello David,

    Try accessing the TabStrip as shown below which worked as expected.
    Javascript:
    function hookUpEvents()
    {
     var tabId = $find("<%= TestRadTabStrip.ClientID %>");
    }

    Also take a look at the following help article.
    Client-Side Basics.

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Craig Dobson
    Craig Dobson avatar
    5 posts
    Member since:
    Feb 2010

    Posted 21 Jul 2011 Link to this post

    I don't think the posted solution addresses the actual underlying problem.

    I've started having the same problem since installing the latest telerik dll, with code that worked before, and I think the cause is that telerik aren't creating the component object until extremely late in the page life-cycle.

    For instance, let's say I want to do some initialisation on a tab strip using a function something like this...
    function initTabStrip () {
        var tabStrip = %find("myTabStripID");
         
        // do something...
    }

    If I attach this to a button handler and click it manually once the page is up then it works fine.

    But if I register a script block on page load (or pre-render) then $find returns null.

    Next thing I tried was calling the function from a jquery $(document).ready() function, but it still doesn't work.

    I guess the only way the new dll is going to work in this scenario is using a Timer to fire the function once telerik has finally woken up and created the component object - anyone have any ideas of a suitable delay to use???
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 22 Jul 2011 Link to this post

    Hello Craig,

    Being an ASP.NET Ajax control RadTabStrip is initialized after the  document.ready event. When using the  pageLoad event, controls are rendered initially. For further information you can check this article.
    $(document).ready() and pageLoad() are not the same!.

    Thanks,
    Shinu.
  6. David
    David avatar
    87 posts
    Member since:
    Jul 2010

    Posted 24 Jul 2011 Link to this post

    Hi Shinu,
    Thanks for that article. Very interesting.

    I have got it working but one more question. I am trying to achieve unobtrusive javascript. That means having clean mark-up, separated from javascript. At the moment, I have to use a RadCodeBlock to get at control IDs. But this leaves me with a big block of javascript in my aspx file:

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
     
            $(document).ready(hookUpButtonClick);
     
            function hookUpButtonClick() {
                $('#' + '<%= RadPageView2.FindControl("Button3").ClientID %>').bind('click', hidePanel);
            }
     
            function hidePanel() {
                var panelId = '<%= RadPageView2.FindControl("Panel1").ClientID %>';
                $('#' + panelId).slideToggle();
                return false;
            }               
     
        </script>
    </telerik:RadCodeBlock>

    Is there a way to get this same result, but with the javascript in a sep0arate javascript file?
  7. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 25 Jul 2011 Link to this post

    Hello David,

    Javascript external files are not run through the ASP.NET engine, so the server tag <%=...%> is never executed in that case.So  use a global variable in the aspx file itself, and save the ClientID when page loads.  Now you will be able to access the control (from external JS file) using the ClientID saved in global variable.

    Also check out the following forum thread which discussed similar issue.
    Moving Javascript around.

    Thanks,
    Princy.
  8. David
    David avatar
    87 posts
    Member since:
    Jul 2010

    Posted 25 Jul 2011 Link to this post

    Thanks Princy,

    That suggestion makes perfect sense, and I'll try it out. I'm sure it will work. I'll mark it as answered as soon as I confirm it working.

    Awesome!

    Cheers
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017