Accessing RadControls from Javascript in MasterPage

17 posts, 0 answers
  1. wali
    wali avatar
    4 posts
    Member since:
    Jan 2007

    Posted 01 Jan 2009 Link to this post

    Hi,

    I am trying to access RadTabstrip control in SharePoint MasterPage to set the Tab through client-side javascript code but getting 'Object doesn't support this property or method' error. Below is what I am trying:

    <telerik:RadTabStrip runat="server" id="RadTabStrip1"  Width="433px" SelectedIndex="0" ClickSelectedTab="True" OnClientTabSelected="onClientTabSelected"
        OnClientLoad="onClientTabLoad">



    function loadTabIndex(tabstrip) {  
        //If tabstrip reference isn't null
        if (tabstrip != null) {  
                alert('test');
               var tab = tabstrip.findTabByText("Reports"); 
          
               //Get tab object
                if (tab != null) {               
                    tab.select(); //Select tab           
                }           
        }    
       
    }


    accessing loadTabIndex(tabstrip) from onload event

    <body class="body" topmargin="0" onload="javascript:_spBodyOnLoadWrapper(); loadTabIndex(ctl00_RadTabStrip1);">

    However, I am getting error on tabstrip.findTabByText("Reports")

    How can I achieve what I am trying to do? Please help.

    Regards,

    IW
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 02 Jan 2009 Link to this post

    Hi Wali,

    In order to use the client API of certain control, you should reference its client object - in order to do this you should use the built-in AJAX method $find as explained below:

    http://www.telerik.com/help/aspnet-ajax/editor_getingreferencetoradeditor.html

    I also do not recommend to hard - code the ID because it is not a good practice and you would better use code-blocks and extract the ClientID as  $find("<%=RadTabStrip1.ClientID%>").

    As explained in the provided article for the RadEditor (the same facts are true not only for all RadControls but for every client-side AJAX object), the onload event is too early in th page lifecycle and you cannot use it to reference the object - in order to execute some script on page load, you should use the Sys.Application.add_load syntax.


     I hope that the provided explanations are helpful and since the RadControls are built on top of the MS AJAX Framework, I believe that it will be easier for you to use them after reading some helpful resources about the AJAX fundamentals - you can find some below. Note that these links point to the Microsoft sites and we cannot guarantee their content and/or availability will not change over time:



    Best wishes,
    Svetlina
    the Telerik team
    Check out Telerik Trainer, the state of the art learning tool for Telerik products.

  3. wali
    wali avatar
    4 posts
    Member since:
    Jan 2007

    Posted 02 Jan 2009 Link to this post

    Thanks Svetlina !


    I tried the below:

    var tabStrip = $find( "<%= RadTabStrip1.ClientID %>");
     var tab = tabStrip.findTabByText( "Reports");
     tab.select();

    However, I was getting SharePoint message 'Code Block are not allowed in this file '

    So, I modified the web.config file
    <.pageparserpath virtualpath="/_catalogs/masterpage/*" compilationmode="Always" allowserversidescript="true" includesubfolders="true".>

    For some reason SharePoint does not like <%= %> block.


    But now I am getting 'An unexpected error has occurred'

    Is there anything else I am missing?

    Regards,

    IW
  4. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 05 Jan 2009 Link to this post

    Hi Wali,

    I assume that the code blocks cannot be evaluated for some reason and that is why you got a message they are not allowed. I suggest to wrap the script which contains the code blocks with the RadCodeBlock control and test again. Another option is to get back to your original approach with the hard - coded ID, just make sure that the reference is done by using the $find method.


    Best wishes,
    Svetlina
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  5. wali
    wali avatar
    4 posts
    Member since:
    Jan 2007

    Posted 05 Jan 2009 Link to this post

    I am still getting error on tabstrip.findTabByText("Reports") 'Object doesn't support this property or method'.

    Even hardcoded approach gives me same error.

     <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
     <script type="text/javascript">   

    function loadTabIndex() {  
        
        var tabstrip = ("<%= RadTabStrip1.ClientID %>");
        var tab = tabstrip.findTabByText("Reports");

    }
     
     </script>  
    </telerik:RadCodeBlock>

    I am calling the loadTabIndex from onload.

    Regards,

    IW


  6. Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 06 Jan 2009 Link to this post

    Hello,

    You should use $find() method to get reference to ASP.NET AJAX components:

    function loadTabIndex() {
        var tabstrip = $find("<%= RadTabStrip1.ClientID %>");
        var tab = tabstrip.findTabByText("Reports");
    }



    Sincerely yours,
    Vlad
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  7. wali
    wali avatar
    4 posts
    Member since:
    Jan 2007

    Posted 06 Jan 2009 Link to this post

    Calling the loadTabIndex using Sys.Application.add_load(loadTabIndex);  did it for me.

    Thanks for your help and great timely support.
       

  8. Sergio Cortez
    Sergio Cortez avatar
    23 posts
    Member since:
    Nov 2008

    Posted 18 Mar 2009 Link to this post

    Hi Wali and  Hi Telerik guys

    I just want to question if these coding with javascript is to access the TabStrip to get highlighted the current selected element on the page?

    What i mean is that I'm running into issues to highlight the correct Tab inside sharepoint because TabStrip loses its state in every postback.

    So in the telerik Demo page http://demos.telerik.com/aspnet-ajax/tabstrip/examples/applicationscenarios/sitenavigation/defaultcs.aspx
    It says that the way to overcome this limitation is to use the RadTabStrip.FindTabByUrl method in conjunction with RadTab.SelectParents.

    I have implemented the code in my masterpage but its not working, so righ now im a little confussed.

    Please Help me :)
  9. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 18 Mar 2009 Link to this post

    Hi Sergio Cortez,

    The example you are referring to uses server-side code (C#) while this topic discusses client-side (JavaScript) implementations. As far as I know using server-side code in sharepoint pages is not trivial but is still possible. You can check this MSDN article for the details.

    Kind regards,
    Albert
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  10. Sergio Cortez
    Sergio Cortez avatar
    23 posts
    Member since:
    Nov 2008

    Posted 18 Mar 2009 Link to this post

    Thank you Albert for the reply

    Right now i have configured my Sharepoint to work with server-side code (C#) and i have implemented the RadTabStrip.FindTabByUrl and RadTab.SelectParents, but its not working.

    So, right now i dont know if im doing something wrong implementing this C# code or maybe this code doesnt work properly in the sharepoint world and I should use Javascript implementation instead or what do you recommend?

    My main goal is to geet the correct Tab Highlited after every postback
    :S

    I really appreciate your help :)
  11. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 18 Mar 2009 Link to this post

    Hi Sergio Cortez,

    Is the tabstrip bound to a sharepoint datasource? In this example RadTabStrip is bound to the PortalSiteMapDatasource control and highlights the current path automatically. What is different in your case? Also which version are you using? This capability was not available in earlier versions.

    Regards,
    Albert
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  12. Sergio Cortez
    Sergio Cortez avatar
    23 posts
    Member since:
    Nov 2008

    Posted 18 Mar 2009 Link to this post

    Im using Telerik.Web.Ui version 2008.3.1125.35

    The tab strip is bound to a SiteMapDataSource and this SiteMapDataSource has a Custom Navigation Provider that inherits from SPNavigationProvider

     <asp:SiteMapDataSource ShowStartingNode="false" SiteMapProvider="MyCustomNav" ID="topSiteMap1"  runat="server" StartFromCurrentNode="false" />

    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" DataSourceID="topSiteMap1" Skin="MyCustomSkin" EnableEmbeddedSkins="False"/>


    I thought that it will handle the items highlight automatically.

    I will try to use a PortalSiteMapDatasource instead of a SiteMapDataSource as the sharepoint.telerik.com example.
    I dont know exactly the differences but maybe it has something to do .

  13. Sergio Cortez
    Sergio Cortez avatar
    23 posts
    Member since:
    Nov 2008

    Posted 18 Mar 2009 Link to this post

    I got an update on this.
    I have changed the SiteMapDataSource and replaced with PortalSiteMapDatasource and a lot of thing started to work instantaneously.

    The highlighted item works now in all the sharepoint areas (Document Center, News, Sites, etc etc)

    But for my custom sections (MyCustomArea1, MycustomArea2) it still does not highlight these items.

    mmm, i will continue to research




  14. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 19 Mar 2009 Link to this post

    Hello Sergio Cortez,

    RadTabStrip should retain the current do this by itself if bound to a sitemap provider which correctly implements the CurrentNode property.

    Regards,
    Albert
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  15. Sergio Cortez
    Sergio Cortez avatar
    23 posts
    Member since:
    Nov 2008

    Posted 31 Mar 2009 Link to this post

    Hi Albert I could finally get the desired behavior.
    The only line that i was missing is to execute a Databind to the radTabStrip before trying to find the SelectedTab.
    Here is the link to the other forum which has more details
    http://www.telerik.com/community/forums/aspnet-ajax/tabstrip/moss-and-radtabstrip-for-navigation.aspx


    :)

    Thank you everyone!
  16. Carlos
    Carlos avatar
    8 posts
    Member since:
    Dec 2012

    Posted 14 Oct 2014 in reply to Svetlina Anati Link to this post

    Just to let you know that the link below is broken.
     
  17. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3600 posts

    Posted 15 Oct 2014 Link to this post

    Hi Carlos,

    Thank you for your report. I removed the links to the article because it no longer exists. It was only a collection of links that had general information about the MS AJAX framework. Since those links go dead over time, we removed our own help article to avoid misleading people. I edited the original post to show the links that are still live: http://www.telerik.com/forums/accessing-radcontrols-from-javascript-in-masterpage#1cPmfZNf6kmuuJAayVP1xg.


    Regards,

    Marin Bratanov
    Telerik
     

    Consider using RadControls for ASP.NET AJAX (built on top of the ASP.NET AJAX framework) as a replacement for the Telerik ASP.NET Classic controls, See the product support lifecycle here.

     
Back to Top