Keyboard Navigation

1 Oct 20152 minutes to read

Tab control provides keyboard interaction support. By using this functionality, you can interact with the control with the keyboard. This is achieved by setting the AllowKeyboardNavigation to true. By default, this property value is set to true.

The following table illustrates the accessible keys and their usage

Keys Behavior
Up Selected previous item.
Right Selected previous item.
Down Selected next item.
Left Selected next item.
Home Selected first item.
End Selected last item.

The following code example is used to render the Tab element in the RTL format.

Add the following ASPX to render the Tab with keyboard navigation.

<ej:Tab ID="dishtype" runat="server" Width="600px" AllowKeyboardNavigation="true">

    <Items>

        <ej:TabItem ID="pizzatype" Text="Pizza Menu">

            <ContentSection>

                <p>

                    Pizza cooked to perfection tossed with milk, vegetables, potatoes, poultry, 100% pure mutton, and cheese - and in creating nutritious and tasty meals to maintain good health.</p>

            </ContentSection>

        </ej:TabItem>

        <ej:TabItem ID="sandwichtype" Text="Sandwich Menu">

            <ContentSection>

                <p>

                    Sandwich cooked to perfection tossed with bread, milk, vegetables, potatoes, poultry, 100% pure mutton, and cheese - and in creating nutritious and tasty meals to maintain good health.</p>

            </ContentSection>

        </ej:TabItem>

    </Items>

</ej:Tab>
$(function () {

        //Control focus key

        $(document).on("keydown", function (e) {

            if (e.altKey && e.keyCode === 74) {

                // j- key code.

$("#<%=dishtype.ClientID%> ul a").focus();

            }

        });

    });

The following screenshot illustrates the Tab with keyboard navigation.