Our state of the art Gantt chart


Post by Ayurchenkoi »

Hello! I need to implement a functionality where I have to change the project start date when the percentage of the task changes from zero to something else. How can I do it?


Post by marcio »

Hey Ayurchenkoi,

If I understood correctly what you want to achieve, you can set up using the change event listener in the taskStore, and with that update the project if the percentDone of the task is changed.

https://bryntum.com/docs/gantt/api/Gantt/data/TaskStore#event-change

project: {
    ... other project configurations
    taskStore: {
      listeners: {
        change: function ({ action, record, changes, source }) {
          // Check if the percentage is changed
          const isPercentChaged =
            record?.percentDone !== 0 && changes?.percentDone;
          if (action === "update" && isPercentChaged) {
            const newProjectStartDate = new Date(); // the date that you want to set
            source.project.startDate = newProjectStartDate;
          }
        },
      },
    },
  },

Best regards,
Márcio


Post by Ayurchenkoi »

can i do something similar?

taskStore: {
            listeners: {
                change: ({ action, record, changes }: any) => {
                    if (action === 'update') {
                        if (!!changes?.percentDone) {
                            if (changes.percentDone.oldValue == 0 && changes.percentDone.value < 100) {
                                record.actualStartDate = record.startDate
                            }
                            if (record.percentDone === 100) {
                                record.actualEndDate = record.endDate
                                record.actualStartDate = record.startDate
                            }
                        }

                    if (!!changes.actualEndDate && !!changes.actualEndDate.value) {
                        record.endDate = new Date()
                        record.percentDone = 100
                    }

                    if (!!changes.actualStartDate && !!changes.actualStartDate.value) {
                        record.startDate = new Date()
                    }
                }
            },
        },
    },

Post by marcio »

Hmm, you could, but I don't see why you want to update the startDate of the task like you did in the code you shared, if you want to update the project date, you need to update the ProjectModel, not in the record. Could you please clarify what you want to achieve?

Best regards,
Márcio


Post by Ayurchenkoi »

I put it a little wrong, I need to change the dates of the task, not the project, the code that I presented earlier does not work


Post by tasnim »

Here is an example of how you can achieve it:

        taskStore : {
            listeners : {
                change(event) {
                    if (event.changes?.percentDone?.value) {
                        const record = event.records[0];
                        record.setStartDate(DateHelper.add(record.data.startDate, 5, 'day'));
                    }
                }
            }
        }
    },

Docs:
https://bryntum.com/docs/gantt/api/Gantt/model/TaskModel#function-setStartDate
https://bryntum.com/docs/gantt/api/Core/helper/DateHelper


Post by Ayurchenkoi »

i tried the example provided above but for some reason setStartDate doesn't work. Record changes, but after nothing changes in gantt ui.
Image


Post by tasnim »

Could you please attach a runnable test case here?


Post by Ayurchenkoi »

taskStore: {
            listeners: {
                change: ({ action, changes, records }: any) => {
                    const record = records[0]
                    if (action === 'update') {
                        if (!!changes?.percentDone) {
                            if (changes.percentDone.oldValue == 0 && changes.percentDone.value < 100) {
                                record.actualStartDate = record.startDate
                            }
                            if (record.percentDone === 100) {
                                record.actualEndDate = record.endDate
                                record.actualStartDate = record.startDate
                            }
                        }

                    if (!!changes.actualEndDate && !!changes.actualEndDate.value) {
                        record.setEndDate(new Date())
                        record.percentDone = 100
                    }

                    if (!!changes.actualStartDate && !!changes.actualStartDate.value) {
                        record.setStartDate(new Date())
                    }
                }
            },
        },
    },

Post by alex.l »

Hi Ayurchenkoi,

I cannot check your code snippet, because I don't have actualStartDate field in TaskModel.
The code that Tasnim posted is working well to me. Try to put debugger and check if you actually entered into if statements.
Try to edit one of our examples to reproduce the issue and attach a runnable code here, if you cannot share your application code.

I tested in our advanced Gantt example with this code
https://bryntum.com/examples/gantt/advanced/


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

dependencyIdField : 'wbsCode',

project : {
    // Let the Project know we want to use our own Task model with custom fields / methods
    taskModelClass : Task,
    transport      : {
        load : {
            url : '../_datasets/launch-saas.json'
        }
    },
    // the code I added starts here 
    taskStore : {
        listeners : {
            change(event) {
                if (event.changes?.percentDone?.value) {
                    const record = event.records[0];
                    record.setStartDate(DateHelper.add(record.data.startDate, 5, 'day'));
                }
            }
        }

All the best,
Alex


Post Reply