Our state of the art Gantt chart


Post by pawel.szwak »

Hi, I have a problem with dargable and resizable task, I need create function that after change value user must accept new value in modal component

All was correct before add functions to gantt, I have a problem with chcange value task(dates), after resizable or dragable task have before value

How is good practice create this function?
antt.on('beforetaskdrag', (task) => {
            if(task && task.taskRecord && task.taskRecord.startDate && task.taskRecord.endDate && task.taskRecord.type=='T' && task.taskRecord.state<=3) { 
                // console.log("beforetaskdrag startDate",task.taskRecord.startDate);
                // console.log("beforetaskdrag endDate",task.taskRecord.endDate);
                //this.taskEditingGantt = task;
                //this.operationDatesUpdateBefore = {};
                //this.operationDatesUpdateBefore.id = task.taskRecord.id;
                //this.operationDatesUpdateBefore.name = task.taskRecord.name;
                //this.operationDatesUpdateBefore.startDate = task.taskRecord.startDate;
                //this.operationDatesUpdateBefore.endDate = task.taskRecord.endDate;
            }
            return true;
        });
        gantt.on('afterTaskDrop', (task) => {
            if(task && task.context && task.context.record && task.context.record.type=='T' && task.context.record.state<=3) { 
                // console.log("afterTaskDrop startDate",task.context.record.startDate);
                // console.log("afterTaskDrop endDate",task.context.record.endDate);
                //this.operationDatesUpdateAfter = {};
                //this.operationDatesUpdateAfter.id = task.context.record.id;
                //this.operationDatesUpdateAfter.name = task.context.record.name;
                //this.operationDatesUpdateAfter.startDate = task.context.record.startDate;
                //this.operationDatesUpdateAfter.endDate = task.context.record.endDate;
                //this.openModalOperationDates();
            }
            return true;
        });
        gantt.on('taskResizeStart', (task) => {
            if(task && task.taskRecord && task.taskRecord.startDate && task.taskRecord.endDate && task.taskRecord.type=='T' && task.taskRecord.state<=3) { 
                //this.taskEditingGantt = task;
                //this.operationDatesUpdateBefore = {};
                //this.operationDatesUpdateBefore.id = task.taskRecord.id;
                //this.operationDatesUpdateBefore.name = task.taskRecord.name;
                //this.operationDatesUpdateBefore.startDate = task.taskRecord.startDate;
                //this.operationDatesUpdateBefore.endDate = task.taskRecord.endDate;
            }
            return true;
        });
        gantt.on('beforetaskresizefinalize', ({context}) => {
            context.async = true;
            setTimeout(() => {
                context.finalize(true);
                return true;
            }, 200);
            return true;
        });
        gantt.on('taskResizeEnd', (task) => {
            console.log("taskstop",task);
            if(task && task.taskRecord && task.taskRecord && task.taskRecord.type=='T' && task.taskRecord.state<=3) { 
                //this.operationDatesUpdateAfter = {};
                //this.operationDatesUpdateAfter.id = task.taskRecord.id;
                //this.operationDatesUpdateAfter.name = task.taskRecord.name;
                //this.operationDatesUpdateAfter.startDate = task.taskRecord.startDate;
                //this.operationDatesUpdateAfter.endDate = task.taskRecord.endDate;
                //this.openModalOperationDates();
            }
            return true;
        });

Post by mats »

Sorry it's a bit hard to understand your application requirements + code.
I have a problem with chcange value task(dates), after resizable or dragable task have before value
Please try to explain a bit better what you are trying to implement, and what is the problem.

Post by pawel.szwak »

I have a problem with the task duration extension. After the task is extended, the start and end dates of the task remain unchanged. The duration of the task is not changed, the task returns to its previous state in the gantt view.

Everything worked fine before adding event listeners: taskResizeStart, taskResizeEnd
Attachments
g2.PNG
g2.PNG (1.04 KiB) Viewed 1337 times
g1.PNG
g1.PNG (7.34 KiB) Viewed 1337 times

Post by pmiklashevich »

Hello,

You can easily achieve this by adding beforetaskdropfinalize listener and beforetaskresizefinalize listener.

You can add the following code to Gantt Basic demo to see how it works:
Gantt/examples/basic/app.js
import MessageDialog from '../../lib/Core/widget/MessageDialog.js';
.....
new Gantt({
    listeners : {
        beforetaskdropfinalize : async ({ context }) => {
            context.async = true;

            const
                namesInQuotes = context.draggedRecords.map(taskRecord => `"${taskRecord.name}"`),
                result        = await MessageDialog.confirm({
                    title   : 'Please confirm',
                    message : `${namesInQuotes.join(', ')} ${namesInQuotes.length > 1 ? 'were' : 'was'} moved. Allow this operation?`
                });

            // `true` to accept the changes or `false` to reject them
            context.finalize(result === MessageDialog.yesButton);
        },

        beforetaskresizefinalize : async ({ context }) => {
            context.async = true;

            const
                taskRecord = context.taskRecord,
                result     = await MessageDialog.confirm({
                    title   : 'Please confirm',
                    message : `"${taskRecord.name}" duration changed. Allow this operation?`
                });

            // `true` to accept the changes or `false` to reject them
            context.finalize(result === MessageDialog.yesButton);
        }
    },
Or the same code with Promises:
new Gantt({
    listeners : {
        beforetaskdropfinalize : ({ context }) => {
            context.async = true;

            const namesInQuotes = context.draggedRecords.map(taskRecord => `"${taskRecord.name}"`);

            MessageDialog.confirm({
                title   : 'Please confirm',
                message : `${namesInQuotes.join(', ')} ${namesInQuotes.length > 1 ? 'were' : 'was'} moved. Allow this operation?`
            }).then((result) => {
                // `true` to accept the changes or `false` to reject them
                context.finalize(result === MessageDialog.yesButton);
            });
        },

        beforetaskresizefinalize : ({ context }) => {
            context.async = true;

            const taskRecord = context.taskRecord;

            MessageDialog.confirm({
                title   : 'Please confirm',
                message : `"${taskRecord.name}" duration changed. Allow this operation?`
            }).then((result) => {
                // `true` to accept the changes or `false` to reject them
                context.finalize(result === MessageDialog.yesButton);
            });
        }
    },
You can check out our Scheduler Validation demo for inspiration. It uses "event" word instead of "task" but the concept is absolutely the same.

Cheers,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post Reply