Display gantt-data with various nested objects

[Andy Möschwitzer]

Hi,
i have issues to define my gantt data object.
Following i am showing you the structure of the source data:

My data consists of a tree structure made up of orders, test plans and test steps.

Orders have test plans as children and test plans have test steps as children.

How is it possible to display this data with its children and subchildren in such a way that it is structured as shown in the next image?

Many thanks in advance!

[Sridharan Jayabalan]

Hi Andy,

Greetings from Syncfusion.

Based on your query, we suggest you use nested child:'subtasks' property in the data source. Refer code snippet for your reference.

Code-Snippet:   

app.component.ts:-

this.taskSettings = {

   child: 'subtasks',

 };

data.ts:-

 export let editingData: Object[] = [

  {

    TaskID: 1,

    TaskName: 'Order title 1',

    StartDate: new Date('04/02/2019'),

    EndDate: new Date('04/21/2019'),

    subtasks: [

      {

        TaskID: 2,

        TaskName: 'Test plan abc',

        StartDate: new Date('04/02/2019'),

        subtasks: [

          {

            ..........................................

          },

          {

           ............................................

          },

          {

            ..........................................

          },

        ],

      },

      {

        TaskID: 5,

        TaskName: 'Test plan xyz',

        StartDate: new Date('04/02/2019'),

        EndDate: new Date('04/21/2019'),

        subtasks: [

          {

            .................................................

          },

        ],

      },

    ],

  },

];

 

Sample - 9pwzbp (forked) - StackBlitz

Documentation - Data binding in Angular Gantt component | Syncfusion

 

 

 

Regards,

Sridharan