Gantt time to load css and blank page


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.

Thank you


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?


Thanks! I don’t display grids. I use gantt.config.show_grid = false. So you mean I should put this after gantt.init ? That doesn’t seems to work…


Thank you for the clarification.
You can put it after Gantt is initialized but before the data is parsed and then it shouldn’t affect the performance. Here is an example:


You’re right it’s a problem of grid because when I don’t hide all is going well. However your workaround does’nt work for me. :s


I tried to apply the workaround in the Angular project. Here is the demo:
If that doesn’t help you, send me the package and I will try to modify the code to make the workaround work.


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:


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() {


    gantt.attachEvent("onTaskClick", (id, e) => {
      this.detailSrv.goDetailBy(DetailType.VERSION, id);

    gantt.attachEvent("onBeforeParse", function () {

  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();


  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';
      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

    gantt.parse({data, links});

so you can see it’s all hooked on NgOnInit lifecycle method.
Please advice what should I do,


That bug with the reinitialization was fixed in the 6.0.0 version.
If I apply only your Gantt config, it works correctly even after the reinitialization. Here is the demo package:

If you have that error in the 6.0.0 version, please send me the package so that I can reproduce the issue locally and see what might be wrong.


fortunately version 6.0.2 is working fine!
thank’s for answering!


I had the similar problem… Thanks for the answer…