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.
Re: How to customise columnToolbars bottomItems
Posted: Mon Feb 27, 2023 9:30 am
by tasnim
Yes. Sure,
Please see the example of how you can achieve it
This is the output
PowerToys_bXFSRHvoLC.gif (579.02 KiB) Viewed 605 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 let us know if you have any other questions.
Re: How to customise columnToolbars bottomItems
Posted: Mon Feb 27, 2023 11:15 am
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.
Re: How to customise columnToolbars bottomItems
Posted: Mon Feb 27, 2023 1:27 pm
by tasnim
Here is an example of how you could add a resource
Output
chrome_NILw9rkbdl.gif (667.66 KiB) Viewed 600 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.