Bryntum Support Forums

Posted: **Thu Mar 19, 2020 11:11 am**

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;
        });

Posted: **Thu Mar 19, 2020 2:47 pm**

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.

Posted: **Thu Mar 19, 2020 3:33 pm**

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

Posted: **Tue Mar 24, 2020 5:51 pm**

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

Bryntum Support Forums

[ANGULAR] Task dragable and resizable

[ANGULAR] Task dragable and resizable

Re: [ANGULAR] Task dragable and resizable

Re: [ANGULAR] Task dragable and resizable

Re: [ANGULAR] Task dragable and resizable