Our flexible Kanban board for managing tasks with drag drop


Post by rodel.ocfemia »

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


Post by mats »

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


Post by rodel.ocfemia »

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


Post by mats »

You should call it on the feature

taskBoard.features.taskMenu.showMenuFor

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


Post by mats »

Ok so all good now?


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


Post by tasnim »

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


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

Post by tasnim »

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


Post Reply