Hiding children without parent task

Gantt
#1

Is there a way that I can hide children without parent tasks ?

#2

Hi,
Could you clarify the question? If you mean the ability to hide tasks that do not have the parent parameter specified or the parameter value is the same as gantt.config.root_id, then this can be done using the onBeforeTaskDisplay handler. For example, I added a checkbox that will determine whether to hide tasks or not:

<div class="gantt_control">
    <input class='' onclick=toggleHiddenTasks() type='checkbox' name='visibilityToggle' id='visibilityToggle'/>
    <label for="visibilityToggle">Hidden tasks</label>
</div>

And a function that will perform the re-rendering of the Gantt:

let toggle = true;

function toggleHiddenTasks() {
    toggle = !toggle;
    gantt.render();
}

Before the tasks are displayed, you can check if they are tasks that have no parents:

gantt.attachEvent("onBeforeTaskDisplay", (id, task) => {
    if (!toggle && !gantt.hasChild(task.id) && task.parent == "0") {
        return false;
    }

    return true;
});

Please see an example: https://snippet.dhtmlx.com/y9i3175i.

If you mean the case when a task has a parent, but it is not loaded, then Gantt will not display all child tasks for this parent.
Here is an example where the tasks “Task #1.3.1” and “Task #1.3.2” have parent “Task #1.3” and it is not loaded, so all its child tasks are not loaded either: https://snippet.dhtmlx.com/my32xio2.

If you need to hide child tasks and leave their parent, then you can do something like this:
For example, hide child tasks of the first level:

gantt.attachEvent("onBeforeTaskDisplay", (id, task) => {
    if (!toggle && task.parent != gantt.config.root_id) {
        return false;
    }

    return true;
});

Here is an example: https://snippet.dhtmlx.com/bxmzk25d.
If the tree structure has several levels, then you need to make more complex custom logic.

1 Like
#3

Thank you, it was this case:
If you mean the case when a task has a parent, but it is not loaded, then Gantt will not display all child tasks for this parent.
Here is an example where the tasks “Task #1.3.1” and “Task #1.3.2” have parent “Task #1.3” and it is not loaded, so all its child tasks are not loaded either: https://snippet.dhtmlx.com/my32xio2.

#4

I did a custom logic for it, I had to do a filter based on the name of the parent task. Even though the parent task did not display it still showed the children (maybe because the parent seemed to exist in the array). So I checked if the parent of the child was not equal with that filtered name in the function “onBeforeTaskDisplay” simply return false for the child as well.