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?
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.
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:
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:
Best regards,
Pavel
Pavlo Miklashevych
Sr. Frontend Developer