Our state of the art Gantt chart


Post by hien.nguyen »

Hi team,

I can't get task dom from task record with

gantt.getElementFromTaskRecord(task)

. My code (change task color) as

useEffect(() => {
	gantt = ganttComponent.current.instance;
	//Set color for task and toggle readOnly
        const changeTaskColor = (task, color) => {
          if(gantt){
            try{
              const taskDom = gantt.getElementFromTaskRecord(task);
              taskDom.style.backgroundColor = color;
              task.readOnly = color === "grey" ? true : false;
            }catch(err){
              console.log("Gantt: ", gantt);
              console.log("task: ", task);
              console.log(err);
            }
          }
        }
});

I log

gantt & task in console

and saw it not undefined but I got error as attachment.
Please share me some guide to fix it.

1.png
1.png (471.27 KiB) Viewed 221 times

Best regards.


Post by hien.nguyen »

Hi team,

Please help me.

Best regards.


Post by tasnim »

Hi,
I'm not able to reproduce the issue that you're facing. Could you please upload a runnable test case here that we can run with npm i && npm start, so we could repro the issue and debug it?


Post by hien.nguyen »

Yes, please use

  • Server in nodejs_sample.zip: simple nodejs, please run by: npm i && node index.js (after extract).
  • Client in gantt_chart_reactjs.zip: please run npm run start
    => After app run: please open Milestone->move Task 5 under Task 6. Then you'll see error

    TypeError: taskDom is undefined

    1.png
    1.png (76.28 KiB) Viewed 191 times
Attachments
gantt_chart_reactjs.zip
(2.2 MiB) Downloaded 24 times
nodejs_sample.zip
(1.99 KiB) Downloaded 22 times

Best regards.


Post by tasnim »

Hello,

I don't see any errors that the taskDom is undefined.
It changes the color correctly

Am I doing something wrong?

Attachments
Screenshot 2023-02-01 104359.png
Screenshot 2023-02-01 104359.png (14.94 KiB) Viewed 182 times

Post by hien.nguyen »

Yes, it happen sometime.

Please try steps as: open npm run start -> access http://localhost:300 -> move Task 5 under Task 6 (don't do other action before this action). Or you can try to close current browser and try open new.

Best regards.


Post by alex.l »

I can't reproduce the issue you mentioned. I tried many times with different tabs and browsers.
This sounds like a race condition bug. You are trying to get task DOM element, but it is not there at the moment.
I think you could better try to use https://bryntum.com/products/gantt/docs/api/Gantt/model/ProjectModel#event-dataReady event to manipulate with DOM of edited/moved tasks, since sync doesn't guarantee DOM is ready.

All the best,
Alex


Post by hien.nguyen »

Yes, do we have any option to block screen (not allow to do anything) and after data is ready we'll remove block screen.

Best regards.



Post by hien.nguyen »

Yes, please share me sample code for:

  • When refresh project with gantt.refresh() then I'll show dialog to alert "Data is being refreshing" and block screen (not allow user to do any action).
  • When dataReady, I'll close this dialog and unblock screen.

Best regards.


Post Reply