Our state of the art Gantt chart


Post by hien.nguyen »

Hi team,

I'd like to remove block screen on sync and add more actions:

  • Before sync: change task color to grey.
  • After sync: back color to normal.

My purpose: sometime I need to change 50 small change but need to wait sync finish on each change. Now I'd like sync do in background and let me continue do my change.

Best regards.

Best regards.


Post by tasnim »

I'd like to remove block screen on sync...

I don't understand what you mean by the block screen, could you please show an image that you're referring to by block screen?

To listen before sync please check https://bryntum.com/docs/gantt/api/Gantt/model/ProjectModel#event-beforeSync
And to listen after sync please check https://bryntum.com/docs/gantt/api/Gantt/model/ProjectModel#event-sync


Post by hien.nguyen »

  • Block screen (please see in attachment): it show toast "Saving changes, please wait..." => we need to wait before do other actions.
  • Please share me the way to change color for task.
Attachments
1.png
1.png (26.32 KiB) Viewed 486 times

Best regards.


Post by alex.l »

Please check documentation here https://bryntum.com/docs/gantt/api/Gantt/view/Gantt#config-syncMask

A Mask config object, or a message to be shown when Crud Manager is persisting changes on the server. Set to null to disable default sync mask.

To change color for task please use https://bryntum.com/docs/gantt/api/Gantt/view/GanttBase#config-taskRenderer and/or https://bryntum.com/docs/gantt/api/Gantt/model/TaskModel#field-cls

All the best,
Alex


Post by hien.nguyen »

Thanks,

  • syncMask is OK (I can hide mask)
  • please share me the way to change color of selected task:
    • I edit "Task 1".
    • Click button "Save": I want to change color of Task 1 to grey (on beforeSync listener).
    • After sync complete: I want to change color of Task to normal (on sync listener).

Best regards.


Post by alex.l »

Not sure what are you asking about, I shared with you how it's possible to do.
This https://bryntum.com/docs/gantt/api/Gantt/view/GanttBase#config-taskRenderer
and this https://bryntum.com/docs/gantt/api/Gantt/model/TaskModel#field-cls

To apply gray, just use
record.cls = 'grayed-cls'

To remove
record.cls = 'regular-cls'

In this case, cls field shouldn't be persisted, https://bryntum.com/docs/gantt/api/Core/data/field/DataField#config-persist so it shouldn't trigger sync again when you change it.
I am not sure how it should be working in your scenario. It's very common that changing 1 task will affect to many tasks and recalculate its dates.

If you have problems with the solution, please share your app, we will try to find what's wrong.

All the best,
Alex


Post by hien.nguyen »

Thanks,

My need: I'd like to change selected task's color on listeners of Project Model

const project = new ProjectModel({
  autoLoad: true,
  autoSync: true,
  listeners : {
      beforeSync({ pack }) {
          //I want to change color of selected task to gray
      },
      sync({ response }) {
        //I want back color to normal 
      }
  }
  }
  })

Best regards.


Post by alex.l »

const project = new ProjectModel({
  autoLoad: true,
  autoSync: true,
  listeners : {
      beforeSync({ pack }) {
          const taskDom = gantt.getElementFromTaskRecord(gantt.selectedRecord);
          taskDom.classList.add('gray-color-cls');
      },
      sync({ response }) {
          const taskDom = gantt.getElementFromTaskRecord(gantt.selectedRecord);
          taskDom.classList.remove('gray-color-cls');
      }
  }
  }
  })

https://bryntum.com/docs/gantt/api/Gantt/view/mixin/GanttDom#function-getElementFromTaskRecord

All the best,
Alex


Post by hien.nguyen »

Sorry for my basic question on below:

I've error about

gantt is not defined

I can't init gantt because I use

const ganttConfig = {
    loadMask: null,
    syncMask: null,
    project,
    .....

Please share me sample code for import and init

gantt

Best regards.


Post by alex.l »

There are many options to manage that, it depends on your solution.
If you check our React examples, you will find many options for that.

As example it may be done in App.js


function App() {
    const ganttComponent = useRef();

useEffect(() => {
    const gantt = ganttComponent.current.instance;
    gantt.project.on('beforeSync', ({ pack }) = > {
        const taskDom = gantt.getElementFromTaskRecord(gantt.selectedRecord);
        taskDom.classList.add('gray-color-cls');
     });
     // ...
}, []);

All the best,
Alex


Post Reply