Hi,
I’m using angular 2+ and I have done many customization in the gantt in my ts file. (change navigation scale, remove grid, …) I’m also loading the services in attachevent of gantt which takes time because I have to rework the datas. So when the page is loading with the gantt the initial form of the gantt is displaying first, then 2 sec after my custom gantt is loading. Do you know how I can instantly load the gantt ?
And another problem is that when I navigate through pages, and I return to the gantt page, there’s a blank page. And when I go through the console I see:
ERROR TypeError: Cannot read property ‘length’ of undefined
at o._clearLayers (dhtmlxgantt.js:9)
at o.destructor (dhtmlxgantt.js:9)
at e.clear (dhtmlxgantt.js:9)
at e.destructor (dhtmlxgantt.js:9)
at e.destructor (dhtmlxgantt.js:9)
at e.destructor (dhtmlxgantt.js:9)
at Object.t._reinit (dhtmlxgantt.js:9)
at Object.init (dhtmlxgantt.js:9)
I think maybe my gantt.init should be place somewhere else … If I refresh it returns to normal.
Hello,
If at first you see Gantt with default settings and after some time there is Gantt with your configuration, then you probably put gantt.init() before configs and attach events (in that case some settings won’t be applied!).
Regarding the second question - I suspect that you encountered a bug related to grid. If there are several grids or grid is not displayed, Gantt stops working after the next reinitialization. If you just disable grid, there is a workaround where you should disable the grid after the first initialization then everything should be OK. When you refresh the page everything is loaded again, that’s why it helps.
We know about the bug and it will be fixed in future versions. But could you clarify if you have several grids in the layout config?
Hello,
I checked the workaround again and looks like it works in the snippet because there is gantt.render() command before gantt.init() command. When I remove the first command I reproduce the issue.
However, here is another workaround: do not specify grid in the layout config. Then it should work after reinitializations: http://snippet.dhtmlx.com/8395f9036
Hi!
I have similar problem but doing slightly different thing.
My Gantt renders alright, I just get:
WorkflowActionsComponent.html:3 ERROR TypeError: Cannot read property ‘length’ of undefined
at o._clearLayers (dhtmlxgantt.js:9)
at o.destructor (dhtmlxgantt.js:9)
at e.clear (dhtmlxgantt.js:9)
at e.destructor (dhtmlxgantt.js:9)
at e.destructor (dhtmlxgantt.js:9)
at e.destructor (dhtmlxgantt.js:9)
at Object.t._reinit (dhtmlxgantt.js:9)
at Object.init (dhtmlxgantt.js:9)
just like @euph but for me this happens when I re-creare angular 6 component. on the first show-up it works good, but when component gets destroyed and created again error appears.
Here’s what I do:
ngOnInit() {
this.computeValidityRanges();
this.configGantt();
this.renderGantt();
gantt.attachEvent("onTaskClick", (id, e) => {
this.detailSrv.goDetailBy(DetailType.VERSION, id);
});
gantt.attachEvent("onBeforeParse", function () {
gantt.clearAll();
});
}
private configGantt() {
gantt.config.xml_date = "%Y-%m-%d %H:%i";
gantt.config.show_grid = false;
gantt.config.drag_progress = false;
gantt.config.drag_links = false;
gantt.config.order_branch = true;
gantt.config.sort = true;
gantt.config.scale_unit = this.findGanttUnitScale();
gantt.init(this.ganttContainer.nativeElement);
}
private findGanttUnitScale(): string {
let rule: VersionRule = _.maxBy(this._forDoc.versions, (v: VersionRule) => {
return v.validityRule.rangeDays;
});
rule = Object.assign(new VersionRule(), rule);
let max = rule.validityRule.rangeDays;
if (max > 365)
return 'year';
else if (max > 28)
return 'month';
else if (max > 7)
return 'week';
else
return 'day';
}
private computeValidityRanges(): void {
for (let ver of this._forDoc.versions) {
let rule = ver.validityRule;
let fromMoment: moment.Moment = moment(rule.validFrom);
let toMoment: moment.Moment = moment(rule.validTo);
toMoment.add(1, 'days');
let rangeMoment: number = toMoment.diff(fromMoment, 'days');
rule.rangeDays = rangeMoment;
}
}
renderGantt(): void {
let data = [];
let links = [];
this._forDoc.versions.forEach(version => {
let apprState = version.tasks[0];
let isApproved = apprState.taskType == 'APPROVAL' && apprState.taskState == 'COMPLETE';
let isLast = version.id == this._forDoc.document.docVersion.id;
let text = version.docName + ' [Verzia ' + version.versionVed + ']';
let color;
if (isLast)
color = '#0886bd';
if (ModelHelper.isClashed(apprState))
color = 'red';
if (isApproved)
color = 'green';
let interval = {
id: version.id,
text: text,
start_date: version.validityRule.validFrom,
duration: version.validityRule.rangeDays,
progress: 0,
color: color
};
data.push(interval);
});
gantt.parse({data, links});
}
so you can see it’s all hooked on NgOnInit lifecycle method.
Please advice what should I do,
Thanks!