Bryntum Support Forums

Posted: **Wed Apr 01, 2020 3:45 pm**

Here is my zipped up code. I modified your Advanced React demo.

the zipped folder cam from "gantt-vanilla-2.1.1\gantt-2.1.1\examples\react\javascript"

*Please excuse the sloppy code.

Posted: **Fri Apr 03, 2020 9:48 am**

Good day ,
Please see attached picture : startDate and endDate does not seem to be propagating from originalData to data. Why is this ?

Posted: **Fri Apr 03, 2020 10:38 am**

I have found a workaround/fix , but it is not very elegant , and it is very slow.

I run this code after inserting the records

    
    gantt.project.taskStore.forEach(async element => {
      await element.setStartDate(element.originalData.startDate);
    });

What is the correct/intended way of doing what I am trying to do , what am I doing wrong ?
Or can you point me in a direction at least ?

Posted: **Mon Apr 06, 2020 1:48 pm**

Hi!

You could just use dataSource mapping for the required Model fields to load data from server.
See info here.
https://www.bryntum.com/docs/gantt/#Core/data/Model
Also you should set https://www.bryntum.com/docs/gantt/#Core/data/Model#property-idField-static for new value.

Example for your example /src/lib/Task.js

export default class Task extends TaskModel {

    static get fields() {
        return [
            { name : 'id', dataSource : 'D_ID' },
            { name : 'name', dataSource : 'Name' },
            { name : 'startDate', dataSource : 'Start_Date', type : 'date', dateFormat : "YYYY-MM-DDTHH:mm:ss" },
            { name : 'endDate', dataSource : 'End_Date', type : 'date', dateFormat : "YYYY-MM-DDTHH:mm:SS"  },
            { name : 'deadline', type : 'date' }
        ];
    }

    get isLate() {
        return this.deadline && Date.now() > this.deadline;
    }
}

Task.idField = 'D_ID';

Your data exist inside project's json public/data/launch-saas.json
No code required for converting in Panel.js.

Please check attached example.

Posted: **Thu Apr 09, 2020 12:50 pm**

I Think there was a bit of a misunderstanding. I will try to explain my problem again in a different way:

The data I am getting from the API endpoint that I have to use looks exactly like this :

[
  {
    "D_ID": 1,
    "Name": "xyz",
    "Relates_To": "123",
    "Start_Date": "2016-07-30T00:00:00",
    "duration": 1,
    "constraintType": "muststarton",
    "End_Date": null,
    "D_KeyDate": 1
  },
  {
    "D_ID": 2,
    "Name": "abc",
    "Relates_To": "123",
    "Start_Date": "2016-08-31T00:00:00",
    "End_Date": null,
    "duration": 1,
    "constraintType": "muststarton",
    "D_KeyDate": 1
  },
  {
    "D_ID": 3,
    "Name": "abc1",
    "Relates_To": "123",
    "Start_Date": "2016-08-20T00:00:00",
    "duration": 1,
    "constraintType": "muststarton",
    "End_Date": null,
    "D_KeyDate": 1
  },
  {
    "D_ID": 4,
    "Name": "abcd",
    "Relates_To": "123",
    "Start_Date": "2016-10-21T00:00:00",
    "duration": 1,
    "constraintType": "muststarton",
    "End_Date": null,
    "D_KeyDate": 1
  }
]

It does not look like this :

