New to Kendo UI for jQuery? Download free 30-day trial

Display the Timeline Events in Reverse Chronological Order

Environment

Product Timeline for Progress® Kendo UI®
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>
In this article
Not finding the help you need? Improve this article