[REACT] Gantt Add Task Below using a button click

[sprabhu]

Hi,
I am trying to include the 'Add Below' functionality on a button click. Currently my code creates a task as a child of the selected task. Can you help me on below requirement .

-->When a button is click, it will create a task just below the selected cell as a sibling of the selected row.

Current code which creates as a child:-->

 {
                            ref      : 'addTaskButton',
                            icon     : 'b-fa b-fa-plus',
                            text     : 'Add',
                            tooltip  : 'Add new task', 
                            onClick: 'up.onInsertTaskClick'    

                        }

onInsertTaskClick(params) {        

        const gantt = params.source.up('gantt');
        const records = gantt.selectedRecords;
        if (records.length > 0) {
            gantt.selectedRecord.insertChild({  expanded: true, task_number:  '', duration : 1 }, gantt.selectedRecord.previousSibling);
            gantt.project.propagate();
        } else {
            Toast.show('Please select a row');
        }
    }
    

[tasnim]

Hi,

You could use https://bryntum.com/products/gantt/docs/api/Gantt/view/GanttBase#function-addTaskBelow method to achieve this

    tbar : [
        {
            type : 'button',
            text : 'add below',
            onClick : 'up.onAddBelow'
        }
    ],
    onAddBelow({ source }) {
        const gantt = source.parent.parent;
        if (gantt.selectedRecords.length > 0) {
            gantt.addTaskBelow(gantt.selectedRecords[0]);
        }
    }

[sprabhu]

Hi Tasnim,
Thanks for the reply. But the revised code is still not working.
gantt.selectedRecords.length. --> was giving error so I had to change it to gantt.up('gantt').selectedRecords.length
But then gantt.addTaskBelow is giving error : gantt.addTaskBelow is not a function
Below is the update code (We are using Gantt ver # 5.3.4)

onAddBelow({ source }) {
        const gantt = source.parent.parent;
        if (gantt.up('gantt').selectedRecords.length > 0) {
            gantt.addTaskBelow(gantt.up('gantt').selectedRecords[0]);
        }
    }

[tasnim]

Hi,

It worked on my side. gantt.up('gantt') is also correct.
maybe it's because of the version.

Is it working now?

[sprabhu]

No, the line

 gantt.addTaskBelow(gantt.up('gantt').selectedRecords[0]); 

gives an error in console gantt.addTaskBelow is not a function

[tasnim]

Please try using like this

onClick({ source }) {
    const gantt = source.up('gantt');
    if (gantt.selectedRecords.length > 0) {
        gantt.addTaskBelow(gantt.selectedRecords[0]);
    }
}

It should help. If it doesn't help, Could you please upload a sample test case where we could reproduce the issue and debug it?

[sprabhu]

Hi Tasnim,
Now its working. Seems the issue with initializing the gantt. With your new code its working as expected.
Thanks for your help.

[sprabhu]

Hi Tasnim,
Can we default some value to the newly inserted row, e.g. can we default duration to 1 after executing the gantt.addTaskBelow(gantt.selectedRecords[0])

[tasnim]

Hi,

Yes, sure. You could do it at the https://bryntum.com/products/gantt/docs/api/Gantt/view/GanttBase#config-newTaskDefaults

newTaskDefaults : { duration : 10 },

[sprabhu]

Thanks for the quick reply. The above code works as expected but when i try to default the name as null, its not working.
Currently when we add a row the Name is defaulted as New task 2, New task 3.. and so on.