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
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/.