Telerik Forums
Kendo UI for jQuery Forum
1 answer
275 views

I would like to sort the timeline through the date field, in descending order, meaning that the first item to be displayed is the most recent date.

I used this way:

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

 

This works, but I wouldn't want the timeline to be displayed as it is now, with the most recent date being the first item from Left to Right (from newest to oldest). See Sreenshot_1.png

Because this creates a feeling that as I go forward in the timeline, instead of going "forward" in time, I am going backwards. It should be the opposite, when I click on "previous", I navigate backwards in the timeline, I go to an older date and not a newer date.

Given this, I would like to know if there is any way to order the horizontal timeline items descending with a visual behavior where the first item to be displayed is the one most to the right of the timeline (most recent). And when navigating "backwards", clicking on "Previous" I navigate to the oldest items chronologically.

I even tried to force this behavior by ordering ascending and using the open() method as below:

    let timeline = $("#timeline").data().kendoTimeline;
    let firstEvent = timeline.element.find(".k-timeline-track-item:last-child");
    timeline.open(firstEvent);
    timeline.redraw();

But this method generates strange behavior on small screens like mobile devices. When triggering open(), the "Previous" navigation button is disabled and therefore the horizontal timeline is left unnavigated. See Screenshot_2.png

Georgi Denchev
Telerik team
 answered on 19 Aug 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?