Our state of the art Gantt chart


[ANGULAR] Upgrade Gantt 6.1.9 to version 6.2.0

Post Reply

Post by devcat »

Hello,

After upgrading Bryntum Gantt from version 6.1.9 to 6.2.0, my code for accessing the Gantt component instance in Angular stopped working. Previously, I used the following approach:

@ViewChild('gantt', { static : false }) ganttComponent!: BryntumGanttComponent;

async ngAfterViewInit() {
    this.gantt = this.ganttComponent.instance;
    console.log('Gantt Instance:', this.gantt);
    ...
}

In version 6.1.9, this.ganttComponent.instance correctly returned the component instance, but after upgrading, this property no longer seems to be found, as it now returns undefined.

I have tried modifying your angular/undoredo example to use the same version of angular as my project but in yours it does return the value of instance.

Do you have any idea what could be causing this error?

When updating, two other errors also appeared:

ERROR TypeError: this.L(...) is not a function
    at TimeAxisColumn2.updateHeaderAriaLabel (gantt.module.js:155300:40)
    at TimeAxisColumn2.onTimelinePaint (gantt.module.js:155361:10)
ERROR TypeError: Cannot read properties of undefined (reading 'size')
    at Gantt.onElementMouseOver (gantt.module.js:126283:32)
    at Gantt.onElementMouseOver (gantt.module.js:226213:11)

Post by ghulam.ghous »

Are you able to see the same issue on 6.2.2 version?

Post by ghulam.ghous »

Because I am not able to reproduce this issue in our online examples for angular.

Post by devcat »

Yes, the same errors are generated with version 6.2.1 and 6.2.2

Is there a way to access the Angular wrapper source code? Or do you have any ideas as to what might be causing the value to not be assigned to instance?

Post by ghulam.ghous »

That's weird because these issues are not reproducible in our examples. I have tested here: https://bryntum.com/products/gantt/examples/frameworks/angular/baselines/. Please provide us a small runnable test case so we can dig into it.

Is there a way to access the Angular wrapper source code? Or do you have any ideas as to what might be causing the value to not be assigned to instance?

I can't see a way to do that, also we don't have any ideas at the moment as we are not able to see these issues.

Post by devcat »

I've managed to fix the previous errors, some of which were related to localization.

Now another error is generated, which worked correctly before updating the library. We're using the revision system.

When we click the Create button, we run the following code:

async onAddTaskClick () {
    const dateNow = new Date();
    const dateStringNow = dateNow.getFullYear() + "-" + (((dateNow.getMonth() +1) < 10) ? "0" : "") + (dateNow.getMonth()+1) + "-" + ((dateNow.getDate() < 10) ? "0" : "") + dateNow.getDate();
    const obj = {
      name: '',
      duration: 1,
      startDate : dateStringNow,
      ProjectId: this.projectId
    };

let added: Model = null;
let selectedRecord = this.gantt.selectedRecord as TaskModel;
if (selectedRecord) { // Tasks selected
  added = await this.gantt.addTaskBelow(selectedRecord, { data: obj }) ;
}
else { // Task not selected in the list
  const firstRow = this.gantt.firstVisibleRow;
  const firstVisibleRecord = firstRow?.cells && firstRow.cells?.length > 0 ? this.gantt.getRecordFromElement(firstRow.cells[0]) as TaskModel : null;
  if (firstVisibleRecord) {
    if (firstVisibleRecord.isParent) { // If the first visible task has children
      const record = this.gantt.taskStore.add(obj);
      const result = firstVisibleRecord.insertChild(record, firstVisibleRecord.children[0]);
      added = Array.isArray(result) ? result[0] : result;
    }
    else { // If we find the first visible task and it has no children
      added = await this.gantt.addTaskBelow(firstVisibleRecord, { data: obj }) ;
    }
  }
  else { // If we don't find any visible tasks or there are no tasks
    const result = this.gantt.taskStore.rootNode.appendChild(obj);
    added = Array.isArray(result) ? result[0] : result;
  }
}

await this.gantt.project.commitAsync();

// scroll to the added task
await this.gantt.scrollRowIntoView(added);

this.gantt.features.cellEdit.startEditing({
  record : added,
  field  : 'name'
});
  }

Error is generated in the statement this.gantt.features.cellEdit.startEditing():

ERROR Error: Uncaught (in promise): TypeError: Cannot destructure property 'editor' of 'column' as it is undefined.
TypeError: Cannot destructure property 'editor' of 'column' as it is undefined.
    at CellEdit3.getEditingContext (gantt.module.js:95840:47)
    at gantt.module.js:95889:32
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (asyncToGenerator.js:3:1)
    at _next (asyncToGenerator.js:25:1)
    at _ZoneDelegate.invoke (zone.js:372:26)
    at Object.onInvoke (core.mjs:26231:33)
    at _ZoneDelegate.invoke (zone.js:371:52)
    at Zone.run (zone.js:134:43)
    at zone.js:1275:36
    at CellEdit3.getEditingContext (gantt.module.js:95840:47)
    at gantt.module.js:95889:32
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (asyncToGenerator.js:3:1)
    at _next (asyncToGenerator.js:25:1)
    at _ZoneDelegate.invoke (zone.js:372:26)
    at Object.onInvoke (core.mjs:26231:33)
    at _ZoneDelegate.invoke (zone.js:371:52)
    at Zone.run (zone.js:134:43)
    at zone.js:1275:36
    at resolvePromise (zone.js:1211:31)
    at zone.js:1118:17
    at zone.js:1134:33
    at asyncGeneratorStep (asyncToGenerator.js:6:1)
    at _throw (asyncToGenerator.js:29:1)
    at _ZoneDelegate.invoke (zone.js:372:26)
    at Object.onInvoke (core.mjs:26231:33)
    at _ZoneDelegate.invoke (zone.js:371:52)
    at Zone.run (zone.js:134:43)
    at zone.js:1275:36

Post by ghulam.ghous »

I have tried the above code snippet here in this example: https://bryntum.com/products/gantt/examples/advanced/ and it did not threw any errors so it has to be something else causing this issue. We cannot give you any suggestions or root cause of this issue unless we reproduce this issue. Please try sharing a small test case which should be runnable and we can debug it.

Post Reply