collapse

Fires when an event is going to be collapsed.

This event is supported only in vertical mode.

Event Data

e.sender kendo.ui.Timeline

The widget instance which fired the event.

e.dataItem kendo.data.Model

The data item asociated with the event that is going to be expanded.

e.preventDefault Function

If invoked, prevents the collapse action.

Example - hooking up to the collapse 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: "vertical",
    collapse: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
        console.log("data: ", e.dataItem);
        //handle event
    }
});

var timeline = $("#timeline").data().kendoTimeline;
var firstEvent = timeline.element.find(".k-timeline-event:eq(0)");
timeline.expand(firstEvent);
</script>