Timeline event caret not shown consistently when using timeline.open()

1 Answer 26 Views
Timeline
Laura
Top achievements
Rank 1
Laura asked on 05 Apr 2022, 10:19 PM

Hi,

I'm using the .open() method on a timeline. When opening an event with this method, the little triangular caret on the event card is not consistently displayed.

This is what I expect to see. The triangle is displayed when I click on an event.

 

When an event is opened via the .open() method, the caret is not usually displayed (but sometimes it is, this is not consistent).

 

 

Code:

// eventData comes from an ajax call, this function is invoked in the callback

function initTimeline(eventData) {
    $("#timeline").unbind();
    $("#timeline").html('');
    $("#timeline").removeClass();

    timeline = $("#timeline").kendoTimeline({
        eventTemplate: kendo.template($("#eventTemplate").html()),
        dateFormat: "MMMM yyyy",
        orientation: timelineOrientation,
        collapsibleEvents: true,
        dataSource: {
            data: eventData, 
            schema: {
                model: {
                    fields: {
                        date: {
                            type: "date"
                        },
                    }
                }
            }
        },
        dataBound: function (e) {
            data = e.sender.dataSource.data();

            // Create the timeline type filter menu
            createTimelineFilterMenu();

            // Initalize any timeline datatables
            fInitAllDataTables();
        },
        change: function (e) {
            setTimeout(fInitAllDataTables, 1000);
        }
    });

// this is called on button click, it opens the first event in the timeline
function goToFirst() {
    var kendoTimeline = $("#timeline").data().kendoTimeline;
    var firstEvent = kendoTimeline.element.find(".k-timeline-track-item:not(.k-timeline-flag-wrap):first");
    kendoTimeline.open(firstEvent);
}

1 Answer, 1 is accepted

Sort by
0
Georgi Denchev
Telerik team
answered on 08 Apr 2022, 02:52 PM

Hi, Laura,

Thank you for the provided details and code sample.

I am having a some difficulties reproducing the problem, so I cannot guarantee if the solution will work properly, however you could manually display the callout inside a setTimeout function that is called when the goToFirst() method is invoked:

      $("#goto").on("click", function() {
        var timeline = $("#timeline").data().kendoTimeline;
        var firstEvent = timeline.element.find(".k-timeline-track-item:not(.k-timeline-flag-wrap):first");
        timeline.open(firstEvent);

        setTimeout(function() {
          var scrollWrapElement = timeline._trackWrap.find(".k-timeline-scrollable-wrap");
          if(timeline.numOfEvents != 1) {
            var page = timeline.pane.pages[1];
            var calloutOffset = calculateOffset(firstEvent.find(".k-timeline-circle"), timeline._trackWrap);
            page.setPageCallout("left", (calloutOffset / page.element.width()) * 100 + "%");
          }
        }, 1400);
      })

      function calculateOffset(element, parentElement) {
        return element.offset().left - parentElement.offset().left + element.width() / 2;
      }

You can increase the timeout a bit in case the callout still doesn't appear.

Dojo example:

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

I'll try to figure out what's causing the problem as soon as I'm able to reproduce the issue on my end.

Let me know in case the solution isn't helping.

Best Regards,
Georgi Denchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

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