Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

How to open the tabs by using key board "Tab"

5 Answers 115 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Ram
Top achievements
Rank 1
Ram asked on 23 Nov 2011, 05:08 PM
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.

5 Answers, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 24 Nov 2011, 12:11 PM
Hi Ram,

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
<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
Bozhidar
Telerik team
answered on 25 Nov 2011, 07:49 AM
Hello Ram,

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. 
0
Bozhidar
Telerik team
answered on 26 Mar 2014, 06:47 AM
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
 

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.

 
Tags
TabStrip
Asked by
Ram
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Ram
Top achievements
Rank 1
Supriya
Top achievements
Rank 1
Share this question
or