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
10 Answers, 1 is accepted
0
Cori
Top achievements
Rank 2
answered on 10 Mar 2011, 02:19 PM
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.
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.
0
Alex
Top achievements
Rank 1
answered on 10 Mar 2011, 03:37 PM
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
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
0
Cori
Top achievements
Rank 2
answered on 14 Mar 2011, 01:12 PM
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?
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?
0
Alex
Top achievements
Rank 1
answered on 14 Mar 2011, 05:24 PM
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
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
0
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
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
0
Alex
Top achievements
Rank 1
answered on 17 Mar 2011, 09:26 PM
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
0
Accepted
Cori
Top achievements
Rank 2
answered on 18 Mar 2011, 01:10 PM
Hello Alex,
You AjaxManager's settings should look like this:
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.
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.
0
Alex
Top achievements
Rank 1
answered on 18 Mar 2011, 02:41 PM
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
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
0
Sanjay
Top achievements
Rank 1
answered on 29 Dec 2011, 03:23 PM
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
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
0
Hi Sanjay,
In order to achieve the desired functionality you could try the following approach:
Regards,
Dimitar Terziev
the Telerik team
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
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