Add IDs to Gantt row cells

Gantt
#1

Hi support,

Currently the generated HTML as follows.

<div class="gantt_cell" data-column-index="1" data-column-name="sort_order" style="width:100px;text-align:left;justify-content:flex-start;" role="gridcell" aria-label=" 1 " aria-readonly="true">
     <div class="gantt_tree_content">
          <div class="ganttTextColumn taskSortOrderColumn">1</div>
     </div>
</div>

Is there any possibility to add unique IDs or classes to cells in every row.

Ex:

<div id="task-1" class="gantt_cell" data-column-index="1" data-column-name="sort_order" style="width:100px;text-align:left;justify-content:flex-start;" role="gridcell" aria-label=" 1 " aria-readonly="true">
     <div class="gantt_tree_content">
          <div id="task-1-sort-order" class="ganttTextColumn taskSortOrderColumn">1</div>
     </div>
</div>
<div id="task-2" class="gantt_cell gantt_cell_tree" data-column-index="2" data-column-name="text" style="width:420px;text-align:left;justify-content:flex-start;" role="gridcell" aria-label=" Project Start ">
      <div class="gantt_tree_icon gantt_blank"></div>
      <div class="gantt_tree_icon gantt_file"></div>
      <div class="gantt_tree_content">
                <div id="task-2-task-name" class="ganttTextColumn taskNameColumn">Project Start</div>
      </div>
</div>

Thank you.

#2

Hello!
the current structure of the grid already allows locating every cell using CSS selector:

  • each row contains data-task-id attribute with the id of the task
  • each cell contains data-column-name attribute with the name of the column

So in your example, you can locate the cell using this selector:

[data-task-id='1'] [data-column-name='sort_order']

e.g. document.querySelector("[data-task-id='1'] [data-column-name='sort_order']"), so having id specifically at cell level shouldn’t be needed.

You can also add custom css classes to specific rows using grid_row_class https://docs.dhtmlx.com/gantt/api__gantt_grid_row_class_template.html ,
there is no css template for cell-level element.

If for some reason, it doesn’t work for you, you can wrap cell content into a custom HTML element and add id/css class to that element:

gantt.config.columns =  [
    {name:"text",       label:"Task name",  tree:true, width:"*", template: function(task){
        return `<div class='cell-content-wrapper' id='${task.id}_text'>${task.text}</div>`;
    } },
    ...
];

snippet: https://snippet.dhtmlx.com/0cfzvotb

https://docs.dhtmlx.com/gantt/desktop__specifying_columns.html#datamappingandtemplates