[Solved] Tab order

[Sean Severson]

I have a tree view control which is in the second position in the tab order on the page.  I can set the focus to this control and tab through the nodes, but when i reach the last node and hit tab, focus is not set on the next control in the tab order.  i'm not sure where the focus gets set after tabbing out of the treeview, but if I tab one or two more times I can see the focus in the address bar of the browser.

I would like to be able to tab out of the treeview control and into the next control in the tab order.

Sean M. Severson

<div class="margin" >
        <telerik:RadWindowManager ID='aWindowManager1' ShowContentDuringLoad="false" VisibleStatusbar="false" runat='server' Behavior="Default" InitialBehavior="None" Skin="Simple">
            <Windows>
<telerik:RadWindow runat="server" NavigateUrl="WC_Territory_Search.aspx" Behaviors="None" Behavior="None" InitialBehavior="None" Width="475px" Height="360px" Left="" Top="" OnClientClose="OnWCTerritoryClose" ID="RadWindow1" Style="display:none;" Modal="True" ReloadOnShow="true">
                </telerik:RadWindow>
</Windows>
        </telerik:RadWindowManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="False" UpdateMode="Conditional">
            <ContentTemplate>
                <div id="header" style="left: 0px" runat="server" >
                    <table class="SharedEntry + NoBorder" style="width: 750px; border-right: 1px solid;
                        border-left: 1px solid; border-top: 1px solid; margin-bottom: 0; height: 40px;">
                        <caption>
                            Contact Search</caption>
                        <tr>
                            <th class="noborder" style="width: 111px; vertical-align: bottom;">
                                Contact Type:</th>
                            <td style="width: 580px; vertical-align: bottom">
                                <div class="categoryControls">
                                    <asp:DropDownList ID="Search_ContactType" runat="server" Width="200px" AutoPostBack="True"
                                        OnSelectedIndexChanged="Search_ContactType_SelectedIndexChanged" TabIndex="5">
                                    </asp:DropDownList>
                                </div>
                                <div class="categoryControls" style="margin-left: 5px">
                                    <cc3:HelpImageButton ID="HelpImageButton3" runat="server" ImageUrl="/SI/Images/help.ico"
                                        CausesValidation="False" HelpTopicID="48" Height="20px" Width="20px" TabIndex="-1" />
                                </div>
                                <div class="categoryControls" style="margin-left: 5px">
                                    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"
                                        DisplayAfter="1">
                                        <ProgressTemplate>
                                            <img src="/SI/Images/status_anim.gif" alt="Wait" />
                                        </ProgressTemplate>
                                    </asp:UpdateProgress>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <div id="tree" style="left: 0px; overflow: auto; position: relative" runat="server">
                    <table class="SharedEntry + NoBorder" style="width: 750px; border-right: 1px solid; border-left: 1px solid; margin-top: 0; margin-bottom: 0;  ">
                        <tr>
                            <th class="noborder" style="width: 111px; vertical-align: top;">
                                Specialty:</th>
                            <td style="vertical-align: top; width: 580px;">
                                <telerik:RadTreeView ID="rtvSpecialty" runat="server" Width="550px" BorderStyle="Solid"
                                    BorderWidth="1px" CheckBoxes="True" Font-Names="Verdana" MultipleSelect="True"
                                    BackColor="White" Height="100%" OnContextMenuItemClick="RadTreeView1_ContextMenuItemClick" OnClientNodeChecked="treeNodeChecked"
                                    BorderColor="#7F9DB9" TabIndex="10" >
                                    <ContextMenus>
                                        <telerik:RadTreeViewContextMenu runat="server" ID="RadTreeViewContextMenu1">
                                            <Items>
                                                <telerik:RadMenuItem runat="server" Text="Clear All Selected">
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem runat="server" Text="Expand All">
                                                </telerik:RadMenuItem>
                                                <telerik:RadMenuItem runat="server" Text="Collapse All">
                                                </telerik:RadMenuItem>
                                            </Items>
                                        </telerik:RadTreeViewContextMenu>
                                    </ContextMenus>
                                </telerik:RadTreeView>
                            </td>
                        </tr>
                    </table>
                </div>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Search_ContactType" EventName="SelectedIndexChanged" />
            </Triggers>
        </asp:UpdatePanel>
        <div id="footer" runat="server" style="left: 0px;">
            <table class="SharedEntry + NoBorder" style="width: 750px; border-right: 1px solid;
                border-left: 1px solid; margin-top: 0; margin-bottom: 0;">
                <tr>
                    <th class="noborder" style="width: 111px">
                        Business:</th>
                    <td>
                        <asp:TextBox ID="Search_Business" runat="server" Width="200" TabIndex="15" MaxLength="90"></asp:TextBox>&nbsp;
                        </td>
                    <th class="noborder">
                        Address Type:</th>
                    <td style="width: 248px">
                        <asp:DropDownList ID="Search_AddressType" runat="server" Width="205px" TabIndex="50">
                            <asp:ListItem></asp:ListItem>
                            <asp:ListItem Value="P">Primary</asp:ListItem>
                            <asp:ListItem Value="S">Secondary</asp:ListItem>
                            <asp:ListItem Value="B">Billing</asp:ListItem>
                            <asp:ListItem>Unknown</asp:ListItem>
                        </asp:DropDownList></td>
                </tr>
                <tr>
                    <th class="noborder" style="width: 111px">
                        First Name:</th>
                    <td>
                        <asp:TextBox ID="Search_First_Name" runat="server" Width="200" Font-Italic="False"
                            TabIndex="20" MaxLength="45"></asp:TextBox></td>
                    <th class="noborder">
                        Address:</th>
                    <td style="width: 248px">
                        <asp:TextBox ID="Search_Address1" runat="server" Width="200px" Enabled="False" Font-Italic="False"
                            TabIndex="55" MaxLength="30">Select Address Type</asp:TextBox></td>
                </tr>
                <tr>
                    <th class="noborder" style="width: 111px">
                        Last Name:</th>
                    <td>
                        <asp:TextBox ID="Search_Last_Name" runat="server" Width="200" TabIndex="25" MaxLength="45"></asp:TextBox></td>
                    <th class="noborder">
                        City:</th>
                    <td style="width: 248px">
                        <asp:TextBox ID="Search_City" runat="server" Width="200px" Enabled="False" Font-Italic="False"
                            TabIndex="60" MaxLength="30">Select Address Type</asp:TextBox></td>
                </tr>
                <tr>
                    <th class="noborder" style="width: 111px">
                        TIN Number:</th>
                    <td>
                        <asp:TextBox ID="Search_TIN_Number" runat="server" Width="200" TabIndex="30" MaxLength="9"></asp:TextBox></td>
                    <th class="noborder">
                        State:</th>
                    <td style="width: 248px">
                        <telerik:RadComboBox ID="Search_State" runat="server" Width="205px" AppendDataBoundItems="True"
                            EnableEmbeddedSkins="False" Skin="WindowsXP" Enabled="False" TabIndex="65">
                            <ExpandAnimation Type="None"></ExpandAnimation>
                            <CollapseAnimation Type="None"></CollapseAnimation>
                        </telerik:RadComboBox>
                    </td>
                </tr>
                <tr>
                    <th class="noborder" style="width: 111px">
                        NPI Number:</th>
                    <td>
                        <asp:TextBox ID="Search_NPI_Number" runat="server" Width="200" TabIndex="35" MaxLength="10"></asp:TextBox></td>
                    <th class="noborder">
                        Zip:</th>
                    <td style="width: 248px">
                           <div style="float: left">
                        <asp:TextBox ID="Search_Zip" runat="server" Width="200px" Enabled="False" Font-Italic="False"
                            TabIndex="70">Select Address Type</asp:TextBox>
                            </div>
                        <div style="float: left; margin-left: 5px; margin-top: 3px"><asp:RegularExpressionValidator ID="regexAccidentZip" runat="server" ControlToValidate="Search_Zip"
                            Display="Dynamic" ErrorMessage="RegularExpressionValidator" ValidationExpression="_____-____|\d{5}-____|\d{5}-\d{4}|\d{5}|Select Address Type" TabIndex="-1"><img src='/SI/Images/warning16.png' alt='Enter a valid Zip Code'/></asp:RegularExpressionValidator>
                        </div>
                        <cc2:MaskedEditExtender id="mskextZip" runat="server" ClearMaskOnLostFocus="false"
                            Filtered="-" Mask="99999-9999" MaskType="None" TargetControlID="Search_Zip">
                        </cc2:MaskedEditExtender></td>
                </tr>
                <tr>
                    <th class="noborder" style="width: 111px; height: 24px;">
                        Licensed State:</th>
                    <td>
                        <cc3:EditTableDropDownList ID="Search_LicenseState" runat="server" RepositoryProperty="ContactLicensedStates"
                            Width="205px" IncludeEmptyOption="True" TabIndex="40">
                        </cc3:EditTableDropDownList>
                    </td>
                    <th class="noborder">
                        County:</th>
                    <td style="width: 248px">
                        <telerik:RadComboBox ID="Search_County" runat="server" Width="205px" AppendDataBoundItems="True"
                            EnableEmbeddedSkins="False" Skin="WindowsXP" Enabled="False" TabIndex="75">
                            <ExpandAnimation Type="None" />
                            <CollapseAnimation Type="None" />
                        </telerik:RadComboBox>
                    </td>
                </tr>
                <tr>
                    <th class="noborder" style="width: 111px;">
                        WC Territory:</th>
                    <td >
                        <div style="float: left">
                            <asp:TextBox ID="Search_WC_Territory" runat="server" Width="200" TabIndex="45" MaxLength="25"></asp:TextBox>
                        </div>
                        <div style="float: left;margin-left: 5px">
                            <asp:ImageButton id="Img4" runat="server" ImageUrl="/SI/Images/check.png" alt="Check" border="0" TabIndex="-1" />
                        </div>
                        <div style="float: left; margin-left: 5px">
                            <cc3:HelpImageButton ID="HelpImageButton1" runat="server" ImageUrl="/SI/Images/help.ico"
                                CausesValidation="False" Height="20px" Width="20px" HelpTopicID="51" TabIndex="-1" />
                        </div>
                    </td>
                    <th class="noborder">
                        PAL Territory:</th>
                    <td style="width: 248px">

                                <div style="float: left">
                                    <telerik:RadComboBox ID="Search_PAL_Territory" runat="server" OnClientDropDownOpened="OnClientDropDownOpenedHandler"
                                        Width="205px" ShowToggleImage="true" TabIndex="80" EnableEmbeddedSkins="False"
                                        Skin="WindowsXP">
                                        <Items>
                                            <telerik:RadComboBoxItem runat="server"></telerik:RadComboBoxItem>
                                        </Items>
                                        <ItemTemplate>
                                            <div id="div1">
                                                <telerik:RadTreeView ID="palTerritoryTreeView" runat="server" OnClientNodeClicking="nodeClicking" CheckBoxes="false">
                                                    <Nodes>
                                                    </Nodes>
                                                </telerik:RadTreeView>
                                            </div>
                                        </ItemTemplate>
                                        <ExpandAnimation Type="None" />
                                        <CollapseAnimation Type="None" />
                                    </telerik:RadComboBox>
                                    </div>
                                <div style="margin-left: 5px; float: left">
                                    <cc3:HelpImageButton ID="HelpImageButton2" runat="server" ImageUrl="/SI/Images/help.ico"
                                        CausesValidation="False" Height="20px" Width="20px" HelpTopicID="52" TabIndex="-1"/>
                                </div>

                    </td>
                </tr>
                </table>
                <table class="SharedEntry + NoBorder" style="width: 750px; border-right: 1px solid;
                border-left: 1px solid; border-bottom: 1px solid; margin-top: 0; margin-bottom: 0;">

                <tr>
                    <td colspan="4">
                        <table border="0" width="100%">
                            <tr>
                                <td align="left" width="20%" style="height: 26px">
                                    <asp:LinkButton ID="lnkHome" runat="server" Font-Size="Medium" Text="Claim Contacts"
                                        Visible="False" TabIndex="-1"></asp:LinkButton></td>
                                <td class="center" width="60%" style="height: 26px">
                                    <asp:Button ID="btnSearch" runat="server" Text="Search" Width="64px" TabIndex="85" />
                                    <asp:Button ID="btnClear" runat="server" Text="Clear" Width="64px" TabIndex="90" /></td>
                                <td align="right" width="20%" style="height: 26px">
                                    </td>
                            </tr>
                        </table>
                        </td>
                </tr>
                </table>

        </div>
    </div>

