Our flexible Kanban board for managing tasks with drag drop


Post by suhas.kachare »

Hi Team,

I am implementing a Bryntum Taskboard in react and want to customise columnToolbars bottomItems .

In place of + icon to add any task I want to show a Inputbox which takes a Task name , Assignee name , Duration etc as its value and on submitting it should add a task in respective column.

Please find below attached video for your reference.

Attachments
Screen Recording 2023-02-27 at 11.36.14 AM.mov
(12.94 MiB) Downloaded 36 times

Post by tasnim »

Yes. Sure,

Please see the example of how you can achieve it

This is the output

PowerToys_bXFSRHvoLC.gif
PowerToys_bXFSRHvoLC.gif (579.02 KiB) Viewed 433 times

And This is the code I used to implement this

    features : {
        columnToolbars : {
            bottomItems : {
                addTask : null,
                input : {
                    type : 'textfield',
                    placeholder : 'Task Name ...',
                    onAction : (event) => {
                        const { source : { columnRecord, parent : { parent : taskBoard } }, value } = event;
                        const textField = event.source;
                        if (value.trim() === '') return;
                        taskBoard.addTask(columnRecord, null, { name : value });
                        textField.value = '';
                    }
                }
            }
        }
    }

Please also check these docs links
https://bryntum.com/products/taskboard/docs/api/TaskBoard/feature/ColumnToolbars
https://bryntum.com/products/taskboard/docs/api/TaskBoard/feature/ColumnToolbars#config-bottomItems
https://bryntum.com/products/taskboard/docs/api/TaskBoard/view/mixin/TaskBoardStores#function-addTask
https://bryntum.com/products/taskboard/docs/api/Core/widget/TextField

Please let us know if you have any other questions.


Post by suhas.kachare »

From above code I'm only able add a task and not able to assign any resource . So How can I assign a resource to a newly created task from InputBox itself.

Please refer the same video I attached for your reference.


Post by tasnim »

Here is an example of how you could add a resource

Output

chrome_NILw9rkbdl.gif
chrome_NILw9rkbdl.gif (667.66 KiB) Viewed 428 times

And here is the code

    features : {
        columnToolbars : {
            bottomItems : {
                addTask : null,
                input : {
                    type : 'textfield',
                    style : 'flex: 1;',
                    placeholder : 'Name | Resources',
                    onAction : (event) => {
                        // spliting the values to get name and resource
                        const values = event.value.split('|');
                        const { source : { columnRecord, parent : { parent : taskBoard } }, value } = event;
                        const textField = event.source;
                        if (value.trim() === '') return;
                        const resource = values[1].trim().toLowerCase();
                        const res = taskBoard.project.resourceStore.find(item => item.name.toLowerCase() === resource);
                        if (Boolean(res)) {
                            taskBoard.addTask(columnRecord, null, { name : values[0], resourceId : res.id });
                            textField.value = '';
                        }
                    }
                },
            }
        }
    }

If you want to add some other fields you could do it like the resource I added.

Hope this helped :)


Post Reply