Our state of the art Gantt chart


Post by kamran_mushtaq »

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.


Post by marcio »

Hey kamran_mushtaq,

If I understood correctly, you can try to set up sync link in your project configuration, and then use the approach described here to filter what will be synced viewtopic.php?p=108342#p108342

https://www.bryntum.com/docs/gantt/api/Gantt/model/ProjectModel#config-syncUrl

Let me know if that's something doable.

Best regards,
Márcio


Post by kamran_mushtaq »

Hi Marcio,

Thank you for the reply, however I couldn't get what you proposed. I can see the project.on() functions are something that will do my work. Basically when I change any data in the Gantt chart like date or percentage done or dependency I want to track this and and add a function on it to send the changed data to our server side code. I want to write an optimized code which will to this process quickly. Can you please purpose what is good for us having a look on the code that I mentioned above?
There is anything we need to change in our code to accomplish what we want?

Lastly can we have a .on EventHelper list of functions that can be useful.

Thank you


Post by mats »

In Bryntum, you don't need to (or should) listen to different events to track when data changes. Everything is handled on the data level, meaning there is one single place to listen for when data changes. Please see https://bryntum.com/docs/gantt/api/Gantt/model/ProjectModel#monitoring-data-changes

project : {
      	    taskModelClass : Task,
            dependencyModelClass : MyDependencyModel,
            listeners : {
                  // called when any store has changed (dependency added/removed, task updated etc)
                  change({ store, action, records }) {
                    console.log(records);
                    console.log(this.changes);
                     // TODO save to your backend
                }
            }
        },

Post by kamran_mushtaq »

Hi Mats,
Thank you for the reply I get this point so im writing my code in generic listener now. Can you please let me know that what is externalDataModel in this example according to our code base. https://bryntum.com/docs/gantt/api/Gantt/model/ProjectModel#monitoring-data-changes

const gantt = new Gantt({
    project: {
        listeners : {
            change({ store, action, records }) {
                const { $name } = store.constructor;

            if (action === 'add') {
                externalDataModel.add($name, records);
            }

            if (action === 'remove') {
                externalDataModel.remove($name, records);
            }
        }
    }
}
});

Post by tasnim »

Hi,
It's just pseudo code. It can be an object or a class.
It's just an example.

Good Luck :),
Tasnim


Post by kamran_mushtaq »

So what ever I want to do to save my data to backend I will be doing it in these conditions.
how many types of actions are there add, remove update etc are also there?


Post by tasnim »

Attachments
0OHr1woSem.png
0OHr1woSem.png (51.62 KiB) Viewed 248 times

Post by kamran_mushtaq »

Thank you Tasnim I get it.
I'm having one issue onload the changes consoles are coming it means that listeners is working on loading the page which should not be done like that listeners only run when there is any change in Gantt area.
How t prevent this behavior because of this we are getting error? Change Listeners should not run on page load (first time).

 dependencyStore : {
                listeners : {
                    change : (data) => {
                        console.log('data1234 Dependency', data, data.changes);
                        console.log('Dependency records', data.records);
                        console.log('Dependency action', data.action);            

                    dependencyStoreDataSave(data.records);
                }
            }
        }

Post by tasnim »

Here is an example of how to avoid loading changes

let loading = false;
new Gantt({
    appendTo          : 'container',
    dependencyIdField : 'sequenceNumber',

project : {
    autoLoad  : true,
    transport : {
        load : {
            url : '../_datasets/launch-saas.json'
        }
    },
    listeners : {
        beforeLoad() {
            loading = true;
        },
        load() {
            loading = false;
        },
        change({ action }) {
            if (loading === false) {
                // console.log(count);
                console.log('loaded');
            }
        }
    }
},

columns : [
    { type : 'name', width : 250 }
],

// Custom task content, display task name on child tasks
taskRenderer({ taskRecord }) {
    if (taskRecord.isLeaf && !taskRecord.isMilestone) {
        return StringHelper.encodeHtml(taskRecord.name);
    }
}
});

Docs :
https://bryntum.com/docs/gantt/api/Gantt/model/ProjectModel#event-load
https://bryntum.com/docs/gantt/api/Gantt/model/ProjectModel#event-beforeLoad


Post Reply