How to limit adding tasks

Gantt React Gantt
#1

Is there a way to limit the creation of new tasks? From what I can see, the options currently are to use readonly mode where no tasks can be created or no restrictions, meaning you can create a subtask for any task or subtask. I’d like to be able to set a “maximum depth”, e.g., a depth of “2” would allow tasks and sub-tasks but not sub-sub-tasks. Alternately, being able to set a flag on a task for whether it can have sub-tasks would also be workable.

I’m also looking for a way to disable links and linking without going full readonly mode. For both of these cases, I’m not seeing anything in the documentation, but it’s certainly possible that I’m just missing something.

Thanks,

  • Dave
#2

Hello,
To be able to create only tasks and subtasks, you can show the “Add” button only for the first and second levels. This can be done by configuring gantt.config.columns:

gantt.config.columns = [
    { name: "text",       label: "Task name",  width: "*", tree: true },
    { name: "start_date", label: "Start time", align: "center" },
    { name: "duration",   label: "Duration",   align: "center" },
    {
        name: "add_custom",
        label: "<div class='gantt_add'></div>",
        width: 44,
        template: task => {
            if (task.$level > 0) return "";
            return "<div class='gantt_add'></div>"
        }
    }
];

You can disable link creation with gantt.config.drag_links = false.
To disable displaying links use gantt.config.show_links = false.

Here is an example in the snippet: https://snippet.dhtmlx.com/7c5qrhmo.

And here’s demo of JS dhtmlxGantt in a React app: https://files.dhtmlx.com/30d/058c256e9b2ab4967c2608f027030d78/gantt-react+limited_task_levels+disabled_links.zip.

If the question is about “DHTMLX React JS Gantt chart”, unfortunately there is no solution for your queries at the moment.

#3

The question is about the React JS Gantt chart, correct. I was able to work around this issue by not using the built-in add-task column and creating an add-task-custom column with a custom template containing an onClick event for tasks that are allowed to have sub-tasks, which I feel is a reasonable solution.

For disabling link creation and display, I added some custom CSS classes:

    .gantt-disable-links *[class^='Links-module_links__'] {
        display: none !important;
    }

    .gantt-disable-links *[class^='Bars-module_link__'] {
        display: none !important;
    }

This is more of a hack, but it does work.

Are there any plans to bring more parity between the JS dhtmlxGantt library and the React JS Gantt component? The plain JS library seems to have significantly more customization that would be welcome in the Gantt implementation.

1 Like
#4

Hi,
Yes, we are planning to extend the “DHTMLX React JS Gantt chart” functionality. We already have few features which are ready but not released yet (dynamic scaled zooming, split tasks, project based task recalculations). Others are still in the pipeline (critical path, resources).
Currently we are preparing a launch of separate site for our React products, so we are not releasing updates yet. All of the above features will be available in next two months.