Our state of the art Gantt chart


Post by hien.nguyen »

Hi teams,

I tried to refresh project data when click on button "Refresh" with code

<DemoButton
              text={'Refresh'}
              onClick={() => {
                gantt.project.load(); 
                console.log(gantt.project);
              }}
            />

Button I got error as picture in attachment. Please share me the way to fix it.
My config project as

const project = new ProjectModel({
  autoLoad: true,
  autoSync: true,
  transport: {
      load: {          
url: "https://localhost:3001/test" }, sync : {
url: "https://localhost:3001/sync" } }, validateResponse : true });

Best regards.

Attachments
1.png
1.png (211.89 KiB) Viewed 316 times

Best regards.


Post by tasnim »

Hello,
It's really hard to say why this is happening, It seems like the field is not defined. Could you please provide us a runnable test case so we can reproduce it and debug it?

Good Luck :),
Tasnim


Post by hien.nguyen »

Yes, please get runnable code in attachment.

BTW, I think because I init gantt inside useEffect and that make error.

useEffect(() => {       
gantt = ganttComponent.current.instance; }, []);

But If I init gantt outside useEffect, it can't init gantt.

Best regards.

Attachments
basic.zip
(2.36 MiB) Downloaded 24 times

Best regards.


Post by tasnim »

I'm not able to reproduce it with the demo you provided. Seems like the problem is in the data that is coming from the API. Could you please paste the data here that is coming from the API?


Post by hien.nguyen »

Yes,

{"success":true,"project":{"calendar":"business","hoursPerDay":8,"daysPerWeek":5,"daysPerMonth":20},"calendars":{"rows":[{"id":"business","name":"Business","intervals":[{"recurrentStartDate":"every weekday at 12:00","recurrentEndDate":"every weekday at 13:00","isWorking":false},{"recurrentStartDate":"every weekday at 17:00","recurrentEndDate":"every weekday at 08:00","isWorking":false}]}]},"tasks":{"rows":[{"id":129323,"name":"Task 2","startDate":"2022-10-30","endDate":"2022-11-04","durationUnit": "hour","duration":40,"constrainttypeNS":"FIXEDSTART","issummarytask":"F","constraintType":"startnoearlierthan","schedulingMode":"Fixed Effort","finishbydate":"","custevent3":null,"note":null,"canDel":false, "canEdit": false, "readOnly": true},{"id":129324,"name":"Task 313","startDate":"2022-10-27","endDate":"2022-10-28","durationUnit": "hour","duration":8,"constrainttypeNS":"FIXEDSTART","issummarytask":"F","constraintType":"startnoearlierthan","schedulingMode":"Fixed Effort","finishbydate":"","custevent3":null,"note":null,"canDel":true},{"id":129325,"name":"Task 1eee","startDate":"2022-10-20","endDate":"2022-10-25","durationUnit": "hour","duration":22,"constrainttypeNS":"FIXEDSTART","issummarytask":"F","constraintType":"startnoearlierthan","schedulingMode":"Fixed Effort","finishbydate":"","custevent3":null,"note":"custevent_task_description","canDel":true},{"id":129327,"name":"Parent 1","startDate":"2022-10-23","endDate":"2022-10-27","durationUnit": "hour","duration":55,"constrainttypeNS":"FIXEDSTART","issummarytask":"T","constraintType":"startnoearlierthan","schedulingMode":"Fixed Effort","finishbydate":"","custevent3":null,"note":null,"canDel":true,"children":[{"id":129328,"name":"Chil 1 of parent 1","startDate":"2022-10-23","endDate":"2022-10-26","durationUnit": "hour","duration":25,"constrainttypeNS":"FIXEDSTART","issummarytask":"F","constraintType":"startnoearlierthan","schedulingMode":"Fixed Effort","finishbydate":"","custevent3":null,"note":null,"canDel":true,"parent":129327},{"id":129329,"name":"Chil 2 of parent 1","startDate":"2022-10-23","endDate":"2022-10-27","durationUnit": "hour","duration":30,"constrainttypeNS":"FIXEDSTART","issummarytask":"F","constraintType":"startnoearlierthan","schedulingMode":"Fixed Effort","finishbydate":"","custevent3":null,"note":null,"canDel":true,"parent":129327}]},{"id":129330,"name":"Parent 2","startDate":"2022-10-23","endDate":"2022-10-27","durationUnit": "hour","duration":60,"constrainttypeNS":"FIXEDSTART","issummarytask":"T","constraintType":"startnoearlierthan","schedulingMode":"Fixed Effort","finishbydate":"","custevent3":null,"note":null,"canDel":true,"children":[{"id":129331,"name":"Chil 1 of parent 2","startDate":"2022-10-23","endDate":"2022-10-26","durationUnit": "hour","duration":25,"constrainttypeNS":"FIXEDSTART","issummarytask":"F","constraintType":"startnoearlierthan","schedulingMode":"Fixed Effort","finishbydate":"","custevent3":null,"note":null,"canDel":true,"parent":129330},{"id":129332,"name":"Chil 2 of parent 2","startDate":"2022-10-23","endDate":"2022-10-27","durationUnit": "hour","duration":35,"constrainttypeNS":"FIXEDSTART","issummarytask":"F","constraintType":"startnoearlierthan","schedulingMode":"Fixed Effort","finishbydate":"","custevent3":null,"note":null,"canDel":true,"parent":129330}]}]},"dependencies":{"rows":[{"id":"1_129325_129323","fromTask":129325,"toTask":129323,"lag":null,"successor":129323},{"id":"2_129325_129324","fromTask":129325,"toTask":129324,"lag":null,"successor":129324},{"id":"3_129328_129329","fromTask":129328,"toTask":129329,"lag":null,"successor":129329}]}}

