[ANGULAR] GANTT + Scheduler Pro

[NARESH.RAI]

Hi,

Trying to integrate gantt + scheduler pro commonly, by following demo (Gantt + scheduler)
But its not working and i didn't found any demo for gantt with scheduler pro integration.
any demo on this?

[mats]

Sure - https://bryntum.com/examples/gantt/gantt-schedulerpro

[NARESH.RAI]

Tried same demo in angular but getting error (attached)

I have attached sample code in which i am facing this issue. PFA
Redirect to /gantt to get this.

Requirement -
Both gantt & scheduler pro are created as separate components and want to them to run in sync with same data provided.

[pmiklashevich]

Hello!

Thank you for reporting this issue. We have found a bunch of issues while checking it. The main problem is that both gantt/build and schedulerpro/build are included into one application. Two module bundles interfere and make some overrides for the classes contained in both bundles. You can see details in the ticket: https://github.com/bryntum/support/issues/1980

Also, you might noticed https://www.bryntum.com/docs/gantt/#SchedulerPro/view/SchedulerPro#config-partner supports only the instance of the partnered timeline. But in our angular demos we pass a string which refers to the partnered component ID. Or to be precise to "ganttId" because angular does not allow set "id" property. So in the gantt/schedulerpro wrappers the magic happens:

• ganttId is converted to id
• partner string is used to find the partner globally. bryntum.get('gantt-id') used.

With the two bundles included Widget constructor defined in Gantt is overridden by the Widget constructor defined in SchedulerPro. So bryntum.get('gantt-id') returns null and we default "partner" config to undefined. And the error you see at the first place is related to this. I've opened a ticket to allow nullish value: https://github.com/bryntum/support/issues/1978

Also to get rid of the search magic in the wrapper I opened a feature request to make it possible to specify 'id' or another string reference to be able to find the partnered component automatically: https://github.com/bryntum/support/issues/1979

So until the #1980 is fixed, I would recommend you to refrain from using wrappers and use vanilla components. You can do it similar to Advanced demo in Gantt. Here is the guide showing how to achieve this without wrapper:
https://www.bryntum.com/docs/gantt/#guides/integration/angular.md#integrating-gantt-with-angular-directly-(without-a-wrapper)
I also opened a ticket to create Gantt + SchedulerPro demo using Angular (without wrapper). https://github.com/bryntum/support/issues/1981

In scope in your demo it might look somehow like this:

import {Component, OnInit, Input, ViewChild, OnDestroy, ElementRef} from '@angular/core';
import {gantt as ganttConfig} from './ganttConfig';
import {schedulerConfig} from '../scheduler/config';
import { Panel, Gantt, SchedulerPro, ProjectModel } from "bryntum-gantt/gantt.lite.umd.js";

@Component({
  selector: "custom-gantt-scheduler",
  template : '<div id="container"></div>'
})
export class GanttChartComponent implements OnInit {
  private elementRef: ElementRef;
  public gantt: any;
  public scheduler: any;
  public project: any;
  public panel: any;

  constructor(element: ElementRef) {
    this.elementRef = element;
  }

  ngOnInit() {
    this.project = new ProjectModel({
      autoLoad: false,
      autoSync: false,
      listeners: {
        beforeLoadApply: ({ response }) => {
          response.project.startDate = new Date();
        }
      },
      transport: {
        load: {
          url: './assets/data/ganttProjecteData.json',
        }
      },
    });

this.gantt = new Gantt({
  ...ganttConfig,
  project : this.project
});

this.scheduler = new SchedulerPro({
  ...schedulerConfig,
  project : this.project,
  partner : this.gantt
});

this.panel = new Panel({
  layoutStyle : {
    flexDirection : 'column'
  },
  appendTo : this.elementRef.nativeElement.firstElementChild,
  items    : [
    this.gantt,
    this.scheduler
  ]
});

this.project.load();
  }
}

I stripped out some code and did some other minor changes in other files to make it work. I'm attaching here a draft for reference:

testcase2.zip

(49.32 KiB) Downloaded 107 times

Best regards,
Pavel

[NARESH.RAI]

Hi,

Thanks for providing all details.
We have already developed all our requirements of gantt & scheduler pro components using angular wrapper.
and now we don't want to change without using angular wrapper.

So please keep me posted about those issue.

Thanks

[pmiklashevich]

Please subscribe to the github issues to get notified when they are fixed. Also we will create a new demo showing Gantt + Scheduler Pro with the wrappers as soon as the bugs are fixed.