New to Telerik UI for ASP.NET AJAXStart a 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:

SHORTCUTDESCRIPTION
TabFocus the next card.
Shift + TabFocus the previous card.
SpaceToggle the expand/collapse state of the item.
EnterToggle the expand/collapse state of the item.

and these ones in Horizontal mode:

SHORTCUTDESCRIPTION
EnterSelects the current event.
SpaceSelects the current event.
Left ArrowFocuses the previous date.
Right ArrowFocuses 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:

ASP.NET
<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
See Also
Not finding the help you need?
Contact Support