Best regards.

Best regards.


Post by hien.nguyen »

Hi Tasnim,

Please help me when you can.

Best regards.


Post by tasnim »

Hello hien.nguyen,
Sorry for the late response. The thing that was causing the bug is the parent field that you added to the children of tasks
You don't need this parent field to add the parent id, there is already a parentId https://bryntum.com/docs/gantt/api/Gantt/model/TaskModel#property-parentId field available to the record.
And If you want to get the parent you can use this https://bryntum.com/docs/gantt/api/Gantt/model/TaskModel#property-parent

And Here is the data

{
  "success": true,
  "project": {
    "calendar": "business",
    "hoursPerDay": 8,
    "daysPerWeek": 5,
    "daysPerMonth": 20
  },
  "calendars": {
    "rows": [
      {
        "id": "business",
        "name": "Business",
        "intervals": [
          {
            "recurrentStartDate": "every weekday at 12:00",
            "recurrentEndDate": "every weekday at 13:00",
            "isWorking": false
          },
          {
            "recurrentStartDate": "every weekday at 17:00",
            "recurrentEndDate": "every weekday at 08:00",
            "isWorking": false
          }
        ]
      }
    ]
  },
  "tasks": {
    "rows": [
      {
        "id": 129323,
        "name": "Task 2",
        "startDate": "2022-10-30",
        "endDate": "2022-11-04",
        "durationUnit": "hour",
        "duration": 40,
        "constrainttypeNS": "FIXEDSTART",
        "issummarytask": "F",
        "constraintType": "startnoearlierthan",
        "schedulingMode": "Fixed Effort",
        "finishbydate": "",
        "custevent3": null,
        "note": null,
        "canDel": false,
        "canEdit": false,
        "readOnly": true
      },
      {
        "id": 129324,
        "name": "Task 313",
        "startDate": "2022-10-27",
        "endDate": "2022-10-28",
        "durationUnit": "hour",
        "duration": 8,
        "constrainttypeNS": "FIXEDSTART",
        "issummarytask": "F",
        "constraintType": "startnoearlierthan",
        "schedulingMode": "Fixed Effort",
        "finishbydate": "",
        "custevent3": null,
        "note": null,
        "canDel": true
      },
      {
        "id": 129325,
        "name": "Task 1eee",
        "startDate": "2022-10-20",
        "endDate": "2022-10-25",
        "durationUnit": "hour",
        "duration": 22,
        "constrainttypeNS": "FIXEDSTART",
        "issummarytask": "F",
        "constraintType": "startnoearlierthan",
        "schedulingMode": "Fixed Effort",
        "finishbydate": "",
        "custevent3": null,
        "note": "custevent_task_description",
        "canDel": true
      },
      {
        "id": 129327,
        "name": "Parent 1",
        "startDate": "2022-10-23",
        "endDate": "2022-10-27",
        "durationUnit": "hour",
        "duration": 55,
        "constrainttypeNS": "FIXEDSTART",
        "issummarytask": "T",
        "constraintType": "startnoearlierthan",
        "schedulingMode": "Fixed Effort",
        "finishbydate": "",
        "custevent3": null,
        "note": null,
        "canDel": true,
        "children": [
          {
            "id": 129328,
            "name": "Chil 1 of parent 1",
            "startDate": "2022-10-23",
            "endDate": "2022-10-26",
            "durationUnit": "hour",
            "duration": 25,
            "constrainttypeNS": "FIXEDSTART",
            "issummarytask": "F",
            "constraintType": "startnoearlierthan",
            "schedulingMode": "Fixed Effort",
            "finishbydate": "",
            "custevent3": null,
            "note": null,
            "canDel": true
          },
          {
            "id": 129329,
            "name": "Chil 2 of parent 1",
            "startDate": "2022-10-23",
            "endDate": "2022-10-27",
            "durationUnit": "hour",
            "duration": 30,
            "constrainttypeNS": "FIXEDSTART",
            "issummarytask": "F",
            "constraintType": "startnoearlierthan",
            "schedulingMode": "Fixed Effort",
            "finishbydate": "",
            "custevent3": null,
            "note": null,
            "canDel": true
          }
        ]
      },
      {
        "id": 129330,
        "name": "Parent 2",
        "startDate": "2022-10-23",
        "endDate": "2022-10-27",
        "durationUnit": "hour",
        "duration": 60,
        "constrainttypeNS": "FIXEDSTART",
        "issummarytask": "T",
        "constraintType": "startnoearlierthan",
        "schedulingMode": "Fixed Effort",
        "finishbydate": "",
        "custevent3": null,
        "note": null,
        "canDel": true,
        "children": [
          {
            "id": 129331,
            "name": "Chil 1 of parent 2",
            "startDate": "2022-10-23",
            "endDate": "2022-10-26",
            "durationUnit": "hour",
            "duration": 25,
            "constrainttypeNS": "FIXEDSTART",
            "issummarytask": "F",
            "constraintType": "startnoearlierthan",
            "schedulingMode": "Fixed Effort",
            "finishbydate": "",
            "custevent3": null,
            "note": null,
            "canDel": true
          },
          {
            "id": 129332,
            "name": "Chil 2 of parent 2",
            "startDate": "2022-10-23",
            "endDate": "2022-10-27",
            "durationUnit": "hour",
            "duration": 35,
            "constrainttypeNS": "FIXEDSTART",
            "issummarytask": "F",
            "constraintType": "startnoearlierthan",
            "schedulingMode": "Fixed Effort",
            "finishbydate": "",
            "custevent3": null,
            "note": null,
            "canDel": true
          }
        ]
      }
    ]
  },
  "dependencies": {
    "rows": [
      {
        "id": "1_129325_129323",
        "fromTask": 129325,
        "toTask": 129323,
        "lag": null,
        "successor": 129323
      },
      {
        "id": "2_129325_129324",
        "fromTask": 129325,
        "toTask": 129324,
        "lag": null,
        "successor": 129324
      },
      {
        "id": "3_129328_129329",
        "fromTask": 129328,
        "toTask": 129329,
        "lag": null,
        "successor": 129329
      }
    ]
  }
}

I've provided a gif that shows it's working properly

Good Luck :),
Tasnim

Attachments
chrome_zKIp8IMsIv.gif
chrome_zKIp8IMsIv.gif (372.88 KiB) Viewed 256 times

Post by hien.nguyen »

Hi team,

It worked for me about refresh project data but color of task not back to normal color (blue). Because in my case before refresh I've some action to change task color from blue->grey. Now I want after refresh all task reset to blue again as normal. Please share me some property to do this.

Best regards.


Post by alex.l »

Because in my case before refresh I've some action to change task color from blue->grey. Now I want after refresh all task reset to blue again as normal.

Could you please share your code regarding to that? I am not sure I got the idea. If it's on data level, it should be reset since you reload data. If it's on CSS level, you need to take care of it by yourself.

All the best,
Alex


Post by hien.nguyen »

Yes, it's in CSS level. I change color by code

taskDom.style.backgroundColor = "grey";

Can I have any option on data level for reset all task to blue?

Best regards.


Post Reply