Bryntum Support Forums

Posted: **Fri Sep 23, 2022 5:16 pm**

Hi,
I have a template header that displays custom text and custom icon. Can I activate the taskMenu on click of the icon found on the template header?

Sample code

headerItems: {
            text: {
               type: 'template',
               template: ({ taskRecord }) => `<div class="${taskRecord.customIcon}"></div>`
               style: { width: '100%' }
            }
         },

features : {
        taskMenu : {
            items : {
                flagTask : {
                    text : 'Flag task',
                    icon : 'b-fa-fw b-fa-flag',
                    onItem({ taskRecord }) {
                        console.log('taskMenu clicked')
                    }
                }
            }
        }
    }

instance._taskBoard.on({
	taskClick({ taskRecord, event }) {
		if ($(event.target).hasClass('customIcon1')) {
			//activate taskMenu
		}
	})
});

Thanks

Posted: **Fri Sep 23, 2022 5:33 pm**

We have a private method on the TaskMenu feature showMenuFor(taskRecord) which we likely will make public. Try if that works for you?

Posted: **Sat Sep 24, 2022 2:21 am**

Hi mats,
I tried this code then I got error showMenuFor is undefined.

_taskBoard.on({
	taskClick({ taskRecord, event }) {
		if ($(event.target).hasClass('customIcon')) {
		   //need to activate taskMenu here
                   showMenuFor(taskRecord)
		}
	}
})

Here's the sample code.

_taskBoard = new bryntum.taskboard.TaskBoard({
       

headerItems: {
	text: {
	   type: 'template',
	   template: ({ taskRecord }) => `<div class="${taskRecord.customIcon}"></div>`
	   style: { width: '100%' }
	},
	menu: { type: 'taskMenu' }
},

features: {
	taskMenu: {
	   items: {
		  Test: {
			 text: 'Test Menu',
			 onItem({ item, taskRecord }) {
				console.log('onItem')
			 }
		  },
	   },
	   processItems({ taskRecord, columnRecord, items }) {
		  console.log('processItems on taskMenu')
	   }
	},
},
})

_taskBoard.on({
	taskClick({ taskRecord, event }) {
		if ($(event.target).hasClass('customIcon')) {
		   //need to activate taskMenu here
                   showMenuFor(taskRecord)
		}
	}
})

Alternatively, we can just change the default icon (horizontal 3 dots) to vertical 3 dots. Is it possible?

Thanks

Posted: **Sat Sep 24, 2022 7:56 pm**

You should call it on the feature

taskBoard.features.taskMenu.showMenuFor

Posted: **Sun Sep 25, 2022 8:59 am**

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.

Posted: **Sun Sep 25, 2022 10:03 am**

Ok so all good now?

Posted: **Mon Sep 26, 2022 6:12 am**

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.

Posted: **Mon Sep 26, 2022 8:59 am**

Could you please share a runnable test case where we can reproduce and debug the issue?

Posted: **Mon Sep 26, 2022 2:09 pm**

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

Posted: **Mon Sep 26, 2022 3:40 pm**

Hi,
This is not taking the selector to where it should show. I've created an FR for that https://github.com/bryntum/support/issues/5320

Good Luck ,
Tasnim

Bryntum Support Forums

Activate taskMenu onClick on template headerItem

Activate taskMenu onClick on template headerItem

Re: Activate taskMenu onClick on template headerItem

Re: Activate taskMenu onClick on template headerItem

Re: Activate taskMenu onClick on template headerItem

Re: Activate taskMenu onClick on template headerItem

Re: Activate taskMenu onClick on template headerItem

Re: Activate taskMenu onClick on template headerItem

Re: Activate taskMenu onClick on template headerItem

Re: Activate taskMenu onClick on template headerItem

Re: Activate taskMenu onClick on template headerItem