Gantt Chart in Tab

[vin]

I am using Gantt Chart in a Tab 

When i click the toolbarClick,  ganttChart is showing undefined

The same thing i am using in another page where there is NO Tab control for Gantt Chart. And it works fine!!

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

 

toolbarClick(args: ClickEventArgs): void {

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

        this.ganttChart.pdfExport();

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

      this.ganttChart.excelExport();

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

      this.ganttChart.csvExport();

  }

};

 this.toolbar = ['ExpandAll', 'CollapseAll', 'PdfExport','ExcelExport','CsvExport', 'ZoomToFit', 'ZoomIn', 'ZoomOut']; 

 

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

                    <ng-template #content>

                        <div class="col-md-12 ">

                            <div class="card shadow p-3 mb-1 bg-white rounded ">

                                <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">

                            </ejs-gantt>

                              

                            </div>

                        </div>

                    </ng-template>

                </e-tabitem>

[Monisha Sivanthilingam]

Hi Vin, 

  

Greetings from Syncfusion support. 

  

We were able to replicate the issue you reported. This is because the this object contains the instance of the Tab control and not the Gantt Chart. We can use the getElementById method to get the instance of the Gantt Chart control in the toolbarClick event. The following code snippets demonstrate the solution. 

  

App.component.ts 

  

toolbarClick(args: any): void { 

    var obj = (document.getElementById('multitaskbar1') as any) 

      .ej2_instances[0]; 

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

      obj.pdfExport(); 

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

      obj.excelExport(); 

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

      obj.csvExport(); 

    } 

  } 

  

  

We have also prepared a sample for your reference. 

  

Please contact us if you require any further assistance. 

  

Regards, 

Monisha.