Components / Navigation / TimeLine

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

Orientation

The Timeline can render its events in a vertical or horizontal list.

Vertical

By default, the timeline is vertical, with events arranged on one side of the axis.

You can have the events render alternatingly on both sides of the axis by adding its .AlternatingMode() option.

If you add the .CollapsibleEvents() option, all events will start out collapsed (by default, all events are expanded). The user can then expand a particular event to see more than its title and subtitle.

    @(Html.Kendo().Timeline<MyApp.Models.TimelineEventModel>()
               .Name("Timeline")
               .Orientation("vertical") // defines the layout of the widget
               .AlternatingMode() // renders the events on both sides of the axis in vertical mode
               .CollapsibleEvents() // starts all events collapsed in vertical mode
               .DataDateField("EventDate")
               .DataDescriptionField("Description")
               .DataSubTitleField("Subtitle")
               .DataTitleField("Title")
               .DataImagesField("Images")
               .DataActionsField("Actions")
               .DataSource(dt => dt.Read("GetTimelineData", "Timeline"))
    )

    <kendo-timeline name="Timeline"
                    orientation="vertical"
                    datadatefield="EventDate"
                    datatitlefield="Title"
                    datasubtitlefield="Subtitle"
                    datadescriptionfield="Description"
                    dataactionsfield="Actions"
                    dataimagesfield="Images"
                    alternating-mode="true"
                    collapsible-events="true">
        <datasource>
            <transport>
                <read url="@Url.Action("GetTimelineData","Timeline")" />
            </transport>
            <schema>
                <model>
                    <fields>
                        <field name="EventDate" type="date"></field>
                        <field name="Title" type="string"></field>
                        <field name="Subtitle" type="string"></field>
                        <field name="Description" type="string"></field>
                    </fields>
                </model>
            </schema>
        </datasource>
    </kendo-timeline>

public partial class Timeline : BaseController
{
    public JsonResult GetTimelineData()
    {
        List<TimelineEventModel> events = new List<TimelineEventModel>();

        events.Add(new TimelineEventModel() {
            Title = "Barcelona \u0026 Tenerife",
            Subtitle = "May 15, 2015",
            Description = "First event description.",
            EventDate = new System.DateTime(2015, 4, 15),
            Images = new List<TimelineEventImageModel>() {
                new TimelineEventImageModel() { src = "https://demos.telerik.com/aspnet-mvc/tripxpert/Images/Gallery/Barcelona-and-Tenerife/Arc-de-Triomf,-Barcelona,-Spain_Liliya-Karakoleva.JPG?width=500&amp;height=500" }
            },
            Actions = new List<TimelineEventActionModel>() {
                new TimelineEventActionModel() { text = "More info about Barcelona", url="https://en.wikipedia.org/wiki/Barcelona" }
            }
        });

        events.Add(new TimelineEventModel()
        {
            Title = "United States East Coast Tour",
            Subtitle = "Feb 27, 2018",
            Description = "The second event description.",
            EventDate = new System.DateTime(2018, 1, 27),
            Images = new List<TimelineEventImageModel>() {
                new TimelineEventImageModel() { src = "https://demos.telerik.com/aspnet-mvc/tripxpert/Images/Gallery/United-States/Boston-Old-South-Church_Ivo-Igov.JPG?width=500&amp;height=500" }
            },
            Actions = new List<TimelineEventActionModel>() {
                new TimelineEventActionModel() { text = "More info about New York City", url="https://en.wikipedia.org/wiki/New_York_City" }
            }
        });

        events.Add(new TimelineEventModel()
        {
            Title = "Malta, a Country of Knights",
            Subtitle = "My second trip this year",
            Description = "Third event description.",
            EventDate = new System.DateTime(2015, 5, 25),
            Images = new List<TimelineEventImageModel>() {
                new TimelineEventImageModel() { src = "https://demos.telerik.com/aspnet-mvc/tripxpert/Images/Gallery/Malta/Bibliotheca-National-Library_Marie-Lan-Nguyen.JPG?width=500&amp;height=500" }
            },
            Actions = new List<TimelineEventActionModel>() {
                new TimelineEventActionModel() { text = "More info about Malta", url="https://en.wikipedia.org/wiki/Malta" }
            }
        });


        eturn Json(events);
    }
}

public class TimelineEventModel
{
    public string Title { get; set; }
    public string Subtitle { get; set; }
    public string Description { get; set; }

    public DateTime EventDate { get; set; }

    public List<TimelineEventImageModel> Images { get; set; }
    public List<TimelineEventActionModel> Actions { get; set; }
}

public class TimelineEventImageModel
{
    public string src { get; set; } // this field name must be "src"
}
public class TimelineEventActionModel
{
    public string text { get; set; } // this field name must be "text"
    public string url { get; set; } // this field name must be "url"
}

