Keyboard Navigation

24 Jul 2019 / 1 minute to read

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.