I’m trying to achieve the following design for the placeholder task.
I need to hide all the cells except the task name cell and add the buttons to it. How do I hide them for all placeholder tasks (task.type === gantt.config.types.placeholder
)?
I’m trying to achieve the following design for the placeholder task.
I need to hide all the cells except the task name cell and add the buttons to it. How do I hide them for all placeholder tasks (task.type === gantt.config.types.placeholder
)?
Hello,
You need to use template
attribute in gantt.config.columns
. The template
definition allows you to present almost any content:
{
name: "text", label: "Name", tree: true, width: 200, editor: editors.text, resize: true, template: task => {
if (task.type === gantt.config.types.placeholder) {
return ('<i class="fa gantt_button_grid gantt_grid_add fa-plus" onclick="clickGridButton(0, \'addTask\')">Add Task</i>' +
'<i class="fa gantt_button_grid gantt_grid_add fa-plus" onclick="clickGridButton(0, \'addMilestone\')">Add Milestone</i>');
}
return task.text
}
},
With template
you can hide any column if task.type === gantt.config.types.placeholder
:
{
name: "duration", label: "Duration", width: 60, align: "center", editor: editors.duration, resize: true, template: task => {
if (task.type === gantt.config.types.placeholder) {
return '<div></div>';
}
return task.duration;
}
},
You may also find https://docs.dhtmlx.com/gantt/desktop__specifying_columns.html useful.
Please see the snippet: https://snippet.dhtmlx.com/7qchjln7. This is not a complete solution, it needs to be finalized.
I want to note that starting from the 7.1.7 version, you cannot sort placeholder tasks, as they are moved to the bottom list.
But you can make a custom task type that is added for each task that has subtasks.
Here is an example in the snippet: https://snippet.dhtmlx.com/rjejdjbz.
If you have additional questions, write to us, and we will try to help you.
Hey Maksim! Although I’d ideally want to completely hide the cell (akin to what’s possible using colspan in html tables), return
ing <div></div>
is still pretty close to what I need. I’ll try both the solutions out and post here. Thanks for taking the time to answer.
EDIT:
The first solution works reasonably well for us. Marking it as closed.