Template for grid cell

Hi,

How can i dynamically change a grid cell background based on some logical condition.

For example i want to change the background color of a cell when the user hovers over the cell and the value inside the cell meets some condition.

Hello Nikolai,
Usually, to change the color of a grid row, you can use the :hover pseudo-class.
Unfortunately, CSS doesn’t allow using complex conditions.

Gantt doesn’t have a built-in way for that use case. You need to implement a custom solution.
Probably, the easiest way would be to add the mouseover and mouseout listeners and modify the styles of the elements below the mouse.
Here is an example of how it can be implemented:
https://snippet.dhtmlx.com/4ed11j6q

If you want to change the color of a single column, you can use the template function of the column configuration and return the HTML elements you need:
https://docs.dhtmlx.com/gantt/desktop__specifying_columns.html#datamappingandtemplates

Here is an example of how it can be implemented:
https://snippet.dhtmlx.com/2k919q5v