Hi,
How to display custom task menu when I right click a particular date icon?
For example, if column is StartDate and record is Leaf, display the following task menu items only.
Task Menu 1
Task Menu 2
All other menus should be hidden.
Thanks
Hi,
You could check this guide for this https://bryntum.com/products/gantt/docs/guide/Gantt/customization/replacecontextmenu
We also have a demo of the custom task menu here https://bryntum.com/products/gantt/examples/custom-taskmenu/
Hope this will help
Hi,
The $ jquery code does not work in React Typescript. Is there any other way?
taskMenuBeforeShow({ taskRecord, event }) {
// Hide all visible context menus
$('.dropdown-menu:visible').hide();
// Set data, set position, and show custom task menu
$('#customTaskMenu').data({
taskId : taskRecord.id
}).css({
top : event.y,
left : event.x
}).show();
// Prevent built in task menu
return false;
}Hey,
We recommend using JQuery for that purpose, but you could try a workaround with Vanilla JS like this
taskMenuBeforeShow({ taskRecord, event }) {
const menu = document.querySelector('.dropdown-menu');
menu.dataset.taskId = taskRecord.id;
menu.style.top = event.y;
menu.style.left = event.x;
menu.style.display = 'block';
// Prevent built in task menu
return false;
}Hi,
I tried the following but the custom task menu is not displaying. When I tried to console.log($(customMenuHtml).html()), the div content is displayed.
taskMenuBeforeShow({ taskRecord, event }: { taskRecord: any; event: any }) {
$('.dropdown-menu:visible').hide();
const customMenuHtml = $(`<div id='customTaskMenu' class='dropdown-menu'>
<button class='dropdown-item' type='button' data-ref='move'>1 day ahead</button>
<button class='dropdown-item' type='button' data-ref='edit'>Edit</button>
<button class='dropdown-item' type='button' data-ref='remove'>Remove</button>
</div>`);
$(customMenuHtml)
.data({
taskId: taskRecord.id,
})
.css({
top: event.y,
left: event.x,
})
.show();
return false;
},Hi,
This is the workaround I made to create a custom menus. This will work for now since I only need to display two custom menus. But If the menus are dynamic, is there a way to add multiple custom menu object to items object without overriding the existing menus?
processItems({ items, taskRecord }: { items: any; taskRecord: any }) {
if (taskRecord.rowType == RowTypes.Gate) {
items.editTask = false;
items.deleteTask = false;
items.copy = false;
items.cut = false;
items.paste = false;
items.add = false;
items.indent = false;
items.outdent = false;
items.unlinkTasks = false;
items.linkTasks = false;
items.add = {
text: 'Custom Menu 1',
weight: 90,
onItem: ({ taskRecord }: { taskRecord: any }) => {
console.log('custom menu 1 click');
},
};
items.copy = {
text: 'Custom Menu 2',
weight: 90,
onItem: ({ taskRecord }: { taskRecord: any }) => {
console.log('custom menu 2 click');
},
};
}
},But If the menus are dynamic, is there a way to add multiple custom menu object to items object without overriding the existing menus?
Not sure I got the question. When you add custom items, you can use new names for items and do not override default ones.
You can disable all default item which you not required in using initial config of the feature, see https://bryntum.com/products/gantt/docs/guide/Gantt/customization/contextmenu#customizing-the-menu-items
Later, on processItems, as you already did, you could add all items you want into menu or hide/show required items depends on some condition.
I tried adding custom name to items and it worked. Now I can add multiple custom menus while all the default are hidden.
processItems({ items, taskRecord }: { items: any; taskRecord: any }) {
items.editTask = false;
items.deleteTask = false;
items.copy = false;
items.cut = false;
items.paste = false;
items.add = false;
items.indent = false;
items.outdent = false;
items.unlinkTasks = false;
items.linkTasks = false;
items.custom1 = {
text: 'Custom Menu 1',
weight: 90,
onItem: ({ taskRecord }: { taskRecord: any }) => {
console.log('custom menu 1 click');
},
};
items.custom2 = {
text: 'Custom Menu 2',
weight: 90,
onItem: ({ taskRecord }: { taskRecord: any }) => {
console.log('custom menu 2 click');
},
};
items.custom3 = {
text: 'Custom Menu 3',
weight: 90,
onItem: ({ taskRecord }: { taskRecord: any }) => {
console.log('custom menu 3 click');
},
};
},Glad to hear! So you unblocked now?
yes. thanks