Hi,
it's possible to show context option on Gantt Dependencies similar to what we have on a task level ? Is there any option to turn it on ?
Example on task level
Best regards,
Jakub
Hi,
Please do the following to achieve it
First of all, you'd need to listen for the right click on dependency. For that you'd need to use https://bryntum.com/products/gantt/docs/api/Scheduler/feature/Dependencies#event-dependencyContextMenu
listeners : {
dependencyContextMenu() {}
}
And then, you'd need to create a menu https://bryntum.com/products/gantt/docs/api/Core/widget/Menu
One item edits the dependency and another item removes the dependency
https://bryntum.com/products/gantt/docs/api/Scheduler/feature/DependencyEdit#function-editDependency
https://bryntum.com/products/gantt/docs/api/Gantt/model/DependencyModel#function-remove
const menu = new Menu({
autoShow : false,
items : [
{
id : 'edit',
icon : 'b-icon b-icon-edit',
text : 'Edit Dependency'
},
{
id : 'remove',
icon : 'b-icon b-icon-trash',
text : 'Remove Dependency'
}
],
// Method is called for all ancestor levels
onItem(props) {
const { menu : { owner, dependencyRecord }, item } = props;
if (item.id === 'edit') {
owner.features.dependencyEdit.editDependency(dependencyRecord);
} else if (item.id === 'remove') {
dependencyRecord.remove();
}
}
});
Now, need to set the code for the listener
listeners : {
dependencyContextMenu({ event, dependency, source }) {
// prevent browser context menu
event.preventDefault();
// show the menu in the correct position
menu.showBy([props.event.clientX, props.event.clientY]);
// link the dependency record and gantt to the menu instace
// so that you can use it on menu item click
menu.dependencyRecord = dependency;
menu.owner = source;
}
},
With all those together it looks like this
import { Gantt, StringHelper, Menu } from '../../build/gantt.module.js?474608';
import shared from '../_shared/shared.module.js?474608';
const menu = new Menu({
// anchor : true,
autoShow : false,
items : [
{
id : 'edit',
icon : 'b-icon b-icon-edit',
text : 'Edit Dependency'
},
{
id : 'remove',
icon : 'b-icon b-icon-trash',
text : 'Remove Dependency'
}
],
// Method is called for all ancestor levels
onItem(props) {
const { menu : { owner, dependencyRecord }, item } = props;
if (item.id === 'edit') {
owner.features.dependencyEdit.editDependency(dependencyRecord);
} else if (item.id === 'remove') {
dependencyRecord.remove();
}
}
});
new Gantt({
appendTo : 'container',
dependencyIdField : 'sequenceNumber',
rowHeight : 45,
tickSize : 45,
barMargin : 8,
project : {
autoLoad : true,
transport : {
load : {
url : '../_datasets/launch-saas.json'
}
}
},
features : {
dependencyEdit : true
},
listeners : {
dependencyContextMenu({ event, dependency, source }) {
event.preventDefault();
menu.showBy([event.clientX, event.clientY]);
menu.dependencyRecord = dependency;
menu.owner = source;
}
},
columns : [
{ type : 'name', width : 250 }
],
// Custom task content, display task name on child tasks
taskRenderer({ taskRecord }) {
if (taskRecord.isLeaf && !taskRecord.isMilestone) {
return StringHelper.encodeHtml(taskRecord.name);
}
}
});
You can replace this demo's https://bryntum.com/products/gantt/examples/basic/ code with the above code
And you'll see this result
Hope it helps
Best regards,
Tasnim