[REACT] Phantom update start date
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?
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?
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;
}
},
},
},
},
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()
}
}
},
},
},
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?
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
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
i tried the example provided above but for some reason setStartDate doesn't work. Record changes, but after nothing changes in gantt ui.
Could you please attach a runnable test case here?
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())
}
}
},
},
},
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'));
}
}
}