Tabstrip and navigation button issue

[Alex]

I am having trouble getting the focus to shift between my tabs.  My radtabstrip is linked with a radmultipage.  There are three pageviews and therefore three tabs.  I am wanting for the user to be able to click on the Next button at the bottom of the pageview and if it passes the validation, be taken to the next tab and pageview.  I have tried using some of the code I have found in the forums but it leaves me on the first tab.  If I add "RadMultiPage1.SelectedIndex = 1" to my btnStep2_Click it will take me to the right pageview but the tab focus/selection stays on the first tab instead of going to the second tab.  How do I shift the focus to the corresponding tab of the pageview?  I am using VS 2008 with the 2009.2.826.35 build of the Telerik controls.   Here is my code snippet:

    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1"
        SelectedIndex="0" BorderStyle="None" Font-Size="Medium" Skin="WebBlue" Height="19px"
        Width="441px" CausesValidation="False" >
        <Tabs>
            <telerik:RadTab runat="server" PageViewID="rpvExamRegistration"
                Text="Exam Registration">
            </telerik:RadTab>
            <telerik:RadTab runat="server" PageViewID="rpvContactInformation" Text="Contact Information"
                Selected="True">
            </telerik:RadTab>
            <telerik:RadTab runat="server" PageViewID="rpvConfirmation" Text="Confirmation">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>

<asp:Button ID="btnStep2" runat="server" Text="Next" ValidationGroup="ExamRegistration"
                            OnClick="btnStep2_Click" />



VB
    Protected Sub btnStep2_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Dim myTab As RadTab = DirectCast(RadTabStrip1.FindTabByText("Contact Information"), RadTab)
        myTab.Selected = True
        myTab.SelectParents()

    End Sub

[Cori]

Hello Alex,

Although the RadTabStrip and RadMultiPage controls are linked to each other, changing the SelectedIndex in the code-behind doesn't affect the other control. So you'll need to change the SelectedIndex of both controls to make them match.

I hope that helps.

[Alex]

Thanks for the reply Cori.  I have tried that with the following code but it doesn't affect my tabs. 
        RadMultiPage1.SelectedIndex = 1
        RadTabStrip1.SelectedIndex = 1
Although the pageview changes, my radtabstrip stays on the first tab.  In design view, the SelectedIndex value is "-1" for all three tabs, apparently by default.  I have also tried setting the values to 0, 1, and 2, respectively for my tabs with the above code.  However, it still stays on the first tab.  Would you have any other suggestions?

Thanks,
Alex

[Cori]

Hello Alex,

Are you sure there isn't any other piece of code that is changing the RadTab control's index, since that's what it's starting to look like. If the RadMultiPage changes it's index in the button event, I don't see why the RadTabStrip wouldn't. Could it also be a javascript event or piece of code that's changing it?

[Alex]

Hi Cori,
I have reexamined my markup and codebehind.  The only javascript is in my masterpage.  It manipulates the page header but does not affect the maincontent where my multipage and tabstrip are located.  The only place I was trying to do anything with the radtabstrip was in my button click event.  I guess I am just going to have to come up with another approach and maybe even skip using the multipage and tabstrip controls until I get more experience.  Thanks for your help.

Alex

[Dimitar Terziev]

Hello Alex,

In general there should be no problem selecting a particular tab in the tabstrip from code-behind. There should be something specific in your scenario, causing this kind of behavior.

Could you provide us with the markup or code, where the MultiPage and PageViews are added to the page?

All the best,
Dimitar Terziev
the Telerik team

[Alex]

Thanks for your response Dimitar.  I am sorry I couldn't get to this earlier.  I was moving on to a different approach with my application that didn't use the Telerik controls but if I can find out how to get past the issue I was experiencing that would be great.  My entire markup for the page is 444 lines long so I will leave out some of the controls on the pageviews to shorten it.