[Yana]

Hello Sean,

Please subscribe to OnClientKeyPressing event of RadTreeView and add the following handler to your page:

<script type="text/javascript">
    function keyPressing(sender, args) {
        if (args.get_domEvent().keyCode == 9)
            sender.get_element().focus();
    }
</script>

Hope this helps.

All the best,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Sean Severson]

Yana,

 

The javascript to tab off the RadTreeView control works unless one of the checkboxes has the focus.  In this case, the tab button will tab the nodes within the treeview.  Can I access the checkbox and set the onkeypress to the javascript you provided?

Sean M. Severson

[Yana]

Hi Sean,

I'm sorry for the late reply.

I tried to focus the checkbox and then press tab button and the next element on the page is focused. I cannot understand exactly what is the needed behavior?

Best wishes,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Sean Severson]

Yana,

When a checkbox has focus in my treeview and hit the tab key, the focus goes to the next checkbox in the treeview, not the next countrol in tab order on the page, which is what I want.

Sean M. Severson

[Yana]

Hi Sean,

Please add the following javascript code to your page - it adds keydown event handler to all the checkboxes i the treeview:

function pageLoad() {
    var $ = $telerik.$;
    $(".rtChk").keydown(function(event) {
        if (event.keyCode == 9) {
            $find("<%=rtvSpecialty.ClientID %>").get_element().focus();
        }
    });
}

Best wishes,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.