Display the Timeline Events in Reverse Chronological Order

Environment

Product	Progress® Kendo UI® Timeline for jQuery
Product Version	2021.2.616

Description

How can I display the Timeline events in reverse chronological order?

Solution

Utilize the sort configuration of the DataSource and sort the date field in descending order.

    sort: { field: "date", dir: "desc" }

    <div id="timeline"></div>
    <script>
        const baseUrl = "https://demos.telerik.com/kendo-ui";

        $(document).ready(function () {
            $("#timeline").kendoTimeline({
                dataSource: {
                  transport: {
                    read: {
                        url: baseUrl + "/content/web/timeline/events-vertical-part1.json",
                        dataType: "json"
                    }
                  },
                  schema: {
                    model: {
                      fields: {
                        date: {
                          type: "date"
                        }
                      }
                    }
                  },
                  sort: { field: "date", dir: "desc" }
                },
                alternatingMode: true,
                collapsibleEvents: true,
                orientation: "vertical"
            });
        });
    </script>