Showing multiple events on timeline but in different color

[Vedad]

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]

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:

• https://dojo.telerik.com/UcUWUked

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

[Vedad]

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

 

[Nikolay]

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

[Vedad]

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

[Nikolay]

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

[Vedad]

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

[Nikolay]

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