Use Gantt Chart as Booking Tool

[Johann Kronawitter]

Hi, 

is it possible to use the Gantt Chart Component like a Booking Tool.

- Multiple Tasks for expample the same TaskName (Different IDs) in one Line

- Create with Drag and Drop, directly on the Timeline

or is it possible with the Scheduler Component?

Attachment: a802ae1be77d4a348c96c423b81c5026_c9117109.jpg

[Ajithkumar Gopalakrishnan]

Hi Johann,

Greetings from Syncfusion Support,

Query#1 – is it possible to use the Gantt Chart Component like a Booking Tool. Multiple Tasks for expample the same TaskName (Different IDs) in one Line and Create with Drag and Drop, directly on the Timeline

Yes, it is possible to achieve this scenario using the Gantt Chart component.

To render multiple tasks with the same TaskName in a single row and allow drag-and-drop creation directly on the timeline, we recommend using the Resource View in combination with the enableMultiTaskbar feature.

In Resource View:

• Each parent represents a resource.
• The child tasks associated with that resource are rendered as individual taskbars in the same row when enableMultiTaskbar is set to true.
• By setting collapseAllParentTasks to true, the chart will render all child tasks in a single row (per resource).
• Enabling allowTaskbarDragAndDrop allows taskbars to be dragged from one resource row to another.
  
  

<ejs-gantt id="multitaskbar" #gantt  [resourceFields] = "resourceFields"

        [resources]="resources" workUnit="Hour" viewType="ResourceView" [enableMultiTaskbar]= "true"  [allowTaskbarDragAndDrop]="true" [collapseAllParentTasks]="true">

</ejs-gantt>

this.data = multiTaskbarData;

this.resources = resources;

this.taskSettings = {

    id: 'TaskID',

    name: 'TaskName',

    startDate: 'StartDate',

    endDate: 'EndDate',

    duration: 'Duration',

    progress: 'Progress',

    resourceInfo: 'resources',

    work:'work',

    child: 'subtasks'

};

this.resourceFields = {

    id: 'resourceId',

    name: 'resourceName',

    unit: 'unit',

    group: 'resourceGroup'

};

Sample link: https://stackblitz.com/edit/angular-krn7jlme-m8eh6xtg?file=src%2Fapp.component.html,src%2Fapp.component.ts

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

https://ej2.syncfusion.com/angular/documentation/gantt/multi-taskbar
https://ej2.syncfusion.com/angular/documentation/api/gantt/#collapseallparenttasks

Query#2 – it possible with the Scheduler Component?

We have branched the Scheduler component query. Please refer to the link below.

https://www.syncfusion.com/forums/196969/support-for-grouped-tasks-and-drag-and-drop-in-scheduler-from-196965

If you have any further questions or need additional assistance, please let me know!

Regards,
Ajithkumar G