Our state of the art Gantt chart


Post by kamran_mushtaq »

1: I'm getting the data which is changing when I change dependency or and task store value How can I get the whole new changed data object? I have to save it as json or can I pass the same changed object to the backend so that it updates the new data in db.
How can I do it please let me know Thank you.

2: How to auto update this data and also when to use commitAsync etc and these autoLoad autoUpdate cmds can be useful in this case?

This is the code:

const gantt = new Gantt({
			appendTo : 'gantt_chart',

project : {
       taskModelClass : Task,

        taskStore : {
            listeners : {
                change : (data) => {
                    console.log('data1234 Task Store', data, data.changes)
                }
            }
        },
        dependencyStore : {
            listeners : {
                change : (data) => {
                    console.log('data1234 Dependency Store', data, data.changes);
                }
            }
        }
 },
 });


Post by alex.l »

Hi kamran_mushtaq,

  1. Please check https://bryntum.com/docs/gantt/api/Gantt/model/ProjectModel#property-changes
  2. We have full guide how to work with remote data here: https://bryntum.com/docs/gantt/guide/Gantt/data/crud_manager
    This guide will be useful to check too https://bryntum.com/docs/gantt/guide/Gantt/data/project_data

I hope you will find all required information. Let us know if any questions left.

All the best,
Alex


Post by kamran_mushtaq »

Hi Alex,
Thank you for the reply, I'm not getting it through the documentation links can you please let me know through code in my current scenario?

const gantt = new Gantt({
			appendTo : 'gantt_chart',

		project : {
      		taskModelClass : Task,

        taskStore : {   
            listeners : {
                change : (data) => {
                    console.log('data1234 Task Store', data, data.changes);
                    // Do your processing here...
                }
                // taskResizeEnd () {
                //     console.log('taskresize');
                // }
            }
        },
        dependencyStore : {
            listeners : {
                change : (data) => {
                    console.log('data1234 Dependency Store', data, data.changes);
                    // Do your processing here...
                }
            }
        }

		},

	features: {
		percentBar: true,

            pdfExport : {
                exportServer: 'https://dev.bryntum.com:8082',
                headerTpl,
                footerTpl
            }

		},
        
        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.taskStore.tree = true;
	gantt.project.taskStore.transformFlatData = true;

		gantt.project.inlineData = {
			tasksData : eventData,
			dependenciesData  : [
				{ fromTask : 12, toTask : 15 },
				{ fromTask : 14, toTask : 24 }
			],

			resourcesData : [
				{ id : 12, name : 'Arcady', company: 'jinTech' },
				{ id : 14, name : 'Don' , company: 'ABC'}
			],
			assignmentsData : [
				{ 'event' : 12, 'resource' : 12 },
				{ 'event' : 24, 'resource' : 14 }
			]

		};

Post by alex.l »

It's not clear what's the actual question. I don't know how are you going to save changes on your backend. Your code looks ok, you can subscribe on every store separately and do different things depends on change, as you did.
We have built-in CrudManager in ProjectModel, so you also could just setup urls to load/save data and enable autoSync, so it will be handled automatically by our internal manager. See docs I mentioned.
You also could add only one https://bryntum.com/docs/gantt/api/Gantt/model/ProjectModel#event-change listener and catch all changes in all connected stores in one place and handle data saving by your own, if really need that.
You used inlineData in your snippet, I guess for test purposes, or maybe not. That's also important, because if you need to use inline data, you cannot use load/sync urls in projectModel. Or inline data configs, or remote data configs.
Also please check examples in /examples folder of sources you downloaded.

All the best,
Alex


Post by kamran_mushtaq »

1: My Question is I'm getting the changes on individual task stores I want to commit that changes back to the original Object and then pass this further to the backend so that it save its changed values back to the db. listeners are working fine in the code and changes are also showing in console.log.

const project = new ProjectModel({
    autoLoad : true,
    // we want to provide a custom store for tasks
    taskStore,
    transport : {
        load : {
            url : 'php/read.php'
        },
        sync : {
            url : 'php/save.php'
        }
    }
});

2: In this code the whole project model is using. Dose this code will work in our scenario and what we are sending in load and sync PHP files? Should I do it like that ?
we are providing this in code
// we want to provide a custom store for tasks
taskStore,
for other stores we have to do the same?

3: You mentioned by using inlinedata we cannot use load/sync urls in projectModel. Inlinedata worked for me and gantt chart is displaying with our object data, after I tried different things. How to modify our code then if we cannot use load/sync with it?


Post by alex.l »

  1. ok
  2. Yes, this code use whole project model and will collect and commit all changes in all connected to project stores using built-in CrudManager. All you need in this case - specify URLs and set autoLoad/autoSync as you prefer.
    If you need to commit data separately, you don't need to specify URLs for built-in CrudManager, because in that case you use your own CRUD logic.
  3. inlineData is local dataset.
    load/sync use remote data. load URL specified specially to load initial dataset, so inlineData makes no sense in this case. sync URL specified to commit data with backend using built-in CrudManager.

If you want to use your own load/sync logic and take care by your own with data saving and loading, you can set data using inlineData, subscribe on store events to catch data change, save data using 3rd party services or your own fetch methods, get new dataset and set in back using inlineData. For ProjectModel it will be local datasets, but for your logic it will be server data.

Our guides have this information https://bryntum.com/docs/gantt/guide/Gantt/data/project_data#working-with-inline-data
https://bryntum.com/docs/gantt/guide/Scheduler/data/crud_manager
https://bryntum.com/docs/gantt/guide/Gantt/data/crud_manager

All the best,
Alex


Post by kamran_mushtaq »

Hi Alex,
thank you so much for your help,
right now the problem I'm facing is I can get the changes in the data but i'm not getting the whole changed object in which the new data is updated. I just need the data that is changed or added to save in the same object variable which is "eventData" in my code. Then I will pass this "eventData" to where I want.
please check! please consider have a look to the comments as well

	const gantt = new Gantt({
      	    taskStore : {   
listeners : { change : (data) => { console.log('data1234 Task Store', data, data.changes); // Do your processing here... // console.log('eventdata in listener before', eventData); // eventData = data.data; // console.log('eventdata in listener after assigning changed data', eventData); taskStoreDataSave(data); } // taskResizeEnd () { // console.log('taskresize'); // } } }, });
function taskStoreDataSave(data) { console.log('gantt.project.taskStore : in a function : ', gantt.project.taskStore); console.log('gantt.project.taskStore.data: in a function: ', gantt.project.taskStore._data); console.log('passing data in function', data); }

Post by alex.l »

gantt.project.inlineData is also getter , try to use it
https://bryntum.com/docs/gantt/api/Gantt/model/ProjectModel#property-inlineData

All the best,
Alex


Post by kamran_mushtaq »

That's great Alex thank you so much.


Post Reply