[REACT] Show context option on Gantt Dependencies

[jakub.murawski]

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 ?

2024-02-29_11h49_33.png (22.48 KiB) Viewed 117 times

Example on task level

2024-02-29_11h51_29.png (41.41 KiB) Viewed 117 times

Best regards,
Jakub

[tasnim]

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

msedge_ylA78liLCa.gif (1.02 MiB) Viewed 108 times

Hope it helps

Best regards,
Tasnim

[jakub.murawski]

Hi Tasnim,
thank you for showing it to me I will try to implement it.