{
  "success": true,
  "project": {
    "calendar": "general",
    "startDate" : "2016-07-31",
    "endDate" : "2016-10-31"
  },
  "calendars": {
    "rows": [
      {
        "id": "general",
        "name": "General",
        "intervals": [
          {
            "recurrentStartDate": "on Sat at 0:00",
            "recurrentEndDate": "on Mon at 0:00",
            "isWorking": false
          }
        ],
        "expanded": true,
        "children": [
          {
            "id": "business",
            "name": "Business",
            "hoursPerDay": 8,
            "daysPerWeek": 5,
            "daysPerMonth": 20,
            "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
              }
            ]
          },
          {
            "id": "night",
            "name": "Night shift",
            "hoursPerDay": 8,
            "daysPerWeek": 5,
            "daysPerMonth": 20,
            "intervals": [
              {
                "recurrentStartDate": "every weekday at 6:00",
                "recurrentEndDate": "every weekday at 22:00",
                "isWorking": false
              }
            ]
          }
        ]
      }
    ]
  },
  "tasks": {
    "rows": [
      {
        "D_ID": 1,
        "Name": "xyz",
        "Relates_To": "123",
        "Start_Date": "2016-07-30T00:00:00",
        "duration": 1,
        "constraintType": "muststarton",
        "End_Date": null,
        "D_KeyDate": 1
      },
      {
        "D_ID": 2,
        "Name": "abc",
        "Relates_To": "123",
        "Start_Date": "2016-08-31T00:00:00",
        "End_Date": null,
        "duration": 1,
        "constraintType": "muststarton",
        "D_KeyDate": 1
      },
      {
        "D_ID": 3,
        "Name": "abc1",
        "Relates_To": "123",
        "Start_Date": "2016-08-20T00:00:00",
        "duration": 1,
        "constraintType": "muststarton",
        "End_Date": null,
        "D_KeyDate": 1
      },
      {
        "D_ID": 4,
        "Name": "abcd",
        "Relates_To": "123",
        "Start_Date": "2016-10-21T00:00:00",
        "duration": 1,
        "constraintType": "muststarton",
        "End_Date": null,
        "D_KeyDate": 1
      }
    ]
  },
  "dependencies": {
    "rows": []
  },
  "resources": {
    "rows": [
      { "id" : 1, "name" : "Celia", "city" : "Barcelona", "calendar" : "general", "image" : "celia.jpg" },
      { "id" : 2, "name" : "Lee", "city" : "London", "calendar" : "general", "image" : "lee.jpg"  },
      { "id" : 3, "name" : "Macy", "city" : "New York","calendar" : "general", "image" : "macy.jpg"  },
      { "id" : 4, "name" : "Madison", "city" : "Barcelona", "calendar" : "general","image" : "madison.jpg"  },
      { "id" : 5, "name" : "Rob", "city" : "Rome", "calendar" : "business", "image" : "rob.jpg"  },
      { "id" : 6, "name" : "Dave", "city" : "Barcelona", "calendar" : "night", "image" : "dave.jpg"  },
      { "id" : 7, "name" : "Dan", "city" : "London", "calendar" : "night", "image" : "dan.jpg"  },
      { "id" : 8, "name" : "George", "city" : "New York", "calendar" : "general", "image" : "george.jpg"  },
      { "id" : 9, "name" : "Gloria", "city" : "Rome", "calendar" : "general", "image" : "gloria.jpg"  },
      { "id" : 10, "name" : "Henrik", "city" : "London", "calendar" : "general", "image" : "henrik.jpg"  }
    ]
  },
  "assignments": {
    "rows": [
      { "id" : 1, "event" : 1,  "resource" : 1 },
      { "id" : 2, "event" : 2,  "resource" : 2 },
      { "id" : 3, "event" : 3,  "resource" : 3 },
      { "id" : 4, "event" : 4,  "resource" : 4 }

    ]
  },
  "timeRanges": {
    "rows": []
  }
}

so If I modify ganttConfig.js in the following way :

        transport      : {
            load : {
                url : 'https://fakeurl.....'
            }
        }

Then it will not work as I want it to work.
Or am I missing something ?

Posted: **Mon Apr 13, 2020 3:36 pm**

Hello,

It's possible to transform data you read from server and apply to the crud manager. Please see decode function. It's supposed to be overridden in such cases. For example:
1. Edit Gantt/examples/basic/app.js and leave only array of tasks there
2. Edit Gantt/examples/basic/app.js and subclass ProjectModel.

class MyProject extends ProjectModel {

    decode(responseText) {
        return {
            success : true,

            project : {...},

            calendars : {...},

            tasks : {
                rows : super.decode(responseText)
            },

            dependencies : {...},

            resources : {... },

            assignments : {...},

            timeRanges : {...}
        };
    }

    encode(requestConfig) {
        // TODO: implement encoding if need to save tasks
        return super.encode(requestConfig);
    }
}

const project = new MyProject({
    transport : {
        load : {
            url : '../_datasets/launch-saas.json'
        }
    }
});

3. Open Basic demo locally to check how it works.

If you need to save data in a specific format, feel free to override encode function.

Best,
Pavel

P.S. Looking at your data I come to conclusion that you'll have to specify new Task model and define your custom fields and map you custom names, otherwise you'll get errors/ or see no data on the screen. But that's a different issue.

Bryntum Support Forums

[INFO REQ] Is it possible to load tasks not from a file?

Re: [INFO REQ] Is it possible to load tasks not from a file?

Re: [INFO REQ] Is it possible to load tasks not from a file?

Re: [INFO REQ] Is it possible to load tasks not from a file?

Re: [INFO REQ] Is it possible to load tasks not from a file?

Re: [INFO REQ] Is it possible to load tasks not from a file?

Re: [INFO REQ] Is it possible to load tasks not from a file?