Horizontal

To use the horizontal rendering, set the .Orientation("horizontal") option.

In the horizontal mode, the timeline renders buttons the user can click or tap to navigate between periods. There is always one rendered event below the time axis, and the user can select another to reveal its details.

The horizontal mode renders the event details on demand (only when they are selected), and is responsive (renders as many of the events as there is room on the axis for).

Alternating rendering and collapsing is not available for the events in this mode.

    @(Html.Kendo().Timeline<MyApp.Models.TimelineEventModel>()
               .Name("Timeline")
               .Orientation("horizontal") // defines the layout of the widget
               .DataDateField("EventDate")
               .DataDescriptionField("Description")
               .DataSubTitleField("Subtitle")
               .DataTitleField("Title")
               .DataImagesField("Images")
               .DataActionsField("Actions")
               .DataSource(dt => dt.Read("GetTimelineData", "Timeline"))
    )

    <kendo-timeline name="Timeline"
                    orientation="horizontal"
                    datadatefield="EventDate"
                    datatitlefield="Title"
                    datasubtitlefield="Subtitle"
                    datadescriptionfield="Description"
                    dataactionsfield="Actions"
                    dataimagesfield="Images">
        <datasource>
            <transport>
                <read url="@Url.Action("GetTimelineData","Timeline")" />
            </transport>
            <schema>
                <model>
                    <fields>
                        <field name="EventDate" type="date"></field>
                        <field name="Title" type="string"></field>
                        <field name="Subtitle" type="string"></field>
                        <field name="Description" type="string"></field>
                    </fields>
                </model>
            </schema>
        </datasource>
    </kendo-timeline>

public partial class Timeline : BaseController
{
    public JsonResult GetTimelineData()
    {
        List<TimelineEventModel> events = new List<TimelineEventModel>();

        events.Add(new TimelineEventModel() {
            Title = "Barcelona \u0026 Tenerife",
            Subtitle = "May 15, 2015",
            Description = "First event description.",
            EventDate = new System.DateTime(2015, 4, 15),
            Images = new List<TimelineEventImageModel>() {
                new TimelineEventImageModel() { src = "https://demos.telerik.com/aspnet-mvc/tripxpert/Images/Gallery/Barcelona-and-Tenerife/Arc-de-Triomf,-Barcelona,-Spain_Liliya-Karakoleva.JPG?width=500&amp;height=500" }
            },
            Actions = new List<TimelineEventActionModel>() {
                new TimelineEventActionModel() { text = "More info about Barcelona", url="https://en.wikipedia.org/wiki/Barcelona" }
            }
        });

        events.Add(new TimelineEventModel()
        {
            Title = "United States East Coast Tour",
            Subtitle = "Feb 27, 2018",
            Description = "The second event description.",
            EventDate = new System.DateTime(2018, 1, 27),
            Images = new List<TimelineEventImageModel>() {
                new TimelineEventImageModel() { src = "https://demos.telerik.com/aspnet-mvc/tripxpert/Images/Gallery/United-States/Boston-Old-South-Church_Ivo-Igov.JPG?width=500&amp;height=500" }
            },
            Actions = new List<TimelineEventActionModel>() {
                new TimelineEventActionModel() { text = "More info about New York City", url="https://en.wikipedia.org/wiki/New_York_City" }
            }
        });

        events.Add(new TimelineEventModel()
        {
            Title = "Malta, a Country of Knights",
            Subtitle = "My second trip this year",
            Description = "Third event description.",
            EventDate = new System.DateTime(2015, 5, 25),
            Images = new List<TimelineEventImageModel>() {
                new TimelineEventImageModel() { src = "https://demos.telerik.com/aspnet-mvc/tripxpert/Images/Gallery/Malta/Bibliotheca-National-Library_Marie-Lan-Nguyen.JPG?width=500&amp;height=500" }
            },
            Actions = new List<TimelineEventActionModel>() {
                new TimelineEventActionModel() { text = "More info about Malta", url="https://en.wikipedia.org/wiki/Malta" }
            }
        });


        return Json(events);
    }
}

public class TimelineEventModel
{
    public string Title { get; set; }
    public string Subtitle { get; set; }
    public string Description { get; set; }

    public DateTime EventDate { get; set; }

    public List<TimelineEventImageModel> Images { get; set; }
    public List<TimelineEventActionModel> Actions { get; set; }
}

public class TimelineEventImageModel
{
    public string src { get; set; } // this field name must be "src"
}
public class TimelineEventActionModel
{
    public string text { get; set; } // this field name must be "text"
    public string url { get; set; } // this field name must be "url"
}

See Also

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