Hi
I'm using Tabstrip control in my application which contains 5 diffrent tabs.
I want to open each tab by using the key board tab key.
When I do tab its selecting the tab but then I need to press the enter button.
How can I open the tab whenever I press the tab key without enter(pressing the enter key)?
By accesskey aslo I need to press the enter once I select the tab using ALT+ACCESKEY combination.
Please help me regarding this ASAP.
I'm using Tabstrip control in my application which contains 5 diffrent tabs.
I want to open each tab by using the key board tab key.
When I do tab its selecting the tab but then I need to press the enter button.
How can I open the tab whenever I press the tab key without enter(pressing the enter key)?
By accesskey aslo I need to press the enter once I select the tab using ALT+ACCESKEY combination.
Please help me regarding this ASAP.
5 Answers, 1 is accepted
0
Hi Ram,
The last "ev.preventDefault()" line is optional, depending on whether you want to tab out of the tabstrip, or keep tabbing through the tabs. Best wishes,
Bozhidar
the Telerik team
You can subscribe to the keypress event and select a tab based on the key pressed. Here's the javascript function you should use to do that:
$telerik.$(document).bind(
"keypress"
,
function
(ev) {
var
key;
ev = ev || event;
key = ev.keyCode;
if
(key == 9) {
var
tabStrip = $find(
"<%= RadTabStrip1.ClientID %>"
)
var
selectedTab = tabStrip.get_selectedTab();
if
(selectedTab!=
null
){
var
nextTab;
if
(ev.ctrlKey){
nextTab = selectedTab.get_previousSibling();
if
(nextTab==
null
){
var
count = tabStrip.get_tabs().get_count();
count = count - 1;
nextTab = tabStrip.get_tabs().getTab(count);
}
}
else
{
nextTab = selectedTab.get_nextSibling();
if
(nextTab==
null
){
nextTab = tabStrip.get_tabs().getTab(0);
}
}
}
else
{
nextTab = tabStrip.get_tabs().getTab(0);
}
nextTab.set_selected(
true
);
ev.preventDefault();
}
});
The last "ev.preventDefault()" line is optional, depending on whether you want to tab out of the tabstrip, or keep tabbing through the tabs. Best wishes,
Bozhidar
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

