Timeline - Horizontal - Reverse Chronological order from the Oldest to Newest (Left to Right)

1 Answer 27 Views
Sortable Timeline
Vinicius
Top achievements
Rank 1
Vinicius asked on 16 Aug 2021, 02:45 PM

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

1 Answer, 1 is accepted

Sort by
0
Georgi Denchev
Telerik team
answered on 19 Aug 2021, 11:16 AM

Hello, Vinicius,

Thank you for the provided details.

Based on the description of the problem, the correct approach would be to use the open method and navigate to the last event of the timeline(like you have done), without applying any type of sorting to the data. 

I was able to reproduce the problem with the smaller screen and I can confirm that this is indeed a bug. I have logged an item in our Feedback Portal in your name:

https://feedback.telerik.com/kendo-jquery-ui/1532326-timeline-horizontal-calling-open-method-on-a-small-screen-disables-the-navigation-arrows 

As a workaround for now, you can set a min-width to the Timeline element in order to make sure at least 2 items are available at any given time.

Dojo example:

https://dojo.telerik.com/@gdenchev/OVUHAjaY 

Best Regards,
Georgi Denchev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Sortable Timeline
Asked by
Vinicius
Top achievements
Rank 1
Answers by
Georgi Denchev
Telerik team
Share this question
or