Alternatively, we can just change the default icon (horizontal 3 dots) to vertical 3 dots. Is it possible?
Thanks
Re: Activate taskMenu onClick on template headerItem
Posted: Sat Sep 24, 2022 7:56 pm
by mats
You should call it on the feature
taskBoard.features.taskMenu.showMenuFor
Re: Activate taskMenu onClick on template headerItem
Posted: Sun Sep 25, 2022 8:59 am
by rodel.ocfemia
Hi mats,
Your latest code worked. However, the custom menu is displaying at the center of the card when I click (left click) on the custom Icon found on the upper right of the card. Right click is working, I can right click anywhere in the card and the default menu is showing just beside the mouse pointer.
Update: I tried to remove the body items (made them hidden) and just left the custom header visible (header text and custom icon). When I clicked on the custom I con, the custom menu is working as expected.
Re: Activate taskMenu onClick on template headerItem
Posted: Sun Sep 25, 2022 10:03 am
by mats
Ok so all good now?
Re: Activate taskMenu onClick on template headerItem
Posted: Mon Sep 26, 2022 6:12 am
by rodel.ocfemia
Hi mats,
When all of the items in the card are displayed then I clicked on the custom icon at the upper right, the Task Menu is displayed at the center of the card which not correct. It should pop out just beside the mouse pointer.
Re: Activate taskMenu onClick on template headerItem
Posted: Mon Sep 26, 2022 8:59 am
by tasnim
Could you please share a runnable test case where we can reproduce and debug the issue?
Re: Activate taskMenu onClick on template headerItem
Posted: Mon Sep 26, 2022 2:09 pm
by rodel.ocfemia
Hi Tasnim,
I have modifed the basic standalone project I downloaded. It's located in <Download folder>\taskboard-5.1.1-trial\examples\basic
So if you can run this project locally, then just replace the whole app.umd.js code with the following, you will be able to reproduce our issue.
'use strict';
var {
TaskBoard
} = bryntum.taskboard;
var taskBoard = new TaskBoard({
appendTo : 'container',
// Url for resource avatar images
resourceImagePath : '../_shared/images/users/',
// Experimental, transition moving cards using the editor
useDomTransition : true,
// Columns to display
columns : [{
id : 'todo',
text : 'Todo',
color : 'orange'
}, {
id : 'doing',
text : 'Doing',
color : 'blue',
tooltip : 'Items that are currently in progress'
}, {
id : 'done',
text : 'Done'
}],
// Field used to pair a task to a column
columnField : 'status',
// Project using inline data
headerItems: {
text: {
type: 'template',
template: ({ taskRecord }) => `<table style="width:100%;">
<tr>
<td style="width:95%;">Sample Header</td>
<td style="width:5%;"><div id="customIcon" style="border:1px solid red;">custom icon here</div></td>
</tr>
</table>`,
style: { width: '100%' }
}
},
features: {
taskMenu: {
items: {
// Add a custom menu item with a color picker sub menu
Test: {
text: 'Test Menu',
// Apply picked color to the task
onItem({ item, taskRecord }) {
console.log('Test Menu clicked - onItem')
console.log(taskRecord.title)
}
},
},
// Function called before showing the menu, allows modifying the items
processItems({ taskRecord, columnRecord, items }) {
console.log('processItems on taskMenu')
}
},
},
bodyItems: {
field1: { type: 'template', template: ({ taskRecord }) => `<div><b>${taskRecord.field1}</b></div>` },
field2: { type: 'template', template: ({ taskRecord }) => `<div><b>${taskRecord.field2}</b></div>` },
field3: { type: 'template', template: ({ taskRecord }) => `<div><b>${taskRecord.field3}</b></div>` },
field4: { type: 'template', template: ({ taskRecord }) => `<div><b>${taskRecord.field4}</b></div>` },
field5: { type: 'template', template: ({ taskRecord }) => `<div><b>${taskRecord.field5}</b></div>` }
},
project : {
tasks : [{
id : 1,
name : 'Book flight',
status : 'done',
prio : 'medium',
field1 : 'field1',
field2 : 'field2',
field3 : 'field3',
field4 : 'field4',
field5 : 'field5',
}, {
id : 2,
name : 'Book hotel',
status : 'done',
prio : 'medium',
field1 : 'field1',
field2 : 'field2',
field3 : 'field3',
field4 : 'field4',
field5 : 'field5',
}, {
id : 3,
name : 'Pack bags',
status : 'doing',
prio : 'low',
field1 : 'field1',
field2 : 'field2',
field3 : 'field3',
field4 : 'field4',
field5 : 'field5',
}]
}
});
taskBoard.on({
taskClick({ taskRecord, event }) {
if (event.target.id=='customIcon') {
console.log('more menu clicked')
taskBoard.features.taskMenu.showMenuFor(taskRecord)
}
}
});
Re: Activate taskMenu onClick on template headerItem