How to change progmatically active Tab in RadTabStrip/RadMultiPage?

9 posts, 0 answers
  1. Mike
    Mike avatar
    24 posts
    Member since:
    Feb 2008

    Posted 21 Jan 2010 Link to this post

    Hello All,
    I use a lot Tabs (with RadTabStrip/RadMultiPage) in our WebApplication and I have situations where program logic in codebehind should change active Tab in RadTabStrip.

    I have tried C# code like RadTabStrip.SelectedIndex = index but it doesn't seem to work.
    I have also tried to activate tab calling Javascript from codebehind but doesn't succeeded.
    Every time when I have progmatically tried to change active Tab page has started to work quite peculiar.
    It either freeze or content doesn't change at all.

    Tabbed pages have following structure:
    RadTabStrip
      RadMultiPage
         RadPageView (Multiple RadPageViews)
           UI Controls like RAdTextBoxes etc.

    Can anyone tell how to activate Tab using C# or Javascript:

    Thanks,
    Michael

    <telerik:RadTabStrip ID="RadTabStrip1" runat="server"   
       MultiPageID="RadMultiPage1" SelectedIndex="0"   
       ontabclick="RadTabStrip1_TabClick">  
       <Tabs> 
          <telerik:RadTab TabIndex="0" Text='Organization' PageViewID="RadPageViewOrganizationSearch"/>  
          <telerik:RadTab TabIndex="1" Text='Person' PageViewID="RadPageViewPersonSearch"/>  
          <telerik:RadTab TabIndex="2" Text='Ext.Search' PageViewID="RadPageViewExtendedSearch"/>  
          <telerik:RadTab TabIndex="3" Text='Lists' PageViewID="RadPageViewDistributionListSearch"/>  
       </Tabs> 
    </telerik:RadTabStrip> 
     
    <telerik:RadMultiPage ID="RadMultiPage1" runat="server" BorderColor="Gray"   
       BorderStyle="Solid" BorderWidth="1px" Width="600px" SelectedIndex="0">  
     
       <telerik:RadPageView runat="server" ID="RadPageViewOrganizationSearch" Selected="true">  
          <table id="Table1" runat="server" width="600px">  
             <tr> 
                <td colspan="2">  
                   <table class="ms-disc-bar" width="100%">  
                      <tr> 
                         <td> 
                            <asp:Label ID="Label2" CssClass="ms-standardheader" runat="server"   
                               Text='Organization Values'/>  
                         </td> 
                      </tr> 
                   </table> 
                </td> 
             </tr> 
             <tr> 
                <td class="ms-formlabel" style="width: 125px">  
                   <asp:Label ID="Label9" CssClass="ms-standardheader" runat="server"   
                      Text='Name'/>  
                </td> 
                <td class="ms-formbody">                             
                   <telerik:RadTextBox ID="RTBName" runat="server">  
                   </telerik:RadTextBox>                                         
                </td>                 
     


  2. Mark Galbreath
    Mark Galbreath avatar
    171 posts
    Member since:
    Jul 2009

    Posted 21 Jan 2010 Link to this post

    radTabStrip1.Tabs.Item( 2 ).Selected = True 
    radMultiPage1.SelectedIndex = 2 
    works for me....

    Cheers!
    Mark
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sai
    Sai avatar
    5 posts
    Member since:
    Aug 2011

    Posted 11 Nov 2011 Link to this post

    Hi,

    I am having some issue with RabTabStrip.

    1. I have default .aspx page which contains RadTabStrip and multipageview controls.
    2. I am binding the tabs (Tabs – My Form, Form, Admin etc) and pageviews dynamically  in default.aspx page
    3. When I click on the 1st tab I am viewing the page1 ( myform.aspx ) and selected tab index = 0
    4. I am navigating to another page from myform.aspx to form.aspx page using asp.net hyperlink control.

    Requirement

    1. I need to change the active tab from my form to form of TabStrip which is in Default.aspx from my form to form when I navigate to form.aspx from myform.aspx
    2. I have tried to access tab control by creating the instance of default.aspx in the form.aspx, but the objects is always returning null.

    I hope you understand the problem I am facing. I would be grateful, if you can proved me some kind solution to resolve this issue. An early reply with solution is highly appreciated.

    Thanks,

    Sai

  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 16 Nov 2011 Link to this post

    Hi Sai,

    I am not quite sure that I understand your scenario. However, I assume that you are not able to find the relevant tab of the RadTabStrip control. I would suggest that you use one of the properties described in this help article to find the needed tab. In case this does not help can you elaborate on your scenario and provide some sample code that will help us reproduce it?

    Greetings,
    Kate
    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
  6. Siva
    Siva avatar
    1 posts
    Member since:
    Mar 2014

    Posted 26 Mar 2014 Link to this post

     RadTabStrip1.SelectedIndex=1;
                          RadPageViewOrganizationSearch.Selected=true;
  7. Vinay
    Vinay avatar
    1 posts
    Member since:
    Sep 2012

    Posted 04 Nov 2014 in reply to Mark Galbreath Link to this post

    Its a good post. Its working for me...
  8. ldejesusvega
    ldejesusvega avatar
    1 posts
    Member since:
    Mar 2015

    Posted 24 Apr 2015 in reply to Mark Galbreath Link to this post

    radMultiPage1.SelectedIndex = 2  

    this line solve my problem...

  9. Tarun
    Tarun avatar
    1 posts
    Member since:
    Jul 2015

    Posted 06 Jul 2015 in reply to Kate Link to this post

    I have a 3 image buttons and 3 tabs and page views and one javascript function. below is the code sample

     <script type="text/javascript"> 

     function imgclick(a) {
           // alert(a);      
            
            var multiPage = $find("<%=RadMultiPage1.ClientID %>");
           
            if (a == "1")
                var pageView = multiPage.findPageViewByID("RadPageView1");
            if (a == "2")
                var pageView = multiPage.findPageViewByID("RadPageView2");
            if (a == "3")
                var pageView = multiPage.findPageViewByID("RadPageView3");
            //alert(pageView);

            if (pageView)
            {
                pageView.set_selected(true);
           }

    </script>

      <img src="/images/donor-icon.png" alt="" onclick="javascript:imgclick('1')" />

      <img src="/images/donor-icon.png" alt="" onclick="javascript:imgclick('2')" />

      <img src="/images/donor-icon.png" alt="" onclick="javascript:imgclick('3')" />

     

    <telerik:RadTabStrip runat="server" ID="RadTabStrip1" MultiPageID="RadMultiPage1" SelectedIndex="1" >
            <Tabs>
                <telerik:RadTab Text="Marks="True" PageViewID="RadPageView1"></telerik:RadTab>
                <telerik:RadTab Text="Profile" PageViewID="RadPageView2"></telerik:RadTab>
                <telerik:RadTab Text="Address" PageViewID="RadPageView3"></telerik:RadTab>

       </Tabs>
        </telerik:RadTabStrip>

     <telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0">
            <telerik:RadPageView runat="server" ID="RadPageView1">
                <div>
                    ONE
                </div>
     </telerik:RadPageView>
         <telerik:RadPageView runat="server" ID="RadPageView2">
                <div>
                    Two
                </div>
     </telerik:RadPageView>

         <telerik:RadPageView runat="server" ID="RadPageView3">
                <div>
                    Three
                </div>
     </telerik:RadPageView>
          </telerik:RadMultiPage> 

     My requirement is whenever the user clicks on the image button i need to show that tab in the RadTab. suppose if the user clicks on the second iamge button i have show the second tab. i tried this bu using the above client side java script function, but not works. Can you please help me in this regards.

     

    Regards,

    Tarun.

     

  10. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 09 Jul 2015 Link to this post

    Hello Tarun,

    The closing parenthese is missing from the demonstrated javascript implementation, which is causing an error and might corrupt the proper behavior for changing the active PageView. However, you would need to implement the same logic for changing the active Tab as well.

    In the attachment you can find a simple example on how this should be achieved.

    Regards,
    Nencho
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017