navigate

Fires when the left or right arrow is clicked.

Event Data

e.sender kendo.ui.Timeline

The widget instance which fired the event.

e.action String

next or previous values depending whether user is trying to load next or previous portion of events.

e.preventDefault Function

If invoked, prevents the navigate action.

Example - hooking up to the navigate event

<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"
                }
            }
            }
        }
    },
    collapsibleEvents: true,
    orientation: "horizontal",
    navigate: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
        console.log("action: ", e.action);
        //handle event
    }
});
</script>