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.
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