а

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" }
        ]
    });
});