New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Keyboard Support

The enable the keyboard navigation of RadTimeline set its Navigatable property to 'true'.

Keyboard legend

In Vertical mode when the TimeLine is focused, the first card gets focused. In Horizontal mode when the TimeLine is focused, the timeline scrollable wrap element gets focused. For a complete example, refer to the demo on keyboard navigation of the timeline.

The timeline supports the following keyboard shortcuts in Vertical mode:

SHORTCUT DESCRIPTION
Tab Focus the next card.
Shift + Tab Focus the previous card.
Space Toggle the expand/collapse state of the item.
Enter Toggle the expand/collapse state of the item.

and these ones in Horizontal mode:

SHORTCUT DESCRIPTION
Enter Selects the current event.
Space Selects the current event.
Left Arrow Focuses the previous date.
Right Arrow Focuses the next date.

Focus

When the Navigatable property of the timeline is set to 'true' as well as the following JavaScript code is set, you can focus the timeline with the Alt+W shortcut:

<telerik:RadTimeline runat="server" ID="RadTimeline1" AlternatingMode="true" CollapsibleEvents="true" Orientation="Vertical" Navigatable="true">
<script>
    var $ = $telerik.$;
    $(document.body).keydown(function (e) {
        if (e.altKey && e.keyCode == 87) {
            $(".k-card:first").focus();
        }
    });
</script>

As result Alt + W focuses the timeline first card.

See Also

In this article
Not finding the help you need? Improve this article