Is there any way to set the background color of the cell

Gantt
#1

I want to set the background color of the cell, save it to the database, and render it out next time.

Currently I can only save the color to gantt task columns, and set the style in gantt.config.columns [ ]

Is there a better way？

like below：

1
1764×389 21.2 KB

#2

Hello,
unfortunately, there is no built-in way to set colors for cells in the grid, but it’s possible to implement a custom solution. One of the possible solutions is to add some kind of a structure in which custom cell colors will be stored:

var cellColors = {
  taskId: {
   cellName: cellColor
  }
};

The code may look like this fragment :

var cellColors = {
  1: {
    text: "orange",
    start_date: "green"
  }
};

Programmatically, you can generate a CSS from this object, that will be applied to the desired cells:

function generateCellStyles(cellColors){
  var className = 'gantt-dynamic-cell-style';
  var styleElement = document.querySelector('.' + className);
  if (styleElement) styleElement.remove();
  var style = document.createElement('style');
  style.className = className;
  var html = "";
  for(var i in cellColors){
    var taskSelector = "[" + gantt.config.task_attribute + "='"+i+"']";
    var cellCss = [];
    var cellStyles = cellColors[I]
    for(var j in cellStyles){
      cellCss.push(taskSelector + " [data-column-name='"+j+"'] { background-color: " + cellStyles[j] + ";}"); 
    }
    html += cellCss.join("\r\n");
  }

  style.innerHTML = HTML;
  document.head.appendChild(style);
}

Here is a related sample:
http://snippet.dhtmlx.com/5/8f08af5cd
This object can be saved to the database and then loaded from the database. I do not show loading and saving since it can be done in different ways. The settings object can be manually sent to the server via the AJAX and saved there. It can be loaded via the AJAX in the same way.
After loading or changing the object of cell colors, you can regenerate CSS via the generateCellStyles function, and all changes will be applied.

Here is a sample of how to regenerate styles manually:
http://snippet.dhtmlx.com/5/a15f3a7a1