Keyboard Navigation

The entire Toolbar commands can be accessed via the keyboard by specifying the KeyboardShortcut as in the following table.

KeyboardShortcut Function
Alt + j Focuses the control
UP Navigates up and left.
Down Navigates down and right.
Left Navigates up and left.
Right Navigates down and right.
Home Navigates to the starting item.
End Navigates to the ending item.
Enter Selects the focused item

Here is an example that has shortcuts associated with the Toolbar items.

Add the following code example to the corresponding ASPX page to render the Toolbar Control

  • html
    • <%--Refer Local Data section for style and data bound for toolbar items.--%>

<ej:Toolbar  ID="toolbarcontent" runat="server" Width="300px" DataIdField="Id" DataTooltipTextField="Tooltip" DataSpriteCssClassField="Css"></ej:Toolbar >
  • js
    • <script type="text/javascript">

    $(function () {

        // declaration

        $("#<%=toolbarcontent.ClientID%>").ejToolbar({ Width: "290px" });

        //Control focus key

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

            if (e.altKey && e.keyCode === 74) { // j- key code.

            $("#<%=toolbarcontent.ClientID%>").focus();

            }

        });

    });

</script>

    The following screenshot displays the output of the above code.