Premium support for our pure JavaScript UI components


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

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

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


Post by tasnim »

Hi,

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

Is it working now?


Post by sprabhu »

No, the line

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

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


Post by 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?


Post by 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.


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


Post by 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 },

Post by 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.


Post Reply