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

6 posts, 0 answers
  1. Ram
    Ram avatar
    97 posts
    Member since:
    Jun 2011

    Posted 23 Nov 2011 Link to this post

    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.
  2. Bozhidar
    Admin
    Bozhidar avatar
    1103 posts

    Posted 24 Nov 2011 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ram
    Ram avatar
    97 posts
    Member since:
    Jun 2011

    Posted 24 Nov 2011 Link to this post

    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>
  5. Bozhidar
    Admin
    Bozhidar avatar
    1103 posts

    Posted 25 Nov 2011 Link to this post

    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
  6. Supriya
    Supriya avatar
    1 posts
    Member since:
    Nov 2012

    Posted 21 Mar 2014 in reply to Bozhidar Link to this post

    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. 
  7. Bozhidar
    Admin
    Bozhidar avatar
    1103 posts

    Posted 26 Mar 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017