Images

The Timeline can render an <img /> tag for the first item from the Images collection in its data source. Its src attribute will be set to the value of the src field of the image literal.

The example below shows how you can add an image for the events.

If you want to show more than one image, you need to customize the template of the Timeline.

Razor

    @(Html.Kendo().Timeline<Kendo.Mvc.Examples.Models.TimelineEventModel>()
               .Name("Timeline")
               .DataDateField("EventDate")
               .DataDescriptionField("Description")
               .DataSubTitleField("Subtitle")
               .DataTitleField("Title")
               .DataImagesField("Images")
               .Orientation("vertical")
               .DataSource(dt => dt.Read("GetTimelineData", "Timeline"))
    )

Razor

    <kendo-timeline name="Timeline" 
                    orientation="vertical"
                    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>

C#

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, 5, 25),
            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" }
            }
        });

        events.Add(new TimelineEventModel()
        {
            Title = "United States East Coast Tour",
            Subtitle = "Feb 27, 2018",
            Description = "The second event description.",
            EventDate = new System.DateTime(2018, 2, 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" }
            }
        });

        
        return Json(events);
    }
}

C#

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 class TimelineEventImageModel
{
    public string src { get; set; } // this field name must be "src"
}

See Also

• Templates in the Timeline
• Basic Usage of the Timeline (Demo)