Attempting w/o success to leverage timeline against existing data. Having difficulty getting it to work..Below is the stock example on the site with the date property in the array changed to 'date1'.. Added the dataDateField; 'date1' to account for the change. Also tried altering the schema in the datasource..
$(
"#timeline"
).kendoTimeline({
dataSource: {
data: [
{
"id"
: 1,
"title"
:
"Bowling tournament"
,
"subtitle"
:
"Location: Sterling Lanes"
,
"description"
:
"Summer Bowling tournament in Michigan"
,
"date1"
:
"2025-06-30T21:00:00.000Z"
,
"actions"
: [{
"text"
:
"Visit the Bowling tournament page"
}] },
{
"id"
: 2,
"title"
:
"Charlie's first football game"
,
"subtitle"
:
"Location: City Football Stadium"
,
"description"
:
"Call coach Williams"
,
"date1"
:
"2022-10-22T21:00:00.000Z"
},
{
"id"
: 3,
"title"
:
"Alex's Birthday"
,
"subtitle"
:
"Location: Alex's House"
,
"description"
:
"Buy birthday cake and some fruits"
,
"date1"
:
"2010-01-09T22:00:00.000Z"
,
"images"
: [{
"src"
:
"https://demos.telerik.com/kendo-ui/content/web/foods/4.jpg"
}, {
"src"
:
"https://demos.telerik.com/kendo-ui/content/web/foods/16.jpg"
}] },
{
"id"
: 4,
"title"
:
"Vacation in Mexico"
,
"subtitle"
:
"Location: Cabo San Lucas"
,
"description"
:
"Check-in for the flight"
,
"date1"
:
"2017-12-24T22:00:00.000Z"
}]
},
dataDateField:
'date1'
,
orientation:
"vertical"
});
Hi,
I just started looking on how to implement timeline widget in our app.
I would like to show multiple lifetime events in timeline but with different styling on the line, for example:
orange circle: achievement type 1
red circle: achievement type 2
blue circle: got child
blue circle: got second child
I went through documentation but I don't see much options that might help with this.
Are there any suggestions how to achieve this?
Thanks and regards
This works fine when the datasource has at least 1 record. It also works fine with the grid control, so I assume this is a glitch with the timeline? I am one revision behind the latest, so this may already be fixed.
kendoTimeline = $("#divTimeLine").kendoTimeline({
orientation: "horizontal",
dateFormat: "MM/dd/yyyy",
dataSource: {
data: new Array(),
pageSize: 0,
sort: { field: "date", dir: "asc" }
},
}).data("kendoTimeline");
kendoTimeline.destroy();
--------------------------
JavaScript Error: Uncaught TypeError: Cannot read property 'destroy' of undefined
URL: http://localhost/SINet/STERLING/AllPoints/PublicScripts/kendoui.2020.2.617.commercial/js/kendo.all.min.js
Line Number: 94
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)
As I know some events(like actionClick and collapse) and some Configuration(like collapse, alterningMode) are not working if I use custom template.
Is it a bug or not?
Thanks,
Nurbek A.
When I created a timeline in horizontal mode with data=[], it throws exception.
The source code: https://dojo.telerik.com/oSiroXIv/3
The exception:
Uncaught TypeError: Cannot read property 'left' of undefined
at o (kendo.all.min.js:sourcemap:92)
at init._initHorizontal (kendo.all.min.js:sourcemap:92)
at init.refresh (kendo.all.min.js:sourcemap:92)
at init.d (jquery.min.js:2)
at init.trigger (kendo.all.min.js:sourcemap:25)
at init._process (kendo.all.min.js:sourcemap:28)
at init.success (kendo.all.min.js:sourcemap:28)
at Object.success (kendo.all.min.js:sourcemap:28)
at init.read (kendo.all.min.js:sourcemap:27)
at kendo.all.min.js:sourcemap:28
Hi!
I need to refresh datasource. But as I know from code setDataSource runs _redraw function.
It renders only one date per page.
But it is not solution. Because when I manually run redraw with setTimeout, it shows what I expected. And shows 10 events per page.
Is it possible to fix it.
My manual code:
timeline.setDataSource(data);
if (data.length > 0) {
setTimeout(() => {
timeline.redraw();
});
}
Hello,
I am trying to to use Timeline to build a conditional survey, where the questions are not known in advance. Expectation is each answer will be added to the Timeline and will be visible to the user.
I am not able to understand how to use Timeline to add the Events as the question is answered. I am using Jquery with .net Core.
Best Regards
Hello,
I want to show multiple events in one day. How to visualizes specific events in daily time basis instead of default yearly time basis? Any help is appreciated.
Thanks!
Timeline is a great piece of work, but...
for my purposes i need to show not just date, but whole datetime including hour and minute, if possible seconds also.
Is there any option, overload or a way how to show full datetime in timeline?
Option for customisable datetime format is in need also.