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

Keyboard Support

Keyboard Support

The enable the keyboard navigation of RadTimeline set its Navigatable property to 'true'. You can focus it by iterating through the Page controls using the Tab key, alternatively, you can use the Alt+W shortcut as shown in the script below:

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

The demo showcases how to focus the widget when the Vertical mode is used. In order to focus the widget with the ALT+W key combination in Horizontal mode, you should use the ".k-timeline-scrollable-wrap" class as a selector.

Keyboard Legend

The timeline supports the following keyboard shortcuts in Vertical mode:

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

Shortcuts in Horizontal mode:

  • Enter
    • Selects the current event.
  • Space
    • Selects the current event.
  • Left Arrow
    • Focuses the previous date.
  • Right Arrow
    • Focuses the next date.
  • DefaultCS.aspx
  • scripts.js
  • styles.css
  • events-vertical-part1.json
<%@ Page Language="c#" AutoEventWireup="true"   %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
    <script src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container" runat="server">
        <telerik:RadTimeline runat="server" ID="RadTimeline1" AlternatingMode="true" CollapsibleEvents="true" Navigatable="true">
            <ClientEvents OnDataBound="OnDataBound" />
            <WebServiceClientDataSource>
                <WebServiceSettings>
                    <Select Url="events-vertical-part1.json" DataType="JSON" />
                </WebServiceSettings>
                <Schema>
                    <Model>
                        <telerik:ClientDataSourceModelField DataType="Date" FieldName="date" />
                    </Model>
                </Schema>
                <SortExpressions>
                    <telerik:ClientDataSourceSortExpression FieldName="date" SortOrder="Desc" />
                </SortExpressions>
            </WebServiceClientDataSource>
        </telerik:RadTimeline>
        <script>
            var $ = $telerik.$;
            $(document.body).keydown(function (e) {
                if (e.altKey && e.keyCode == 87) {
                    $(".k-card:first").focus();
                }
            });
        </script>

    </div>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance