setDataSource

Sets the DataSource of an existing Timeline and rebinds it.

Parameters

dataSource kendo.data.DataSource

Example

<div id="timeline"></div>

<script>

$("#timeline").kendoTimeline({
    dataSource: {
        data:[ {"id":1,"title":"Bowling tournament","subtitle":"Location: Sterling Lanes","description":"Summer Bowling tournament in Michigan","date":"2025-06-30T21:00:00.000Z","actions":[{"text":"Visit the Bowling tournament page"}] },
                {"id":2,"title":"Charlie's first football game","subtitle":"Location: City Football Stadium","description":"Call coach Williams","date":"2022-10-22T21:00:00.000Z"},
                {"id":3,"title":"Alex's Birthday","subtitle":"Location: Alex's House","description":"Buy birthday cake and some fruits","date":"2010-01-09T22:00:00.000Z","images":[{"src":"https://demos.telerik.com/kendo-ui/content/web/foods/4.jpg"},{"src":"https://demos.telerik.com/kendo-ui/content/web/foods/16.jpg"}]},
                {"id":4,"title":"Vacation in Mexico","subtitle": "Location: Cabo San Lucas","description":"Check-in for the flight","date":"2017-12-24T22:00:00.000Z"}],
        schema: {
            model: {
            fields: {
                date: {
                type: "date"
                }
            }
            }
        }
    },
    orientation: "horizontal"
});

var timeline = $("#timeline").data().kendoTimeline;
timeline.setDataSource(new kendo.data.DataSource({
    data: [ {"id":1,"title":"First event","subtitle":"Location: First event location","description":"First event description","date": new Date(2025, 6, 30),"actions":[{"text":"First event action"}] }, {"id":2,"title":"Second event","subtitle":"Location: Second event location","description":"Second event description","date": new Date(2026, 6, 30),"actions":[{"text":"Second event action"}] }]
}));
</script>
In this article
Not finding the help you need? Improve this article