Bryntum Support Forums

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

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

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

Hi,

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

Is it working now?

No, the line

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

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

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?

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

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])

Hi,

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

newTaskDefaults : { duration : 10 },

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.