Can we hide a task in gannt Chart.

[Saraswathi Thotly]

I had merged sub tasks into single row using Multi task bar. Now I was trying to hide a particular sub task based on toggle selection. Is it possible to hide a particular sub task.

[Ajithkumar Gopalakrishnan]

Hi Saraswathi,

Greetings from Syncfusion Support,

To achieve your requirement, we suggest using the actionBegin and rowDeselected events in the Gantt chart. The actionBegin event triggers during the segment merge action, where you can capture the TaskID. Then, the rowDeselected event is triggered when toggle selection is enabled. In this case, based on condition, the taskbar element's visibility is updated and hidden. We have attached a code snippet and a sample for reference.

<ejs-gantt id="SplitTasks" #gantt

           (actionBegin)="actionBegin($event)" (rowDeselected)="rowDeselected($event)">

</ejs-gantt>

public actionBegin(args: any)

{

    if (args.requestType == "mergeSegment")

    {

        this.hidingTaskId = args.rowData.TaskID;

    }

}

public rowDeselected(args: any)

{

    if (!args.data.hasChildRecords && args.data.Segments.length == 1 && this.hidingTaskId == args.data.TaskID)

    {

        var taskbarElement = document.querySelectorAll('.e-taskbar-main-container')[args.data.index];

        if (taskbarElement && taskbarElement instanceof HTMLElement) {

            taskbarElement.style.visibility = 'hidden';

        }

    }

}

You can find a working example on StackBlitz.



Note: If you need to hide the taskbar on the initial load, use the queryTaskbarInfo event. We have attached the UG document for your reference.

https://ej2.syncfusion.com/angular/documentation/gantt/taskbar#conditional-formatting

For more information, you may refer to the following link:

https://ej2.syncfusion.com/angular/documentation/api/gantt/#rowdeselected

https://ej2.syncfusion.com/angular/documentation/api/gantt/#actionbegin

Regards,

Ajithkumar G