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

Coloring holidays or non-working days in gantt view

16 Answers 128 Views
Gantt
This is a migrated thread and some comments may be shown as answers.
Vedad
Top achievements
Rank 1
Iron
Veteran
Iron
Vedad asked on 03 Jan 2019, 01:14 PM

Hi, 

Happy new year with a new questions :)

Is there any way to colorize differently specific non-working days (holidays)? I did some digging and all I found is incorporated deep in Kendo code. 

I have a list of non-working days returned from the server on app load, so I just would need a way to inject this information to the gantt.

 

Thanks and regards,

Vedad

16 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 07 Jan 2019, 10:42 AM
Hi Vedad,

One suggestion approach for achieving the desired colorizing of rows in the Gantt widget could be the following:

1) Subscribe to the Gantt's dataBound event.

2) Inside the dataBound event handler you could access the Gantt TreeList through the event arguments:

function onDataBound(e) {
  var gantt = e.sender;
  var list = gantt.list;
 
  ...
}


3) Query the TreeList element to find the required non-working days elements and style the corresponding td elements with jQuery.

Regards,
Dimitar
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Vedad
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 07 Jan 2019, 11:03 AM

Hi Dimitar, 

Thanks for the response and idea. I tried to do something like that before, but problem is that I need to color days on gantt timeline, and treelist is not useful for this, at least not by the things I found. Also, additional problem is looping through items, which slows down in case of big projects.

However, I took a slightly different approach, which worked for me. I extended gantt.timeline - isWorkDay method with small piece of logic which simply extends if condition and cross references current logic with my list of holidays. Basically, if day is workday by existing logic and not in my list of holidays, its true, else its false, therefore non-working day.

I tested quite thoroughly and havent see any issues so far, do you see any problem with this approach? (I am aware that it may be a problem if you change this method in future).

Thanks and happy new year.

Best regards, Vedad

 

0
Accepted
Dimitar
Telerik team
answered on 07 Jan 2019, 02:27 PM
Hi Vedad,

This indeed seems like a valid approach. However, I would suggest to thoroughly test the Gantt in order to verify that everything is working correctly.

Also, after an upgrade to a newer Kendo UI version, it is advisable to check if the current implementation is changed and improve the extended function accordingly.

Regards,
Dimitar
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Vedad
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 07 Jan 2019, 02:36 PM

Hi Dimitar, 

We test our changes thoroughly, of course. Not just in gantt, but all of our code. :) There is no other way.

I will keep in mind implementation check after version updates, though we do that as well.

Though, I would suggest a feature for gantt, scheduler and all this "date" related items, to support some sort of non working days import. (maybe additional data source for these items or something like that).

I will mark this as answered.

Thanks a lot for effort.

Best regards,

Vedad

0
Dimitar
Telerik team
answered on 09 Jan 2019, 08:10 AM
Hi Vedad,

This is indeed a good suggestion. I have gone through the Feedback Portal items and found a similar feature request:


I would suggest voting for this idea and sharing any additional ideas that you have in the item. Based on the demand and gathered feedback, this feature could be scheduled for implementation in a future release of Kendo UI.

Regards,
Dimitar
Progress Telerik
Get quickly onboard and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Vedad
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 09 Jan 2019, 08:47 AM

Hi Dimitar, 

Thanks for providing the link, I upvoted the suggestion and put a small comment. I will extend it with additional suggestions if I find and devise a good use-case.

Thanks again

Vedad

0
Vedad
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 13 Aug 2019, 10:17 AM

Hi Dimitar, 

 

sorry for "reopening" question but it seems that isWorkDay method is being called so many times, that it slows down complete drawing of gantt widget. 

Is there any other reasonable way to determine columns on gantt and mark some of them same way as weekends (non-working day). 

 

Thank you

 

0
Dimitar
Telerik team
answered on 15 Aug 2019, 06:57 AM
Hi Vedad,

Currently, colorizing only specific non-working days could be achieved only through the dataBound event of the widget. There is currently no other suitable event or method that allows to iterate over the rendered slots. 

Regards,
Dimitar
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Vedad
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 15 Aug 2019, 07:50 AM

Hi Dimitar, 

could you please give me a small snipped or dojo with the example, because I don't see the way to do it on databound.

Thank you very much.

Regards, 

Vedad

0
Dimitar
Telerik team
answered on 16 Aug 2019, 01:23 PM
Hi Vedad,

You could add an additional property to each task on the server and then colorize each task depending on it. For example:
$("#gantt").kendoGantt({
  ... 
  dataBound: onDataBound
});
 
