Gantt component in salesforce lightning

Gantt
#1

Can any one explain how to use Gantt component in salesforce lightning with sample code.

GanttCompApp.app

<aura:application >
<c:GanttComp/>
</aura:application>

GanttComp.cmp

<aura:component controller=“GanttData_Custom_Controller” access=“global” >

<ltng:require styles="{!$Resource.DHX+ '/codebase/dhtmlxgantt.css'}" />  
<ltng:require scripts="{!$Resource.DHX+ '/codebase/dhtmlxgantt.js'}"  afterScriptsLoaded="{!c.initGantt}" />  

    <div id="gantt_here" style='width:10 00|px; height:420px;'></div>

</aura:component>

GanttCompController.js

({
myAction : function(component, event, helper) {

},

initGantt : function(component, event, helper) {

// Calling server-action to get the data
var action = component.get("c.getAllTask");

debugger;
// Create a callback that is executed after
// the server-side action returns
action.setCallback(this, function(response) {
var state = response.getState();
if (state == “SUCCESS”) {
let data = response.getReturnValue();
console.log(‘got data=’+data);
helper.drawAGantt(component);
}
else if(state === “ERROR”) {
var errors = response.getError();

         if (errors) {
             console.log("Error message: " + errors);
             
        } else {
            console.log("Unknown error");
        } 
        
    }
});

$A.enqueueAction(action);

}//initGantt
})

GanttCompHelper.js

({
helperMethod : function() {

},
drawAGantt : function( component ) {

// I am currently keeping static value now 


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

}//drawAGantt
})

When Page loads I am getting below error

This page has an error. You might just need to refresh it.
Error in $A.getCallback() [i.contentWindow.addEventListener is not a function]
Callback failed: apex://GanttData_Custom_Controller/ACTION$getAllTask
Callback failed: apex://GanttData_Custom_Controller/ACTION$getAllTask
Failing descriptor: {c:GanttComp}

Can you please let me know to fix this issue

#2

Hi,
as a rule, you’ll get a reply faster if you explain what you’ve tried to do (with code samples) and what didn’t work for you.

From I can tell right now, gantt may require enabling the content security policy extensions in order to work correctly in SalesForce. Other than that, I’m not aware of any specific approaches needed for salesforce integration

You need to:

  1. initialize gantt on the page
  2. connect it to the data store

I’m not sure whether the built-in ajax api of dhtmlxgantt is compatible with approaches used in SalesForce, so you may need to handle data loading and saving changes manually - https://docs.dhtmlx.com/gantt/desktop__server_side.html#savingchangeswithoutdataprocessor
https://docs.dhtmlx.com/gantt/desktop__server_side.html#customrequestheadersandparameters

If you have issue with anything specific - please do elaborate.

#3

GanttCompApp.app

<aura:application >
    <c:GanttComp/>
</aura:application>

GanttComp.cmp

<aura:component controller="GanttData_Custom_Controller"  access="global" >
	
    <ltng:require styles="{!$Resource.DHX+ '/codebase/dhtmlxgantt.css'}" />  
<ltng:require scripts="{!$Resource.DHX+ '/codebase/dhtmlxgantt.js'}"  afterScriptsLoaded="{!c.initGantt}" />  

<body>
        <div id="gantt_here" style='width:10 00|px; height:420px;'></div>
    </body>
</aura:component>

GanttCompController.js


({
	myAction : function(component, event, helper) {
		
	},
    
    initGantt : function(component, event, helper) {
    
    // Calling server-action to get the data
    var action = component.get("c.getAllTask");
 debugger;
    // Create a callback that is executed after
    // the server-side action returns
    action.setCallback(this, function(response) {
        var state = response.getState();
        if (state == "SUCCESS") {
            let data = response.getReturnValue();
            console.log('got data='+data);
            helper.drawAGantt(component);
        }
        else if(state === "ERROR") {
            var errors = response.getError();
            
             if (errors) {
                 console.log("Error message: " + errors);
                 
            } else {
                console.log("Unknown error");
            } 
            
        }
    });

    $A.enqueueAction(action);

}//initGantt
})

GanttCompHelper.js


({
	helperMethod : function() {
		
	},
    drawAGantt : function( component ) {
    
    // I am currently keeping static value now 
	
	
    var tasks =  {
        data:[
            {id:1, text:"Project #1", start_date:"01-04-2018", duration:18,order:10,
                progress:0.4, open: true},
            {id:2, text:"Task #1",    start_date:"02-04-2018", duration:8, order:10,
                progress:0.6, parent:1},
            {id:3, text:"Task #2",    start_date:"11-04-2018", duration:8, order:20,
                progress:0.6, parent:1}
        ],
                links:[
        { id:1, source:1, target:2, type:"1"},
        { id:2, source:2, target:3, type:"0"},
        { id:3, source:3, target:4, type:"0"},
        { id:4, source:2, target:5, type:"2"},
    ]
    };
                    
    gantt.init("gantt_here");
	gantt.parse(tasks);
    
}//drawAGantt
})

When Page loads I am getting below error

This page has an error. You might just need to refresh it.
Error in $A.getCallback() [i.contentWindow.addEventListener is not a function]
Callback failed: apex://GanttData_Custom_Controller/ACTION$getAllTask
Callback failed: apex://GanttData_Custom_Controller/ACTION$getAllTask
Failing descriptor: {c:GanttComp}

Can you please let me know fix the issue

#4

Hi,
don’t have any good ideas, unfortunately.
The error seems to fire from getAllTask server call.
Does your callback gets called, or the error happens prior to it?

E.g. if you put a debugger here - does the program stops here?

 action.setCallback(this, function(response) {
     debugger;// <-- HERE

        var state = response.getState();
        if (state == "SUCCESS") {

I wonder whether it is something in server action or in the callback code.

#5

I’m having the same issue.
I got a little further by adding an aura:id to the div statement:

My helper then ‘found’ the

using:
var theGanttDiv = component.find(“gantt_here”);

I then tried init on that value (which admittedly doesn’t look right):
gantt.init(theGanttDiv);

and got these errors:
Cannot read property ‘querySelector’ of undefined
[t.appendChild is not a function

Did you get any further?

#6

Since that post, I’ve installed the demo package.
Can you help with a query on that?

The Gantt.init initialises the Gantt but also load data from Gantt_Object__c even before further loading is requested.

I want to load data from my own objects. Mine are being added to the other objects.

How can I clear the Gantt?

I tried Gantt.clearAll() but it didn’t work.

(my workaround would be to delete any Gantt_Object__c objects).

#7

Correction.
I had created my own version and had both components on the same page. One was not visible while the other had both loads filling the project list.
Changing the div name made no difference.
Anyway, onwards and upwards…

#8

Hello David,
If you want to have several Gantts on the same page, you need to create Gantt instances and initialize them in different containers:
https://docs.dhtmlx.com/gantt/desktop__multiple_gantts.html
Here is an example:
https://snippet.dhtmlx.com/e137bd49c