Ram
Top achievements
Rank 1
answered on 24 Nov 2011, 12:22 PM
Hi Bozhidar
I'm getting javascript error like Microsoft JScript runtime error: '$telerik' is undefined Please tell me how to register this event.
Here is my code
I'm getting javascript error like Microsoft JScript runtime error: '$telerik' is undefined Please tell me how to register this event.
Here is my code
<
body
>
<
script
type
=
"text/javascript"
>
$telerik.$(document).bind("keypress", function (ev) {
varkey;
ev = ev || event;
key = ev.keyCode;
if (key == 9) {
var tabStrip = $find("<%= menuStrip.ClientID %>")
var selectedTab = tabStrip.get_selectedTab();
if (selectedTab != null) {
var nextTab;
if (ev.ctrlKey) {
nextTab = selectedTab.get_previousSibling();
if (nextTab == null) {
var count = tabStrip.get_tabs().get_count();
count = count - 1;
nextTab = tabStrip.get_tabs().getTab(count);
}
}
else {
nextTab = selectedTab.get_nextSibling();
if (nextTab == null) {
nextTab = tabStrip.get_tabs().getTab(0);
}
}
}
else {
nextTab = tabStrip.get_tabs().getTab(0);
}
nextTab.set_selected(true);
ev.preventDefault();
}
});
</
script
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
/>
<
div
id
=
"right"
>
<
table
border
=
"0"
width
=
"100%"
cellpadding
=
"0"
cellspacing
=
"0"
style
=
"height:58px;margin-top:0px;"
>
<
tr
>
<
td
width
=
"9%"
height
=
"100%"
style
=
"padding-left:0px"
colspan
=
"2"
>
<
asp:Image
id
=
"imgHeader"
runat
=
"server"
ImageUrl
=
"~/images/Banner.gif"
ImageAlign
=
"Middle"
Width
=
"100%"
/>
</
td
>
</
tr
>
</
table
>
<
telerik:RadTabStrip
ID
=
"menuStrip"
runat
=
"server"
CssClass
=
"TabStrip1"
MultiPageID
=
"RadMultiPage1"
ClickSelectedTab
=
"True"
UnSelectChildren
=
"True"
style
=
"margin-left:9.5px;border-left-style:none;"
Width
=
"97.5%"
ShowBaseLine
=
"True"
EnableEmbeddedSkins
=
"False"
Skin
=
"Office2007"
OnClientTabSelecting
=
"OnClientTabSelecting"
OnClientTabSelected
=
"OnClientTabSelected"
>
<
Tabs
>
<
telerik:RadTab
Text
=
"Dashboard"
NavigateUrl
=
"DashBoard/DashBoard.aspx"
CssClass
=
"DashBoardTab"
Target
=
"framebody"
>
</
telerik:RadTab
>
<
telerik:RadTab
Text
=
"Reports"
NavigateUrl
=
"Reports/StatReports.aspx"
Target
=
"framebody"
>
</
telerik:RadTab
>
<
telerik:RadTab
Text
=
"System View"
NavigateUrl
=
"SystemView/SystemView.aspx"
Target
=
"framebody"
>
</
telerik:RadTab
>
<
telerik:RadTab
Text
=
"Alarms"
NavigateUrl
=
"Alarms/Alarms.aspx"
Target
=
"framebody"
>
</
telerik:RadTab
>
<
telerik:RadTab
Text
=
"Settings"
NavigateUrl
=
"Settings/Settings.aspx"
Target
=
"framebody"
>
</
telerik:RadTab
>
</
Tabs
>
</
telerik:RadTabStrip
>
0
Hello Ram,
Place the script after the RadScriptManager declaration like the following:
This should solve your issue.
All the best,
Bozhidar
the Telerik team
Place the script after the RadScriptManager declaration like the following:
<body>
<form id=
"form1"
runat=
"server"
>
<div>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
/>
<script type=
"text/javascript"
>
$telerik.$(document).bind(
"keypress"
, function(ev) {
var key;
....
}
});
</script>
<telerik:RadTabStrip ID=
"RadTabStrip1"
runat=
"server"
>
<Tabs>
<telerik:RadTab Text=
"one"
/>
<telerik:RadTab Text=
"two"
/>
<telerik:RadTab Text=
"three"
/>
<telerik:RadTab Text=
"four"
/>
<telerik:RadTab Text=
"five"
/>
</Tabs>
</telerik:RadTabStrip>
</div>
</form>
</body>
This should solve your issue.
All the best,
Bozhidar
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

Supriya
Top achievements
Rank 1
answered on 21 Mar 2014, 01:36 PM
Hello Bozhidar,
I have used same code as above.My requirement is need to move to tab using Right and Left keys.
But the problem I m facing is tabs are properly selected but its contents are not displying. Please find attached file.
Thanks,
Supriya.
I have used same code as above.My requirement is need to move to tab using Right and Left keys.
But the problem I m facing is tabs are properly selected but its contents are not displying. Please find attached file.
Thanks,
Supriya.
0
Hello,
There isn't a project attached to your post, if you want to send one you have to open a support ticket.
The following help article explains in detail the client side API of the TabStrip, which will help you resolve your issue with showing the content of the selected tab:
http://www.telerik.com/help/aspnet-ajax/tabstrip-client-side-basics.html
You can also see the built in Keyboard support of the TabStrip in the following demo:
http://demos.telerik.com/aspnet-ajax/tabstrip/examples/functionality/keyboardsupport/defaultcs.aspx
Regards,
Bozhidar
Telerik
There isn't a project attached to your post, if you want to send one you have to open a support ticket.
The following help article explains in detail the client side API of the TabStrip, which will help you resolve your issue with showing the content of the selected tab:
http://www.telerik.com/help/aspnet-ajax/tabstrip-client-side-basics.html
You can also see the built in Keyboard support of the TabStrip in the following demo:
http://demos.telerik.com/aspnet-ajax/tabstrip/examples/functionality/keyboardsupport/defaultcs.aspx
Regards,
Bozhidar
Telerik
Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.