Telerik Forums
Kendo UI for jQuery Forum
1 answer
63 views

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"
});
Mihaela
Telerik team
 answered on 19 Mar 2021
7 answers
524 views

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

Nikolay
Telerik team
 answered on 29 Jan 2021
1 answer
121 views

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

Eyup
Telerik team
 answered on 19 Oct 2020
1 answer
338 views

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
Telerik team
 answered on 07 Jul 2020
2 answers
52 views

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.

Nurbek
Top achievements
Rank 1
 answered on 15 Apr 2020
3 answers
81 views

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

Nikolay
Telerik team
 answered on 13 Apr 2020
1 answer
132 views

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();
            });
        }

Nikolay
Telerik team
 answered on 13 Apr 2020
1 answer
189 views

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

Tsvetomir
Telerik team
 answered on 09 Apr 2020
2 answers
44 views

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!

Shawn
Top achievements
Rank 1
 answered on 05 Dec 2019
3 answers
221 views

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.


Viktor Tachev
Telerik team
 answered on 09 Oct 2019
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?