<%@ Page Title="" Language="VB" MasterPageFile="~/Pages/MasterPages/MasterPage.master"
    AutoEventWireup="false" CodeBehind="ExamRegistration.aspx.vb" Inherits="SPPOnlineExamRegistrationWebApp.Pages_ExamRegistration" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <form id="main" runat="server" title="Pesticide Exam Registration">
    <p align="center">
        <asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Size="Medium" Text="Pesticide Exam Registration"></asp:Label>
    </p>
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadTabStrip1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1"
        SelectedIndex="0" BorderStyle="None" Font-Size="Medium" Skin="WebBlue" Height="19px"
        Width="441px" CausesValidation="False" AutoPostBack="True">
        <Tabs>
            <telerik:RadTab runat="server" PageViewID="rpvExamRegistration"
                Text="Exam Registration" SelectedIndex="0" Selected="True">
            </telerik:RadTab>
            <telerik:RadTab runat="server" PageViewID="rpvContactInformation"
                Text="Contact Information" SelectedIndex="1">
            </telerik:RadTab>
            <telerik:RadTab runat="server" PageViewID="rpvConfirmation" Text="Confirmation"
                SelectedIndex="2">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" BackColor="White" RenderSelectedPageOnly="True">
        <telerik:RadPageView ID="rpvExamRegistration" runat="server" Selected="True" BackColor="White">
            <asp:Label ID="lblMinReqLabel" runat="server" Font-Bold="true" Text="*Minimum Requirements"></asp:Label><asp:Label
                ID="lblMinReq" runat="server" Text="Age: Must be 18 years of age as of January 1st of the licensing year. Private Applicators (Farmers) must be at least 16 years old."></asp:Label><br />
            <table border="0" cellpadding="5" cellspacing="0" width="100%">
                <tr>
                    <td align="right" style="width: 350px">
                    </td>
                    <td align="left">
                    </td>
                </tr>
                <tr>
                    <td align="right" style="width: 350px">
                        <asp:Label ID="lblSelExamLocLabel" runat="server" Font-Bold="true" Text="Select Exam Location:"></asp:Label>
                    </td>
                    <td>
                        <asp:DropDownList ID="ddlExamLocation" runat="server" Width="175px"
                            ValidationGroup="ExamRegistration">
                            <asp:ListItem>abcd</asp:ListItem>
                        </asp:DropDownList>
                        <asp:RequiredFieldValidator ID="rfvExamLocation" runat="server" ControlToValidate="ddlExamLocation"
                            ErrorMessage="An exam location is required for registraton." ValidationGroup="ExamRegistration"
                            Text="*"></asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td align="right" style="width: 350px">
                        <asp:Label ID="lblExamDateTitle" runat="server" Text="Select Exam Dates" Font-Bold="True"> </asp:Label>
                    </td>
                    <td>
                        <asp:DropDownList ID="ddlExamDateTime" runat="server" Width="200px" ValidationGroup="ExamRegistration">
                            <asp:ListItem>abcd</asp:ListItem>
                        </asp:DropDownList>
                        <asp:RequiredFieldValidator ID="rfvExamDates" runat="server" ControlToValidate="ddlExamDateTime"
                            ErrorMessage="An exam date is required for registration." ValidationGroup="ExamRegistration"
                            Text="*"></asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td style="width: 350px">
                    </td>
                    <td>
                        <asp:ValidationSummary ID="vsum1" runat="server" ValidationGroup="ExamRegistration"
                            BackColor="Yellow" Font-Bold="True" Font-Underline="True" />
                    </td>
                </tr>
                <tr>
                    <td style="width: 350px">
                    </td>
                    <td>
                        <asp:Button ID="btnStep2" runat="server" Text="Next" ValidationGroup="ExamRegistration" OnClick="btnStep2_Click" />
                    </td>
                </tr>
            </table>
        </telerik:RadPageView>
        <telerik:RadPageView ID="rpvContactInformation" runat="server">
            <table border="0" cellpadding="5" cellspacing="0" width="100%">
                <tr>
                    <td align="right" style="width: 350px">
                        <asp:Label ID="lblFirstName" runat="server" Text="First Name"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtFirstName" runat="server" Width="150px"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="rfvFirstName" runat="server" ErrorMessage="First Name is required."
                            ControlToValidate="txtFirstName" ValidationGroup="ContactInfo">*</asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        <asp:Label ID="lblLastName" runat="server" Text="Last Name"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtLastName" runat="server" Width="150px"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="rfvLastName" runat="server" ErrorMessage="Last name is required."
                            ControlToValidate="txtLastName">*</asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        <asp:Label ID="lblEmailAddress" runat="server" Text="Email Address"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtEmailAddress" runat="server" Width="200px"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td style="width: 350px">
                    </td>
                    <td>
                        <asp:ValidationSummary ID="vsum2" runat="server" ValidationGroup="ContactInfo" BackColor="Yellow" />
                    </td>
                </tr>
                <tr>
                    <td style="width: 350px">
                    </td>
                    <td>
                        <asp:Button ID="btnStep3" runat="server" Text="Next" OnClientClick="btnStep3_Click" />
                    </td>
                </tr>
            </table>
        </telerik:RadPageView>
        <telerik:RadPageView ID="rpvConfirmation" runat="server">
            <table border="0" cellpadding="5" cellspacing="0" width="100%">
                <tr>
                    <td align="right">
                        <asp:Label ID="lblConfirmationFirstName" runat="server" Text="First Name"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtConfirmationFirstName" runat="server" Width="150px" Enabled="False"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        <asp:Label ID="lblConfirmationLastName" runat="server" Text="Last Name"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtConfirmationLastName" runat="server" Width="150px" Enabled="False"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        <asp:Label ID="lblConfirmationEmailAddress" runat="server" Text="Email Address"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtConfirmationEmailAddress" runat="server" Width="200px" Enabled="False"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        <asp:Label ID="lblYouhave" runat="server" Text="You have registered for the following exams on "></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtDateTime" runat="server" Enabled="False"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        <asp:Label ID="Label2" runat="server" Text="at"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtLocation" runat="server" Enabled="False"></asp:TextBox>
                    </td>
                </tr>
            </table>
        </telerik:RadPageView>
    </telerik:RadMultiPage>
    </form>
