Specify different background for specific column in the grid


I have many columns displayed on the grid, and on each row for one of the column I would like to set different color based on some other column. Say for that specific column first row should have color1, second row should have color2 so on…I thought of using template while defining the column, but the style should change for each row. I have tried defining the template while configuring the columns, by using a div and applying the class. But the background color applies to just the div but not the complete cell.Is this possible?

Many thanks in Advance for any inputs on this.

currently the API doesn’t provide a css templates for individual cells of grid (although probably we should add it).
What you can do is define a html template for timeline cell - return html content wrapped into div with 100% width/height, then you can set a background color of that div and it will occupy the whole cell
docs.dhtmlx.com/gantt/desktop__s … esentation

Hi Aliaksandr,

As suggested I have tried specifying the template while configuring that particular grid column as below, still it could not work for me. my div is still having the width not occupying the complete cell.When I check on dev tools I could see that gantt_tree_content is not getting any width from it’s parent gantt_tree_cell.

"<div class='sample'>"+ task.text + " </div>";

where my css class is having:

background-color:#FFA500 !important;
width:100% !important;
height:100% !important;


Appreciate any help on this.