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

Horizontal Mode

You can control the orientation of RadTimeline by setting its Orientation property either to Horizontal or Vertical. By default, RadTimeline is vertically oriented with its events arranged on one side of the axis.

In the Horizontal mode, RadTimeline renders buttons which you can click/tap to navigate between periods. One of the events is always rendered below the time axis and you can select another event to reveal its details.

  • DefaultCS.aspx
  • styles.css
  • events.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" />
</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 ID="RadTimeline1" runat="server" Orientation="Horizontal">
            <WebServiceClientDataSource>
                <WebServiceSettings>
                    <Select Url="events.json" DataType="JSON" />
                </WebServiceSettings>
                <Schema>
                    <Model>
                        <telerik:ClientDataSourceModelField DataType="Date" FieldName="date" />
                    </Model>
                </Schema>
                <SortExpressions>
                    <telerik:ClientDataSourceSortExpression FieldName="date" SortOrder="Asc" />
                </SortExpressions>
            </WebServiceClientDataSource>
        </telerik:RadTimeline>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance