[SOLVED] Hiding columns for placeholder row(s)

I’m trying to achieve the following design for the placeholder task.

image

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.

1 Like

Hey Maksim! Although I’d ideally want to completely hide the cell (akin to what’s possible using colspan in html tables), returning <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. :slight_smile:

EDIT:
The first solution works reasonably well for us. Marking it as closed.

1 Like