The Telerik UI Timeline TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI Timeline widget.
The Timeline widget displays a collection of events and their data in a chronological succession for each year.
You can scroll through the events and collapse/expand them. The events order can be vertical or horizontal, and you can customize their templates, as well as respond to events and use API control the widget behavior. You can also control the format of the rendered date for the event. If you provide a list of actions, they will be rendered as links after the description and images.
The following example demonstrates how to define the Timeline. Note the tabs for the controller and model code that show how to feed data to the widget.
Razor
@(Html.Kendo().Timeline<MyApp.Models.TimelineEventModel>().Name("Timeline").DataDateField("EventDate").DataDescriptionField("Description").DataSubTitleField("Subtitle").DataTitleField("Title").DataImagesField("Images").DataActionsField("Actions").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.DataSource(dt => dt.Read("GetTimelineData","Timeline")))
publicpartialclassTimeline:BaseController{publicJsonResultGetTimelineData(){List<TimelineEventModel> events =newList<TimelineEventModel>();
events.Add(newTimelineEventModel(){
Title ="Barcelona \u0026 Tenerife",
Subtitle ="May 15, 2015",
Description ="First event description.",
EventDate =newSystem.DateTime(2015,4,15),
Images =newList<TimelineEventImageModel>(){newTimelineEventImageModel(){ src ="https://demos.telerik.com/aspnet-mvc/tripxpert/Images/Gallery/Barcelona-and-Tenerife/Arc-de-Triomf,-Barcelona,-Spain_Liliya-Karakoleva.JPG?width=500&height=500"}},
Actions =newList<TimelineEventActionModel>(){newTimelineEventActionModel(){ text ="More info about Barcelona", url="https://en.wikipedia.org/wiki/Barcelona"}}});
events.Add(newTimelineEventModel(){
Title ="United States East Coast Tour",
Subtitle ="Feb 27, 2018",
Description ="The second event description.",
EventDate =newSystem.DateTime(2018,1,27),
Images =newList<TimelineEventImageModel>(){newTimelineEventImageModel(){ src ="https://demos.telerik.com/aspnet-mvc/tripxpert/Images/Gallery/United-States/Boston-Old-South-Church_Ivo-Igov.JPG?width=500&height=500"}},
Actions =newList<TimelineEventActionModel>(){newTimelineEventActionModel(){ text ="More info about New York City", url="https://en.wikipedia.org/wiki/New_York_City"}}});
events.Add(newTimelineEventModel(){
Title ="Malta, a Country of Knights",
Subtitle ="My second trip this year",
Description ="Third event description.",
EventDate =newSystem.DateTime(2015,5,25),
Images =newList<TimelineEventImageModel>(){newTimelineEventImageModel(){ src ="https://demos.telerik.com/aspnet-mvc/tripxpert/Images/Gallery/Malta/Bibliotheca-National-Library_Marie-Lan-Nguyen.JPG?width=500&height=500"}},
Actions =newList<TimelineEventActionModel>(){newTimelineEventActionModel(){ text ="More info about Malta", url="https://en.wikipedia.org/wiki/Malta"}}});returnJson(events);}}
C#
publicclassTimelineEventModel{publicstring Title {get;set;}publicstring Subtitle {get;set;}publicstring Description {get;set;}publicDateTime EventDate {get;set;}publicList<TimelineEventImageModel> Images {get;set;}publicList<TimelineEventActionModel> Actions {get;set;}}publicclassTimelineEventImageModel{publicstring src {get;set;}// this field name must be "src"}publicclassTimelineEventActionModel{publicstring text {get;set;}// this field name must be "text"publicstring url {get;set;}// this field name must be "url"}
To access an existing Timeline instance, use the .data() jQuery method, executed by the jQuery object of the originating element. Once you have the reference, you can use the Timeline client-side API.
Razor
@(Html.Kendo().Timeline<MyApp.Models.TimelineEventModel>().Name("Timeline").DataDateField("EventDate").DataDescriptionField("Description").DataSubTitleField("Subtitle").DataTitleField("Title").DataImagesField("Images").DataActionsField("Actions").Orientation("horizontal").DataSource(dt => dt.Read("GetTimelineData","Timeline"))// see the first example in this article for a sample data source)<buttononclick="buttonClick();">Go to next event</button><script>functionbuttonClick(){var timeline =$("#Timeline").data("kendoTimeline");
timeline.next();}</script>
Razor
<kendo-timelinename="Timeline"orientation="horizontal"datadatefield="EventDate"datatitlefield="Title"datasubtitlefield="Subtitle"datadescriptionfield="Description"dataactionsfield="Actions"dataimagesfield="Images"><datasource><transport><readurl="@Url.Action("GetTimelineData","Timeline")"/></transport><schema><model><fields><fieldname="EventDate"type="date"></field><fieldname="Title"type="string"></field><fieldname="Subtitle"type="string"></field><fieldname="Description"type="string"></field></fields></model></schema></datasource></kendo-timeline><buttononclick="buttonClick();">Go to next event</button><script>functionbuttonClick(){var timeline =$("#Timeline").data("kendoTimeline");
timeline.next();}</script>