This is a migrated thread and some comments may be shown as answers.

How to change progmatically active Tab in RadTabStrip/RadMultiPage?

15 Answers 2734 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 21 Jan 2010, 05:02 PM
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>                 
 


15 Answers, 1 is accepted

Sort by
0
Mark Galbreath
Top achievements
Rank 2
answered on 21 Jan 2010, 05:59 PM
radTabStrip1.Tabs.Item( 2 ).Selected = True 
radMultiPage1.SelectedIndex = 2 
works for me....

Cheers!
Mark
0
Sai
Top achievements
Rank 1
answered on 11 Nov 2011, 04:52 PM

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

0
Kate
Telerik team
answered on 16 Nov 2011, 02:34 PM
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
0
Siva
Top achievements
Rank 1
answered on 26 Mar 2014, 08:26 PM
 RadTabStrip1.SelectedIndex=1;
                      RadPageViewOrganizationSearch.Selected=true;
0
Vinay
Top achievements
Rank 2
answered on 04 Nov 2014, 10:10 PM
Its a good post. Its working for me...
0
ldejesusvega
Top achievements
Rank 1
answered on 24 Apr 2015, 02:26 PM

radMultiPage1.SelectedIndex = 2  

this line solve my problem...

0
Tarun
Top achievements
Rank 1
answered on 06 Jul 2015, 01:09 PM

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.

 

0
Nencho
Telerik team
answered on 09 Jul 2015, 08:55 AM
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
0
Bill Noble
Top achievements
Rank 1
answered on 03 Mar 2017, 02:52 PM

Yip

Works for me also

0
Sandhia
Top achievements
Rank 1
answered on 11 Aug 2020, 01:43 PM

Hello -- The following code used to work until we updated Telerik to latest version.  This no longer works properly.  It does set the tab to "2" however the content does not get loaded.  So we see Tab-2 as being selected but the content is still displaying for Tab-0.

 

Any ideas?

Thanks, Raka

 

rtsContact.Tabs[2].Selected = true;
                RadPageView pageview = (RadPageView)rmpMulti.FindPageViewByID("rpvSummary");
                pageview.Selected = true;

0
Peter Milchev
Telerik team
answered on 12 Aug 2020, 02:02 PM

Hello Raka,

I have tested the code snippet you provided and it works properly. 

Generally, there are little to no changes in these two specific controls so the issue is unlikely related to the upgrade of the Telerik version.

Please share the whole markup that replicates the issue or open a support ticket where you can attach a sample runnable project replicating the issue.

That would allow us to investigate locally and give more accurate suggestions.

Regards,
Peter Milchev
Progress Telerik

0
Sandhia
Top achievements
Rank 1
answered on 12 Aug 2020, 02:18 PM

 

<telerik:RadTabStrip ID="rtsBriefing" runat="server" MultiPageID="rmpBriefing" SelectedIndex="0"
                CausesValidation="false">
                <Tabs>
                    <telerik:RadTab Text="Details" PageViewID="rpvGeneral" Value="General" runat="server" />
                    <telerik:RadTab Text="Test" PageViewID="rpvTest" Value="Test" runat="server" />
                    <telerik:RadTab Text="Other Information" PageViewID="rpvOtherInfo" Value="OtherInfo" runat="server" />
                </Tabs>
            </telerik:RadTabStrip>

            <telerik:RadMultiPage ID="rmpBriefing" runat="server" BorderColor="Gray" BorderStyle="Solid" BorderWidth="1" SelectedIndex="0" ScrollBars="Vertical" Height="400px">

               <telerik:RadPageView ID="rpvGeneral" runat="server>

               </telerik:RadPageView>

               <telerik:RadPageView ID="rpvTest" runat="server">

               </telerik:RadPageView>

                <telerik:RadPageView ID="rpvOtherInfo" runat="server">
                    <div class="pad-md">                      
                        <uc1:MyRadEditor ID="txtOther" runat="server" Width="620px" Height="200px"  />
                    </div>
                </telerik:RadPageView>
            </telerik:RadMultiPage>

...

...

 

