1. Home
  2. Forum
  3. Angular - EJ 2
  4. Rendering the GanttChart to grid as child grid

Rendering the GanttChart to grid as child grid

Hi i was implementing to render ganttchart as a child to grid,

Image_1795_1693551268362

as mentioned in above image in child grid place i have to implement egantt so please suggest me how to do this



3 Replies
LA Lokesh Arjunan Syncfusion Team September 2, 2023 03:03 AM UTC

Hi Santosh


Greetings from Syncfusion Support.


We are validating your reported query and we will update you further details within two business days (Sep 5).


Until then we appreciate your patience.


Regards,

Lokesh


UA Udhayakumar Anand Syncfusion Team September 5, 2023 02:40 PM UTC

Santosh


We are currently validating the possibilities to achieve your requirement, will update you with further details by tomorrow September 6th 2023


Until then we appreciate your patience and understanding


Regards,

Udhayakumar


RR Rajapandi Ravi Syncfusion Team September 6, 2023 08:50 AM UTC

Santosh,


To integrate the Gantt as a ChildGrid within the Grid, you can leverage the Grid component's detailTemplate feature. During the initialization of the Grid, include an HTML div element within the ng-template to serve as the container for the Gantt element. Then, use the detailDataBound event of the Grid to render the Gantt as a ChildGrid. Please refer the below code example and sample for more information.


App.component.html

 

<ejs-grid #grid [dataSource]='data' id='Grid' (detailDataBound)="detailDataBoundGantt($event)">

        <ng-template #detailTemplate let-data>

            <div id=Gantt{{data.EmployeeID}}></div>

        </ng-template>

        <e-columns>

            <e-column field='EmployeeID' headerText='Employee ID' width='125' textAlign='Right'></e-column>

            <e-column field='FirstName' headerText='Name' width='120'></e-column>

            <e-column field='Title' headerText='Title' width='170'></e-column>

           <e-column field='HireDate' headerText='Hire Date' width='135' textAlign='Right' format='yMd'></e-column>

            <e-column field='ReportsTo' headerText='Reports To' width='120' textAlign='Right'></e-column>

        </e-columns>

 

    </ejs-grid>

   

App.component.ts

 

detailDataBoundGantt(args) { //detailDataBound event of Grid component

        let gantt: Gantt = new Gantt({

            dataSource: ganttdata,

            height: '450px',

            taskFields: {

                id: 'TaskID',

                name: 'TaskName',

                startDate: 'StartDate',

                endDate: 'EndDate',

                duration: 'Duration',

                progress: 'Progress',

                dependency: 'Predecessor',

                child: 'subtasks'

            },

            columns: [

                { field: 'TaskID', width: 80 },

                { field: 'TaskName', width: 250 },

                { field: 'StartDate' },

                { field: 'EndDate' },

                { field: 'Duration' },

                { field: 'Predecessor' },

                { field: 'Progress' },

            ]

        });

 

        gantt.appendTo('#Gantt' + args.data.EmployeeID);

    }

 


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


Sample Demos: https://ej2.syncfusion.com/angular/demos/#/material3/grid/detail-template


Documentation: https://ej2.syncfusion.com/angular/documentation/grid/row/detail-template#rendering-custom-component


API: https://ej2.syncfusion.com/angular/documentation/api/grid/#detaildatabound


Screenshot:



Regards,

Rajapandi R



Loader.
Up arrow icon