Border in resource table

Hi, is it possible to somehow make a bold border like this for a specific row in the resource table?

Hello Molven,

You can make a bold border for a specific row in the resource table by targeting it with CSS.
Each row in the resource grid and the resource timeline has a data-resource-id attribute, so you can style only the row you need.

For example, to apply a bold bottom border to the row with resource id = 2, you can use the following CSS styles:

.resourceTimeline_cell .gantt_task_row[data-resource-id="2"], 
.resourceGrid_cell .gantt_row_task[data-resource-id="2"] {
  border-bottom: 3px solid #ccc;
 }

Here, we select the row that contains data-resource-id="2" in both parts of the resource panel:

  • .resourceGrid_cell - the resource grid on the left
  • .resourceTimeline_cell - the resource timeline area on the right

Here’s an example: DHTMLX Snippet Tool.

Best regards,
Valeria Ivashkevich
DHTMLX Support Engineer

1 Like

Can I somehow hook onto some other attribute other than id?

In the resource view, the only unique attributes that the rows have by default are data-resource-id and resource_id. Gantt does not add other attributes to resource rows, so there isn’t another built-in attribute you can rely on for styling.

However, you can also make a bold border for the specific resource row, using templates.

So, first, assign a custom CSS class to the corresponding grid row via the grid_row_class template:

gantt.templates.grid_row_class = function(start, end, task){  
  if(task.id === 'resource_6') {
    return "john_resource_task_row";
  }
  return "";
};

Then do the same for the timeline row using the task_row_class template:

gantt.templates.task_row_class = function(start, end, task){
  if(task.id === 'resource_6') {
    return "john_resource_task_row";
  }
  return "";
};

Finally, apply border style to the class:

.john_resource_task_row {
  border-bottom: 3px solid #ccc;
}

Please check an example: DHTMLX Snippet Tool.

Best regards,
Valeria Ivashkevich
DHTMLX Support Engineer