[Gantt] - Changing the way in which dependencies get mapped

Gantt
#1

Hello team,
By default for predecessors the gantt uses wbs field for the mapping purpose
Reference Doc
image
I want to have this based on the row index and not wbs, is it possible, thanks in advance

#2

Hello,

This can be achieved in the following way:
First, let’s add row numbers for tasks:

let taskNumbers = null;

function calculateAll() {
    taskNumbers = {};
    let index = 1;

    gantt.eachTask(function (task) {
        taskNumbers[task.id] = index;
        index++;
    });
}

function resetCache() {
    taskNumbers = null;

    return true;
}

gantt.attachEvent('onTaskCreated', resetCache);
gantt.attachEvent('onAfterTaskMove', resetCache);
gantt.attachEvent('onBeforeParse', resetCache);
gantt.attachEvent('onAfterTaskDelete', resetCache);
gantt.attachEvent('onAfterTaskAdd', resetCache);
gantt.attachEvent('onAfterSort', resetCache);
gantt.attachEvent('onAfterTaskUpdate', resetCache);
gantt.attachEvent('onLightboxSave', resetCache);

Then add a column in the grid for the predecessors:

gantt.config.columns = [
    { name: 'RowNum', label: 'Row #', width: 50, min_width: 50, align: 'center', resize: true, template: gantt.getTaskNumber },
    { name: 'text', label: 'Name', tree: true, width: 150, resize: true },
    { name: 'duration', label: 'Duration', width: 40, align: 'center', resize: true },
    { name: 'start_date', label: 'Start', width: 80, align: 'center', resize: true },
    {
        name: 'predecessors', label: 'Predecessors', width: 90, align: 'left', resize: true, editor: editors.predecessors, template: function (task) {
            const links = task.$target;
            const labels = [];

            for (let i = 0; i < links.length; i++) {
                const link = gantt.getLink(links[i]);
                labels.push(linksByIndexFormatter.format(link));
            }

            return labels.join(', ')
        }
    },
    { name: 'add' }
];

You can set the predecessor using the inline editor:

gantt.getTaskNumber = function (task) {
    if (!taskNumbers) {
        calculateAll()
    }

    task.RowNum = taskNumbers[task.id];

    return taskNumbers[task.id];
};

gantt.getTaskByNumber = function (number) {
    for (let i in taskNumbers) {
        if (taskNumbers[i] == number) {
            return i;
        }
    }

    return null;
};

const linksByIndexFormatter = {
    format: function (link) {
        return gantt.getTaskNumber(gantt.getTask(link.source));
    },
    parse: function (formattedValue) {
        return {
            id: undefined,
            source: gantt.getTaskByNumber(String(formattedValue).trim()),
            target: null,
            type: gantt.config.links.finish_to_start,
            lag: 0
        };
    }
};

const editors = {
    predecessors: { type: 'predecessor', map_to: 'auto', formatter: linksByIndexFormatter },
};

Please see an example: DHTMLX Snippet Tool