I'm getting the change data individually as well as the whole object of gantt.inlineData when ever something is changed you can see me code which is in development phase right now and trying different things to get a better solution.
const gantt = new Gantt({
appendTo : 'gantt_chart',
project : {
taskModelClass : Task,
dependencyModelClass : MyDependencyModel,
taskStore : {
listeners : {
change : (data) => {
console.log('data1234 Task Store', data, data.changes);
taskStoreDataSave();
}
}
},
dependencyStore : {
listeners : {
change : (data) => {
console.log('data1234 Dependency Store', data, data.changes);
taskStoreDataSave();
}
}
}
},
features: {
percentBar: true,
pdfExport : {
exportServer: 'https://dev.bryntum.com:8082',
headerTpl,
footerTpl
},
taskTooltip : {
template(data) {
const me = this,
{ taskRecord } = data;
return TaskTooltip.defaultConfig.template.call(me, data) +
`<table border="0" cellspacing="0" cellpadding="0">
<tr><td>${me.L('Status')}:</td><td>${taskRecord.status_name}</td></tr>
<tr><td>${me.L('Assignee')}:</td><td>${taskRecord.assignee_name}</td></tr>
</table>`;
}
},
},
tbar : [
{
type : 'button',
ref : 'exportButton',
icon : 'b-fa-file-export',
text : 'Export to PDF',
onClick() {
gantt.features.pdfExport.showExportDialog();
}
}
],
columns : [
{ type : 'name', width : 130 },
{ type : 'startdate' },
{ type : 'enddate' },
{ type : 'resourceassignment',
width : 120,
showAvatars : true
}
],
taskRenderer({ taskRecord }) {
if (taskRecord.isLeaf && !taskRecord.isMilestone) {
return StringHelper.encodeHtml(taskRecord.name);
}
}
});
gantt.project.inlineData = {
tasksData : tasks.data,
dependenciesData : tasks.links,
};
function taskStoreDataSave() {
eventData = gantt.project.inlineData;
console.log('event data changes: ', eventData);
console.log('event data changes of event data', eventData.eventsData);
console.log('event data changes of dependencies data', eventData.dependenciesData);
}
Everything is working fine with this code I need to ask one thing that when I change any one thing like start data or a dependency then I have to push only than change to the server side functions and then to save to the DB (not the whole object again and again).
Previously we were suing DHTMLX Gantt chart and we have event functions in it like that
gantt.attachEvent("onAfterTaskDrag", function(id, mode, e){
$("#gantt_loading").css("display", "inline");
var myTask = gantt.getTask(id),
progress = myTask.progress,
urlPath = "/_updateGanttTask";
});
Events examples:
gantt.attachEvent("onAfterLinkAdd", function(id,item){}
gantt.attachEvent("onAfterLinkDelete", function(id,item){}
gantt.attachEvent("onBeforeTaskDisplay", function(id, task){}
gantt.attachEvent("onTaskOpened", function(id) {}
gantt.attachEvent("onRowDragEnd", function(id, target) {}
like that by these we are triggering only the changed data and send it to the URL path to server side files, I want to know the alternatives of these listeners functions in Bryntum Gantt please can you give me some example of code here or any better approach to do what we want.
Waiting for a positive response as you guys always do
Thank you.