Updating content dynamically in kendo Timeline item

[Neeraj]

Hello,

          I am using kendo timeline javascript way . initially i bring only content for 1 timeline item . on timeline change i send request to request content for another item. 

     1)     I am able to get the content but on updating the data source using 
             

 $("#SampleTimeline").data('kendoTimeline').dataSource.data()[i].set("Description",response)

          it refresh, the timeline and it moves to initial first item . I also tried 

  $("#SampleTimeline").data('kendoTimeline').refresh()

                         It does same , moves to first item

   2) How to get index of clicked item in timeline ? so that i can open dynamically item that was clicked.  (After refresh it moves to 1st content, which is not good as UI/UX)

[Tsvetomir]

Hi Neeraj,

In general, after the change event, the DataBound event is triggered (if there has been a change in the data source of the TimeLine). What I can recommend is that you get the ID of the item in the change event via the event arguments. Namely, "e.dataItem" and access the ID. Alternatively, you could get the container's index via the "e.eventContainer". The full list of the event arguments could be found here:

https://docs.telerik.com/kendo-ui/api/javascript/ui/timeline/events/change

Additionally, create a flag that will indicate whether you should redirect to a specific event. Make an if-clause in the DataBound event handler. After accessing the ID (stored already in a variable), get it from the data source:

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/get

And obtain the uid of the item. Use the open method to navigate to the specific event.

var dataItem = timeline.dataSource.get(myStoredId);
var firstEvent = timeline.element.find(".k-timeline-track-item[data-uid='"+dataItem.uid+"']");
timeline.open(firstEvent);

Let me know if additional assistance is needed.

 

Kind regards,
Tsvetomir
Progress Telerik