Collapsing with custom templates not working on initialisation

[Arrash Nekonam]

I have created a gantt chart in a project, there is custom templates being used to display the data differently in the chart. Provided below is the html. on first load of the project, where the gantt chart appears, the data is loaded in but when trying to collapse any data, the chartRow is undefined, if a button is clicked to change the date of the span of the gantt, then collapsing works as it should and chart row is not undefined. I cannot understand why on first load the chartRow would be undefined and by simply changing the start/end date it would then not be undefined.

<div class="control-section" *ngIf="events.length > 0">
  <div id="gantt-container" *ngIf="events.length > 0 && taskSettings">
    <ng-container #chartContainer style="width:100%">
      <ejs-gantt #ganttDefault class="chart"
                 id="ganttDefault"
                 [dataSource]="events"
                 [taskFields]="taskSettings"
                 [columns]="columns"
                 [timelineSettings]="timelineSettings"
                 [labelSettings]="labelSettings"
                 [gridLines]="'Horizontal'"
                 [treeColumnIndex]="1"
                 [durationUnit]="'Hour'"
                 [allowSelection]="true" dateFormat="MMM dd, y"
                 [projectStartDate]="projectStartDate"
                 [projectEndDate]="projectEndDate"
                 [highlightWeekends]="true"
                 [editSettings]="editSettings"
                 [dayWorkingTime]="workingTime"
                 [rowHeight]="50"
                 [workWeek]="workingDays"
                 [toolbar]="toolbar"
                 [allowPdfExport]="true"
                 [splitterSettings]="splitterSettings"
                 [parentTaskbarTemplate]="parentTemplate"
                 [taskbarTemplate]="taskbarTemplate"
                 (rowSelected)="onRowSelected($event)"
                 (actionBegin)="onActionBegin($event)"
                 (collapsing)="collapsing($event)"
                 (toolbarClick)="onToolBarClick($event)">
                    <ng-template #parentTemplate let-data>
                      <ng-container *ngIf="(data | ganttParent) as ganttParentData">
                        <div [innerHTML]="ganttParentData" style="width: 100%; height:100%"></div>
                      </ng-container>
                    </ng-template>
                    <ng-template #taskbarTemplate let-data>
                      <ng-container *ngIf="(data | ganttChild: unplannedSailingRequests) as ganttChildData">
                        <div [innerHTML]="ganttChildData" style="width: 100%; height:100%"></div>
                      </ng-container>
                    </ng-template>
      </ejs-gantt>
    </ng-container>
  </div>
</div>



collapsing(args: any) {
  console.log(args);
  if (!args.chartRow) {
    args.cancel = true;
    console.warn('Chart row is undefined');
  }
}

this is from the parent component that is calling the gantt : 

<ng-container *ngIf="!vm.loading.sailingRequestLists; else loadingTemplate">
  <gantt-component class="gantt-component" [events]="events()"
                   [unplannedSailingRequests]="unplannedSailingRequests()"
                   [areas]="areas()"
                   [units]="units()"
                   [tableTitle]="'List of Berths'"
                   [locationClient]="locationClient()"
                   [areaBlockingActivities]="areaBlockingActivities()"
                   [blockingActivities]="blockingActivities()"
                   (changeDate)="setStartEndDate($event)">

  </gantt-component>
</ng-container>

[Sridharan Jayabalan]

Hi Arrash,

 

Greetings from Syncfusion.

 

Thank you for sharing the code snippets. We attempted to replicate the issue on our end but were unable to reproduce it. We created a sample using both taskbar and parent taskbar templates and tested collapsing event to check if the args.chartRow was undefined. In all cases, we consistently received the chartRow element without any issues.

 

To assist you further, could you please share the following details:

1. Complete Gantt chart code.
2. It seems that using *ngIf="(data | ganttParent) as ganttParentData" and *ngIf="(data | ganttChild: unplannedSailingRequests) as ganttChildData" in your template may be causing the issue. Could you provide more details about how ganttParentData and ganttChildData are assigned to the innerHTML of the templates?
3. Share us the code details of APIs such as projectStartDate and customization done on ActionBegin event.
4. Can you please confirm whether if the issue persists when you remove the *ngIf conditions for the taskbar and parent taskbar templates?
5. Share your timezone details.

 

Take a look for the sample we used for testing - I3pfga (forked) - StackBlitz

Regards,

Sridharan

[Arrash Nekonam]

Good afternoon. 

I attempted removed the ngIfs however this had no effect, upon some more investigation this was the ActionBegin method being called : 

onActionBegin(args: ActionEventArgs) {
args.cancel = true
}

this was being used to prevent the syncfusion popup from opening upon double click, however I found that this was what was causing the issue of the collapse. Conditioning the args.cancel seems to have solved my issue :

onActionBegin(args: ActionEventArgs) {
  console.log(args);
  if (args.requestType === "beforeOpenEditDialog") {
    args.cancel = true;
  }
  //args.cancel = true
}

[Kalpana Ganesan]

HI Arrash,

We're glad to hear that your issue got resolved. If you have any further questions or need additional assistance, please reach out to us. We will be happy to help you.

Regards,

Kalpana.