Task color not updating

Gantt
#1

Hi,

I am using the DHTMLX Gantt library in my Ruby on Rails application. I have implemented logic to check when a task is dragged, and if there is a delay, the task’s color changes to orange (default is green). This functionality was working perfectly, but all of a sudden, it stopped working, even though no changes have been made to the code.

Below is a snippet of the relevant code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<% content_for :head do %>
  <%= stylesheet_link_tag 'dhtmlxgantt-enterprise/dhtmlxgantt', media: 'all', 'data-turbolinks-track' => true %>
  <%= stylesheet_link_tag 'dhtmlxgantt-enterprise/skins/dhtmlxgantt_terrace', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'https://docs.dhtmlx.com/gantt/codebase/dhtmlxgantt.js?v=6.1.7' %>
  <%= stylesheet_link_tag "page_specific/gantt/controls_styles.css" %>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js?v=6.3.7" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://cdn.dhtmlx.com/edge/dhtmlx.js?v=6.3.7"></script>
  <link rel="stylesheet" href="https://cdn.dhtmlx.com/edge/skins/terrace/dhtmlx.css?v=6.3.7">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css?v=6.3.7">
<% end %>

The JavaScript code to handle task updates is as follows:

gantt.attachEvent("onAfterTaskUpdate", function (id, item) {
  var current_task = gantt.getTask(id);
  const diff_no_of_months = getMonthDifference(projectInitialStartDate, changedStartDate, subscription);
  console.log('diff_no_of_months:', diff_no_of_months);
  
  if (parseInt(diff_no_of_months) > 0) {
    current_task.color = '#f8a13f';
  } else {
    current_task.color = '#9FE5C5';
  }
});

I suspect that the issue might be related to the version of the DHTMLX Gantt library being used. When I add the following two lines of code, the issue is resolved, and the functionality works again:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css" type="text/css">
<script src="http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>

After making this change, my updated code looks like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css" type="text/css">
<script src="http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>
<% content_for :head do %>
  <%= stylesheet_link_tag 'dhtmlxgantt-enterprise/dhtmlxgantt', media: 'all', 'data-turbolinks-track' => true %>
  <%= stylesheet_link_tag 'dhtmlxgantt-enterprise/skins/dhtmlxgantt_terrace', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'https://docs.dhtmlx.com/gantt/codebase/dhtmlxgantt.js?v=6.1.7' %>
  <%= stylesheet_link_tag "page_specific/gantt/controls_styles.css" %>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js?v=6.3.7" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://cdn.dhtmlx.com/edge/dhtmlx.js?v=6.3.7"></script>
  <link rel="stylesheet" href="https://cdn.dhtmlx.com/edge/skins/terrace/dhtmlx.css?v=6.3.7">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css?v=6.3.7">
<% end %>

In short, I would like to understand why the code that was working earlier stopped functioning even though I haven’t updated any library or made changes to the code.

Thanks in advance for your help!

#2

Hello Nithin,
It seems that you connected the Gantt version from the documentation:

  <%= javascript_include_tag 'https://docs.dhtmlx.com/gantt/codebase/dhtmlxgantt.js?v=6.1.7' %>

This version shouldn’t be added to your project. If you have the license, you need to add the Javascript file from the Gantt package.

Also, recently Gantt was updated to the 9.0 version. So, as you use the link from the documentation, you started using the newer version. If you have the code for the 8.0 or earlier version, you need to migrate it to the newer version:
https://docs.dhtmlx.com/gantt/migrating.html

The onAfterTaskUpdate event handler still works in the 9.0 version, so, it is not clear why it stopped working in your case. If you want to investigate the issue, you can remove the lines with the GPL version and check if there are any errors in the dev tools on the Console tab.