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


The Timeline can render links (<a> tags) for the items from the Actions collection in its data source, so the user can navigate to the specific pages.

The href attribute of an action will be set to the value of the src field of the action literal, and the text will come from the text field.

The example below shows how you can a few actions actions for one event.

               .DataSource(dt => dt.Read("GetTimelineData", "Timeline"))
    <kendo-timeline name="Timeline" 
                <read url="@Url.Action("GetTimelineData","Timeline")" />
                        <field name="EventDate" type="date"></field>
                        <field name="Title" type="string"></field>
                        <field name="Subtitle" type="string"></field>
                        <field name="Description" type="string"></field>
public partial class Timeline : BaseController
        public JsonResult GetTimelineData()
            List<TimelineEventModel> events = new List<TimelineEventModel>();

            events.Add(new TimelineEventModel() {
                Title = "Summer trip in Europe",
                Subtitle = "May 15, 2015",
                Description = "Lorem ipsum dolor sit amet",
                EventDate = new System.DateTime(2015, 6, 25),
                Actions = new List<TimelineEventActionModel>() {
                    new TimelineEventActionModel() { text = "More info about Barcelona", url="" },
                    new TimelineEventActionModel() { text = "More info about Malta", url="" }

            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),
                Actions = new List<TimelineEventActionModel>() {
                    new TimelineEventActionModel() { text = "More info about New York City", url="" }

            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<TimelineEventActionModel> Actions { get; set; }

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