Our state of the art Gantt chart

Post by jeanbaptiste.minani »

Hello Support Team.

I was wondering if the Bryntum Gantt can support a way of listing tasks but starting from the project name, where project name will be on top (and not editable) and then other tasks will be placed under that project, in the same way/order we see on parent tasks and sub-tasks.

Any help/hint it will be helpful.

Post by mats »

Can you please show a mockup / screenshot of how it should look?

Tired of debugging javascript errors in web applications? Try our powerful error logging service RootCause

Post by jeanbaptiste.minani »

Want to have:

  1. Project name and to be read-only
  2. Create button tot add new task as a sub-task of Project name
  3. No task is allowed to be at level 1 (level of Project name). all task must be under it.

I've attached the sample UI of bruyntum gantt, about the way we want it to be.

Screen Shot 2021-06-18 at 11.29.06.png
Screen Shot 2021-06-18 at 11.29.06.png (173.83 KiB) Viewed 80 times

Post by saki »

Technically, there is no internal logic that would prevent store(s) to be read/write and multilevel tree. However, you can remove the UI elements that allow user to create an undesirable structure. For that:

  1. You can implement a code that would prevent editing the first task. You can name it according to our needs, e.g. it can be "Project Name" but it must be present. It is the first task in the taskStore
  2. Yes, the button handler would add a child of the first node.
  3. No way to prevent it on data-level but you can prevent user from doing it.

Here is the sample code you can start with:

new Gantt({
    // other config options ...
    listeners : {
        beforeCellEditStart({ editorContext }) {
            return Boolean(editorContext.record.parentId);
    tbar : {
        items : [{
            type : 'button',
            text : 'Add Task',

            onAction() {
                    name : 'New Task'
    features : {
        taskMenu : {
            processItems({ items, taskRecord }) {
                const readOnly = !taskRecord.parentId;
                items.add.menu.addTaskAbove.hidden =
                    items.add.menu.addTaskBelow.hidden =
                    items.editTask.hidden =
                    items.deleteTask.hidden =
                items.add.menu.subtask.hidden = !readOnly;

Post by jeanbaptiste.minani »

Thank you @saki,

It works, one thing I want is to disable dropping tasks on level 1.

Post by saki »

Try this:

    features : {
        rowReorder : {
            listeners : {
                gridRowBeforeDropFinalize({ context }) {
                    return Boolean(context.insertBefore.parentId);

Post Reply