Access radtab defined in parent page from usercontrol javascript

5 posts, 1 answers
  1. Suchitra
    Suchitra avatar
    6 posts
    Member since:
    Jun 2014

    Posted 12 Jun 2014 Link to this post

    Hi, I have a RADTabStrip defined in my page.
    On clicking one of the tabs i load a user control.
    Now in the user control, i have a button and a click handler for the same.
    In the button click handler (client side function), i would like to change the text of the tab.
    I saw examples which use something like $find("<%= RadTabStrip1.ClientID %>")
    But I am not sure how to use this when the RadTabStrip is defined in the parent page.
    Please provide clues / suggestions on how to get this done.

    Thanks
    Suchitra

  2. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 17 Jun 2014 Link to this post

    Hello Suchitra,

    You could hard-code the ID of the RadTabStrip in attempt to get a reference and then alter a desirable Tab's Text. Please consider the following approach as an example :

    1.<script type="text/javascript">
    2.    function OnClientClicked() {
    3.        $find("RadTabStrip1").get_tabs().getTab(1).set_text("Tab Modified");
    4.    }
    5.</script>

    In addition, please make sure that you are passing the proper ID of the RadTabStrip, since if you are using a Maser/Content page scenario, the IDs will be slightly changed. Here is a video, demonstrating the behavior at my end.


    Regards,
    Nencho
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Suchitra
    Suchitra avatar
    6 posts
    Member since:
    Jun 2014

    Posted 17 Jun 2014 in reply to Nencho Link to this post

    Hello Nencho - Thanks for your response.
    I tried your approach, however was not completely successful.

    In the client click function, the command 
    alert($find("ctl00_MainContent_RadTabStrip1").get_tabs().getTab(1).get_text());
    worked well and it returned me the tab text.

    However, the command 
    $find("ctl00_MainContent_RadTabStrip1").get_tabs().getTab(1).set_text("Tab Modified")
    did not modify the tab text.

    The main difference between your example and my code is: i am adding the tabs dynamically very similar to the demo: http://demos.telerik.com/aspnet-ajax/tabstrip/examples/application-scenarios/add-remove-tabs/defaultcs.aspx

    Not sure if the code is supposed to work in this scenario. 

    Thanks
    Suchitra






  5. Answer
    Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 20 Jun 2014 Link to this post

    Hello Suchitra,

    Indeed the previously demonstrated approach will not be valuable for the demonstrated scenario, since in you are using the ItemTemplate to evaluate the Text of the RadTabs as Labels. Hence, I would suggest you to use jQuery, in order to modify the desired Tab's Text in the following manner :

    <script type="text/javascript">
           var $ = $telerik.$;
           function OnClientClicked() {
               var tabStrip = $find("ctl00_MainContent_RadTabStrip1");
               var span = $(tabStrip.get_tabs().getTab(1).get_element()).find('span');
               $(span).text("ModifiedText");
           }
       </script>


    Regards,
    Nencho
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Suchitra
    Suchitra avatar
    6 posts
    Member since:
    Jun 2014

    Posted 20 Jun 2014 in reply to Nencho Link to this post

    Awesome! Worked just fine. Thanks so much for the effort you took to provide the right solution, Nencho.
    Appreciate the same!

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