This is a migrated thread and some comments may be shown as answers.

Updating content dynamically in kendo Timeline item

1 Answer 135 Views
Timeline
This is a migrated thread and some comments may be shown as answers.
Neeraj
Top achievements
Rank 1
Veteran
Neeraj asked on 03 Jul 2020, 02:22 PM

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)

1 Answer, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 07 Jul 2020, 07:48 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Timeline
Asked by
Neeraj
Top achievements
Rank 1
Veteran
Answers by
Tsvetomir
Telerik team
Share this question
or