And server code to select "Other Info" tab --  (I have tried both of following blocks.  The active tab changes but content does not).

                //    //rtsContact.SelectedIndex = TabIndex;
                //    //rmpContact.SelectedIndex = TabIndex;
                //    //rtsContact.Tabs.FindTabByText("Write-Up").Selected = true;
                //    ////rtsContact.Tabs[TabIndex].Selected = true;
                //    //rpvSummary.Selected = true;



                rtsContact.Tabs[2].Selected = true;
                RadPageView pageview = (RadPageView)rmpContact.FindPageViewByID("rpvSummary");
                pageview.Selected = true;
                //    //RadTabStrip tabstrip = (RadTabStrip)pageview.FindControl("rtsCI");
                //    //tabstrip.Tabs[1].Selected = true;

 

 

Thanks, Raka

0
Peter Milchev
Telerik team
answered on 13 Aug 2020, 11:52 AM

Hello Raka,

The IDs of the code behind snippets are addressing other TabStrip and MultiPage. When I changed the IDs to be correct, the change was working properly:

rtsBriefing.Tabs[2].Selected = true;
RadPageView pageview = (RadPageView)rmpBriefing.FindPageViewByID("rpvOtherInfo");
pageview.Selected = true;

You can also try accessing the associated PageView via the tab itself:

var otherInfoTab = rtsBriefing.FindTabByValue("OtherInfo");
otherInfoTab.Selected = true;
otherInfoTab.PageView.Selected = true;

If the issue persists, please modify the attached pages to replicate the problem and send them back to us for further investigation.

Regards,
Peter Milchev
Progress Telerik

0
Sandhia
Top achievements
Rank 1
answered on 13 Aug 2020, 12:38 PM

Hello Peter -- Thanks for your reply.  I tried both options and it still does not work.

Here's what I tried --

    <telerik:RadTabStrip ID="rtsTest" runat="server" SelectedIndex="0" MultiPageID="rmpTest"   CausesValidation="false">
        <Tabs>
            <telerik:RadTab Text="Details" PageViewID="rpvDetails"  />
            <telerik:RadTab Text="People" PageViewID="rpvPeople" />
            <telerik:RadTab Text="Write-Up" Value="Write-Up" PageViewID="rpvSummary" />
        </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage ID="rmpTest" runat="server" BorderStyle="Solid" BorderWidth="1" BorderColor="Gray">
        <telerik:RadPageView ID="rpvDetails" runat="server" Height="320px">

        </telerik:RadPageView>

 

        <telerik:RadPageView ID="rpvPeople" runat="server" Height="320px">
        </telerik:RadPageView>

 

        <telerik:RadPageView ID="rpvSummary" runat="server" Height="320px">
        </telerik:RadPageView>

</telerik:RadMultiPage>

==========================================================================

server code --

                var otherInfoTab = rtsContact.FindTabByValue("Write-Up");
                otherInfoTab.Selected = true;
                otherInfoTab.PageView.Selected = true;

 

 

Thanks, Sandhia

0
Peter Milchev
Telerik team
answered on 13 Aug 2020, 03:56 PM

Hello Sandhia,

I have tested the same snippet, only fixed the id of the TabStrip to be rtsTest instead of rtsContact and it works as expected.

Please open a support ticket where you can attach the whole web from page with the non-working tabstrip. That would allow us to investigate locally your exact scenario and help you more efficiently.

Once resolved, we will share the solution here for better visibility from the community.

Regards,
Peter Milchev
Progress Telerik

Tags
TabStrip
Asked by
Mike
Top achievements
Rank 1
Answers by
Mark Galbreath
Top achievements
Rank 2
Sai
Top achievements
Rank 1
Kate
Telerik team
Siva
Top achievements
Rank 1
Vinay
Top achievements
Rank 2
ldejesusvega
Top achievements
Rank 1
Tarun
Top achievements
Rank 1
Nencho
Telerik team
Bill Noble
Top achievements
Rank 1
Sandhia
Top achievements
Rank 1
Peter Milchev
Telerik team
Share this question
or