How to change progmatically active Tab in RadTabStrip/RadMultiPage?

[Mike]

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>

[Mark Galbreath]

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

works for me....

Cheers!
Mark

[Sai]

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

[Kate]

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

[Siva]

 RadTabStrip1.SelectedIndex=1;
                      RadPageViewOrganizationSearch.Selected=true;

[Vinay]

Its a good post. Its working for me...

[ldejesusvega]

radMultiPage1.SelectedIndex = 2  

this line solve my problem...

[Tarun]

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.

 

[Nencho]

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

[Bill Noble]

Yip

Works for me also

[Sandhia]

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;

[Peter Milchev]

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

[Sandhia]

 

<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

[Peter Milchev]

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

[Sandhia]

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

[Peter Milchev]

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