Marker extension does not work with Gantt.getGanttInstance()


#1

For my application, I need to create new instance of gantt each time the chart is loaded. So I’m doing it using Gantt.getGanttInstance(), but I’ve run into an issue with the marker extension.

I’m using dhtmlxGantt 6.2 Enterprise pro version. My application uses RequireJS. Here is the config:

requirejs.config({
  paths: {
    "gantt": "lib/gantt/dhtmlxgantt",
    "marker": "lib/gantt/ext/dhtmlxgantt_marker",
  },
  shim: {
    "marker": ["gantt"],
  }
});

The module where I initialize the chart:

define(['gantt', 'marker'], function(dhx) {
    let gantt = dhx.Gantt.getGanttInstance();
    gantt.init('gantt_chart');
    var today = new Date();
    gantt.addMarker({
        start_date: today,
        css: 'today',
        text: 'Today',
        title: 'Today: ' + today
    })
    gantt.parse(data);
});

And that results in this error:

Uncaught Error: Mismatched anonymous define() module: function(){return function(e){var t={};function r(a){if(t[a])return t[a].exports;var n=t[a]={i:a,l:!1,exports:{}};return e[a].call(n.exports,n,n.exports,r),n.l=!0,n.exports}return r.m=e,r.c=t,r.d=function(e,t,a){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(r.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)r.d(a,n,function(t){return e[t]}.bind(null,n));return a},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/codebase/",r(r.s=231)}({231:function(t,r){!function(){function t(t){if(!e.config.show_markers)return!1;if(!t.start_date)return!1;var r=e.getState();if(!(+t.start_date>+r.max_date||+t.end_date&&+t.end_date<+r.min_date||+t.start_date<+r.min_date)){var a=document.createElement("div");a.setAttribute("data-marker-id",t.id);var n="gantt_marker";e.templates.marker_class&&(n+=" "+e.templates.marker_class(t)),t.css&&(n+=" "+t.css),t.title&&(a.title=t.title),a.className=n;var i=e.posFromDate(t.start_date);if(a.style.left=i+"px",a.style.height=Math.max(e.getRowTop(e.getVisibleTaskCount()),0)+"px",t.end_date){var o=e.posFromDate(t.end_date);a.style.width=Math.max(o-i,0)+"px"}return t.text&&(a.innerHTML="<div class='gantt_marker_content' >"+t.text+"</div>"),a}}function r(){if(e.$task_data){var t=document.createElement("div");t.className="gantt_marker_area",e.$task_data.appendChild(t),e.$marker_area=t}}e._markers||(e._markers=e.createDatastore({name:"marker",initItem:function(t){return t.id=t.id||e.uid(),t}})),e.config.show_markers=!0,e.attachEvent("onBeforeGanttRender",function(){e.$marker_area||r()}),e.attachEvent("onGanttReady",function(){r(),e.$services.getService("layers").createDataRender({name:"marker",defaultContainer:function(){return e.$marker_area}}).addLayer(t)}),e.getMarker=function(e){return this._markers?this._markers.getItem(e):null},e.addMarker=function(e){return this._markers.addItem(e)},e.deleteMarker=function(e){return!!this._markers.exists(e)&&(this._markers.removeItem(e),!0)},e.updateMarker=function(e){this._markers.refresh(e)},e._getMarkers=function(){return this._markers.getItems()},e.renderMarkers=function(){this._markers.refresh()}}()}})}
http://requirejs.org/docs/errors.html#mismatch

However, instead of creating a new gantt instance, if I just use ‘gantt’, it works fine:

define(['gantt', 'marker'], function(dhx) {
    let gantt = dhx.gantt;
    gantt.init('gantt_chart');
    var today = new Date();
    gantt.addMarker({
        start_date: today,
        css: 'today',
        text: 'Today',
        title: 'Today: ' + today
    })
    gantt.parse(data);
});

#2

Hello,
I don’t specialize in RequireJS, but will notify the dev team about the issue.
Please, send me a ready demo with all the necessary files so that I can reproduce the issue locally and give the demo to the dev team.


#3

Attaching demo code:

[Edit (2019/10/15): Removed attachment]

The RequireJS config and module definition are in scripts/app.js.


#4

Hello,
Thank you for sending the demo.
We reproduced the issue, the dev team will fix it in the 6.3 version.

Here is the updated demo that has a build with the fix:
https://files.dhtmlx.com/30d/cbf0684e8fbd462a2cfc46ea92d611d9/requirejs-gantt-extensions.zip

Also, the package has switched to named modules, modules are now named as following:
core library:
“dhtmlxgantt”
extensions:
“ext/dhtmlxgantt_critical_path”
“ext/dhtmlxgantt_critical_tooltip”etc.
locales:
“locale/locale_de”
“locale/locale_cs”etc.

So if previously you could use any names in the requirejs config, now you have to use these exact names.
Here is an example for require js:

requirejs.config({
    paths: {
        "dhtmlxgantt": "../../codebase/dhtmlxgantt",
        "ext/dhtmlxgantt_tooltip": "../../codebase/ext/dhtmlxgantt_tooltip",
        "ext/dhtmlxgantt_critical_path": "../../codebase/ext/dhtmlxgantt_critical_path",
    },
    shim: {
        "ext/dhtmlxgantt_tooltip": ["dhtmlxgantt"],
        "ext/dhtmlxgantt_critical_path": ["dhtmlxgantt"],
    }
});
requirejs(["dhtmlxgantt", "ext/dhtmlxgantt_tooltip", "ext/dhtmlxgantt_critical_path"], function (dhx) {
    var gantt = dhx.gantt;

    gantt.init("gantt_here");
    gantt.parse({
        data: [
            { id: 1, text: "Project #2", start_date: "01-04-2018", duration: 18, progress: 0.4, open: true },
            { id: 2, text: "Task #1", start_date: "02-04-2018", duration: 8, progress: 0.6, parent: 1 },
            { id: 3, text: "Task #2", start_date: "11-04-2018", duration: 8, progress: 0.6, parent: 1 }
        ],
        links: [
            { id: 1, source: 1, target: 2, type: "1" },
            { id: 2, source: 2, target: 3, type: "0" }
        ]
    });
});

#5

When I use this example it works, as long I don’t have two gantt visible at the same time.

In 4.2 I was able to use Gantt.getGanttInstance() - but know you want us to use dhx.gantt to create a new instance. But if I already have one gantt visible, and do this, the first gantt disappear when the second is created.

I can’t create a demo right now, as our system is pretty complex, but we have the options to open a popup with the gantt control in - But if we open two of these popup, it does not work.

How should I solve this?


#6

Hello Morten,
Unfortunately, I couldn’t reproduce the issue:
https://files.dhtmlx.com/30d/bb56a6fb55327cf0f962e692beb922e4/requirejs-gantts+extensions.zip
It is hard to suggest what might be wrong as I don’t see your code. Please send me a ready demo that I can run so that I can reproduce the issue and check what might be wrong.


#7

Hi Ramil.

I have just tried and use the version you are using (6.2.7) and it works fine with this. But if I use the latest version I have (6.3.1), it fails.

So can you try again with your demo but with the latest version of gantt?
EDIT: I have just downloaded 6.2.7, but this version does not work either - I can only get it to work with the source code you have in requirejs-gantts-extensions.zip


#8

Hello Morten,
Thank you for the clarification.
I checked the demo and looks like the fix wasn’t included in the 6.3 version. I reminded the dev team about that. So, now the demo will work only with the special 6.2.7 build with that has the requireJS support.
Unfortunately, I cannot give you any ETA on when the dev team adds the fix.