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

Showing multiple events on timeline but in different color

7 Answers 46 Views
Timeline
This is a migrated thread and some comments may be shown as answers.
Vedad
Top achievements
Rank 1
Iron
Veteran
Iron
Vedad asked on 12 Jan 2021, 02:15 PM

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

7 Answers, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 14 Jan 2021, 09:09 AM

Hello Vedad,

The current API does not expose such options for the Timeline events customization, however, as these events are simply HTML elements the customization can be done in the dataBound event handler using jQuery.

dataBound: function(e){
              var data = e.sender.dataSource.data();
              $(data).each(function(){
                if(this.date < new Date(2008, 1, 1)){ // condition for changing the circle
                  $("[data-uid='"+this.uid+"']").find(".k-timeline-circle").css("background-color", "black"); // set the CSS for the circle
                  $("[data-uid='"+this.uid+"']").find(".k-event-title").css("color", "orange"); //set the css for the event title
                }
              })
            }

Please find the above demonstrated in the following Dojo demo I prepared:

Let me know if you have any questions.

Regards,
Nikolay
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/.

0
Vedad
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 14 Jan 2021, 05:00 PM

Hello Nikolay, 

thank you very much for fast response. Your demo and approach works, but seems only for vertical timeline. Moment I switched to horizontal (even in your Dojo example) it doesn't apply anymore. I suspect reason is that UID is rendered for cards... and in horizontal, cards list div is separated so selector is not working..

Is there any other idea that we can try to use? :)

Thanks and regards,

Vedad

 

0
Nikolay
Telerik team
answered on 18 Jan 2021, 11:44 AM

Hello Vedad,

The rendering for the Timeline in horizontal mode is different, thus, the elements need to be targeted differently.

For example:

dataBound: function(e){
              var data = e.sender.dataSource.data();
              $(data).each(function(){
                if(this.date < new Date(2008, 1, 1)){ // condition for changing the circle
                  $(".k-timeline-scrollable-wrap").first().find(".k-timeline-circle").css("background-color", "black"); // set the CSS 
                  $("[data-uid='"+this.uid+"']").find(".k-card-title").css("color", "orange");
                }
              })
            }

Here is the updated Dojo: https://dojo.telerik.com/ACIgEPuJ

Please note, the Timeline circles are rendered in a separate list and do not have a unique identifier to be referenced with.

Let me know if you have any questions.

Regards,
Nikolay
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/.

0
Vedad
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 25 Jan 2021, 12:30 PM

Hi Nikolay,

sorry for the delay. Second solution is something I came up with as well, but it doesn't solve the problem as all "dots" are still same coloring, and only the title is colored differently. Which means you have to click each dot to find "different" type of event. This may be painful and slow for timelines that cover 20-30 events..

If there is any other option it would be great, if not, I suggest opening feature proposal to extend this widget with multiple type of events..

Thanks and regards,

Vedad

0
Nikolay
Telerik team
answered on 27 Jan 2021, 10:33 AM

Hi Vedad,

When the horizontal mode is enabled the scrollable area is rendered with a separate wrapper element holding the timeline flags, dates, and circles as unordered lists. However, those elements do not have any ids to be referenced by which makes their targeting not so straight forward.

What I can suggest is targeting, for example the second circle on the line, with the following jQuery code:

$(".k-timeline-scrollable-wrap").first().find("li:eq(3) a").css("background-color", "black");

Here is the modified Dojo demo: https://dojo.telerik.com/iVUgANoD

Let me know if this helps.

Regards,
Nikolay
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/.

0
Vedad
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 27 Jan 2021, 10:35 AM

Hi Nikolay, 

Thanks for a quick response.. This is something that makes sense.. I will try to use index of element which meets condition and then colorize in a way you suggested in the Dojo.

I will let you know of results.

Thank you very much.

Regards,

Vedad

0
Nikolay
Telerik team
answered on 29 Jan 2021, 08:51 AM

Hello Vedad,

You are most welcome. I am happy my suggestion might help you achieve the desired results.

Please do let me know if anything further arises.

Regards,
Nikolay
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
Vedad
Top achievements
Rank 1
Iron
Veteran
Iron
Answers by
Nikolay
Telerik team
Vedad
Top achievements
Rank 1
Iron
Veteran
Iron
Share this question
or