About progress editable

Gantt
#1

i want to make a gantt which has three mode,1.view 2.edit 3.only progress input.
i have already learned from demo how to switch 1 or 2 mode.
now i want to achieve in 3mode like operator can only drag the progress triangle in task bar and input the progress value in lightbox,and can’t do anyting more。what can i do?

#2

Hello,

Unfortunately, there is no ready-made solution, but I can suggest the following:

Utilizing the onBeforeTaskDrag handler, allow only dragging of the progress slider:

gantt.attachEvent('onBeforeTaskDrag', (id, mode, e) => {
    if (mode != 'progress') {
        return false;
    }

    return true;
});

Using the onLightbox handler, disable all inputs and selectors except the progress input:

gantt.attachEvent('onLightbox', function (task_id) {
    const descriptionNode = gantt.getLightboxSection('description').node;
    const textarea = descriptionNode.querySelector('textarea');
    textarea.disabled = true;

    const timeNode = gantt.getLightboxSection('time').node;
    const selectsAndInputs = timeNode.querySelectorAll('select, input');

    selectsAndInputs.forEach(element => {
        element.disabled = true;
    });

    const progressEditorNode = gantt.getLightboxSection('progressEditor').node.childNodes[1];
    progressEditorNode.value = Math.round(progressEditorNode.value * 100);
});

Cancel task deletion by returning false in the onLightboxDelete handler:

gantt.attachEvent('onLightboxDelete', (id) => {
    return false;
})

I used the following sections in the lightbox:

gantt.form_blocks['progressEditor'] = {
    render: function (sns) {
        return `<div class="progress-container" style='height:60px;'>Progress:&nbsp;<input type='number'></div>`;
    },
    set_value: function (node, value, task) {
        node.childNodes[1].value = value || '';
    },
    get_value: function (node, task) {
        return node.childNodes[1].value;
    },
    focus: function (node) {
        const a = node.childNodes[1];
        a.select();
        a.focus();
    }
};

gantt.locale.labels.section_progressEditor = "Progress";

gantt.config.lightbox.sections = [
    { name: 'description', height: 38, map_to: 'text', type: 'textarea', focus: true },
    { name: 'progressEditor', height: 16, type: 'progressEditor', map_to: 'progress' },
    { name: 'time', type: 'duration', map_to: 'auto' }
];

Here is an example: DHTMLX Snippet Tool . Please note that this is not a complete example, but based on it, you can modify it to suit your needs.

#3

Thanks,I’ll try that