function onDataBound() {
  var gantt = this;
 
  gantt.element.find(".k-task").each(function(e) {
    var dataItem = gantt.dataSource.getByUid($(this).attr("data-uid"));
            
    // colorize task per business requirements
    if (dataItem.isBusinessDay) {   
      this.style.backgroundColor = "#9f9";
    }
  });
}

Regards,
Dimitar
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Vedad
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 16 Aug 2019, 01:47 PM

Hi Dimitar, 

Thank you for your answer, but I am sorry, but I think you misunderstood me. I know how to color task and customize task view.

But, I need to colorize columns in gantt view, so column for 1st january is grayed out the same way as if it was weekend.

Currently, widget colors out gray every weekend in week view, this means columns for each Saturday and Sunday are grayed out.

I need to do the same for days during the week, if I mark them as holiday.

See attached image.

If you need any additional info, please let me know.

Regards, 

Vedad

0
Dimitar
Telerik team
answered on 20 Aug 2019, 06:30 AM
Hi Vedad,

In general, the Gantt widget instance provides a reference to the timeline that could be retrieved in the dataBound event of the widget. With it, you could iterate over the columns and apply a color as demonstrated in the following example:


However, please not that there is no easy way to retrieve a column based on the date, as the <td> elements does not have any indicator that allows retrieving it, except the header text of the column.

Regards,
Dimitar
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Vedad
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 03 Sep 2019, 07:14 AM

Hi Dimitar, 

thank you for Dojo. I had to extend it a little bit to do what I needed. Basically, I added a step so it reads header columns for indexes where I wanted to color. Only way way  was able to achieve this was to filter by colspan (because header and timeview columns have different spans. If you have better suggestion for getting headers, please say, but this seems to work at the moment. 

Also, I need to test performance on long running projects yet, but so far it seems ok.

Until this is added to the widget configuration, if anyone needs to use this, here is basically my code. 

/* Here you place your logic to get array of non working days you need and format them in format comparable with header innerHTML string. Later you replace my hardcoded "if" condition with your comparison logic and there you have it.

NOTE: localization and format of headers change with language of your browser, so keep in mind you may need to adjust date formatting of your days accordingly (for was working in en, but not de, until I changed logic).
*/

                      var gantt = e.sender;
                      var list = gantt.timeline.element;
                      var headers = gantt.timeline.wrapper.find("[colspan='1']");

                      for (var i=0;i < headers.length-1; i++){

                              if(headers[i].innerHTML == "Thu 6/05" || headers[i].innerHTML == "Wed 6/18" ){  //This is Hardcoded for testing purposes. Please replace with your comparison logic. I created function for this.
                                    var td = gantt.timeline.wrapper.find(".k-gantt-columns tr td:nth-child("+ (i+1) +")");
                                    $(td[0]).kendoAddClass("k-nonwork-hour");
                          }
                     }

Thank you and best regards,

Vedad

0
Vedad
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 03 Sep 2019, 08:32 AM
In addition, my solution works only if you have comparable date in your gantt headers. (if you have only day name and date number, there may be a problem..
0
Accepted
Dimitar
Telerik team
answered on 05 Sep 2019, 05:57 AM

Hi Vedad,

I am glad to hear that you have successfully achieved the desired result. Also, thank you for sharing the solution, so that the rest of the community can benefit from it. 

Regards,
Dimitar
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Vedad
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 05 Sep 2019, 07:10 AM

Thank you for help.

Also here is another solution I had before, but it turned to be very slow in performance, because this function seems to be called for each task entered in chart, but maybe for someone will be sufficient:

kendo.ui.GanttView.prototype.____isWorkDay = kendo.ui.GanttView.prototype._isWorkDay;
kendo.ui.GanttView.prototype._isWorkDay = function (date){
   'use strict';
   var ls = window.localStorage; //For testing purposes i had my list of holidays in localStorage
   var nwd = JSON.parse(ls.getItem('nonWorkingDays'));
   var nonWorkingDays = nwd.map(function(theDate) {
            return new Date( moment(theDate, 'DD.MM.YYYY')); //Here I format it to date format I need
    });
    var day = date.getDay();
    var workDays = this._workDays;
    for (var i = 0, l = workDays.length; i < l; i++) {
            if (workDays[i] === day && !(nonWorkingDays && nonWorkingDays.map(Number).indexOf(+date) > -1)) {
                   return true;
            }
   }
    return false;
};

Tags
Gantt
Asked by
Vedad
Top achievements
Rank 1
Iron
Veteran
Iron
Answers by
Dimitar
Telerik team
Vedad
Top achievements
Rank 1
Iron
Veteran
Iron
Share this question
or