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
<%--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 >
<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.
Was this page helpful?
Yes
No
Thank you for your feedback!
Thank you for your feedback and comments. We will rectify this as soon as possible!
An unknown error has occurred. Please try again.
Help us improve this page