Ganttchart is undefined

[vin]

I keep getting Gantt control as undefined, this control is inside a Tab control.

I am using similar control without tab and it works fine!!

   <e-tabitem [header]='headerText[1]'>

                    <ng-template #content>

 <ejs-gantt #gantt id="gantt"   height="100%" [dataSource]="ganttData"

                                    [taskFields]="taskSettings" readOnly=true [columns]="columns" [treeColumnIndex]="1"

                                    [dayWorkingTime]="dayWorkingTime" [splitterSettings]="splitterSettings"

                                    [timelineSettings]="timelineSettings" [labelSettings]="labelSettings"

                                    [editSettings]="editSettings" [allowSelection]="true" [includeWeekend]="true"

                                    [highlightWeekends]="true" allowPdfExport='true' allowExcelExport='true'

                                    [toolbar]="toolbar" (toolbarClick)="toolbarClick($event)" taskMode="Custom"

                                    [enablePredecessorValidation]="false" [allowResizing]='true' (queryTaskbarInfo)="queryTaskbarInfo($event)">

                                </ejs-gantt>

                    </ng-template>

                </e-tabitem>

 @ViewChild('gantt', {static: true})  public ganttChart: GanttComponent;

I am using tabs control, it is in 2nd tab

[Monisha Sivanthilingam]

Hi Vin, 

 

Greetings from Syncfusion support. 

 

We are currently working on your query. We will provide you with further details within two business day(August 24, 2021). 

 

We appreciate your patience until then. 

 

Regards, 

Monisha. 

[vin]

Thanks

[Monisha Sivanthilingam]

Hi Vin, 

 

Thank you for your patience. 

 

We have resolved your issue in by taking the instance of the Gantt Chart using the ViewChild. The following code snippets demonstrate the solution. 

 

App.component.ts 

 

export class AppComponent { 

  public data: object[]; 

  public data1: object[]; 

  public taskSettings: object; 

  public toolbar: any; 

  @ViewChild('place') 

  public placeObj: DropDownListComponent; 

  @ViewChild('styles') 

  public styleObj: DropDownListComponent; 

  @ViewChild('orientationTab') 

  public tabObj: TabComponent; 

  @ViewChild('gantt') gantt: GanttComponent; 

  constructor() {} 

  public ngOnInit(): void { 

    this.taskSettings = { 

      id: 'TaskID', 

      name: 'TaskName', 

      startDate: 'StartDate', 

      endDate: 'EndDate', 

      duration: 'Duration', 

      dependency: 'Predecessor', 

      progress: 'Progress', 

      resourceInfo: 'resources', 

      work: 'work', 

      child: 'subtasks' 

    }; 

 

  } 

  toolbarClick(args: any): void { 

    if (args.item.id === 'multitaskbar1_pdfexport') { 

      this.gantt.pdfExport(); 

    } else if (args.item.id === 'multitaskbar1_excelexport') { 

      this.gantt.excelExport(); 

    } else if (args.item.id === 'multitaskbar1_csvexport') { 

      this.gantt.csvExport(); 

    } 

  } 

} 

 

 

We have also prepared a sample for your reference. 

 

Regards, 

Monisha. 

[vin]

Hi

I dont have issues with  toolbarClick
My only issue is when the gantt chart in tab control(2nd tab)
I am not able to access gantt object reference(says undefined) from   @ViewChild('gantt') gantt: GanttComponent; 

[Monisha Sivanthilingam]

Hi Vin, 

 

We have analyzed your issue, but we were unable to replicate the issue you reported. Please share us more details about the issue you reported such as: 

 

1. The use cases in which the issue is replicated.
2. The steps taken to replicate the issue.
3. A video replicating the issue.
4. If possible, please modify the below sample to replicate the issue or share an issue reproducible sample of your own.

 

Sample: https://stackblitz.com/edit/angular-3x1uz1-xgk5pa?file=app.component.ts 

 

Regards, 

Monisha.