</asp:Content>

Below is my codebehind where I was trying to get the focus to shift on the tab and the pageview.  I have tried different variations on the below but the tab focus never shifts. 

Public Sub btnStep2_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    RadMultiPage1.SelectedIndex = 1
    RadTabStrip1.SelectedIndex = RadTabStrip1.SelectedTab.Index + 1
End Sub

If you can find the problem and tell me how to correct it I would greatly appreciate it.
Thanks,
Alex

If you can find the problem and tell me how to correct it I would greatly appreciate it.Thanks,Alex

[Cori]

Hello Alex,

You AjaxManager's settings should look like this:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadMultiPage1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadTabStrip1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

The order is important. Since, you are changing the RadTabStrip's index from a button click in the RadMultiPage, you need to tell the RadAjaxManager that it will be updating the RadTabStrip control, as well as itself.

I hope that helps.

[Alex]

Hi Cori,
Outstanding!!!!  That worked.  I don't know how I would have ever figured that out without spending days and days of researching and reading internet forums, documentation and books.  I am going to save your instructions for future use also.  Thank you so much for your help.

Alex

[Sanjay]

Hi,
I am using Telerik radtabstrip control, containing 8 tabs.
Requirement is, i want to activate tab on focus, i dont want mouse click for tab.
right now, focus is setting on tab, but tab is not firing ther click event on focus.

Please suggest a solution.
Thanks in advance.

Regards,
Sanjay

[Dimitar Terziev]

Hi Sanjay,

In order to achieve the desired functionality you could try the following approach:

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="0" Skin="Default">
           <Tabs>
               <telerik:RadTab Text="Tab1" >
               </telerik:RadTab>
               <telerik:RadTab Text="Tab2" >
               </telerik:RadTab>
               <telerik:RadTab Text="Tab3" >
               </telerik:RadTab>
               <telerik:RadTab Text="Tab4" >
               </telerik:RadTab>
               <telerik:RadTab Text="Tab5" >
               </telerik:RadTab>
           </Tabs>
       </telerik:RadTabStrip>
       <script type="text/javascript">

           function pageLoad() {

               var tabstrip = $find("RadTabStrip1");

               $telerik.$("a", tabstrip.get_element()).bind("focus", function () {

                   var index = $telerik.$("a", tabstrip.get_element()).index(this);
                   tabstrip.get_tabs().getTab(index).set_selected(true);

               });
           }
       </script>

Regards,
Dimitar Terziev
the Telerik team