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