Can we customize the gantt's request payload to server?

Gantt
#1

Hi. Currently, the request payload of the gantt during POST and PUT is as follows:

{
  "text": "Some title here..",
  "start_date": "2019-04-13",
  "order": 0,
  "duration": 0.2,
  "parent":0,
  ...
}

However, the API server requires the request payload to be in the following format:

{
  "id": 1,        // Only during PUT requests
   "task": {
      "text": "Some title here..",
      "start_date": "2019-04-13",
      "order": 0,
      "duration": 0.2,
      "parent":0,
      ...
   }
}

Is there a way to do this from the front end?

#2

Hi @keithmanilla!
If you want to manually control what is sent to the server, you can make use of custom routing. You can learn more about it here:
https://docs.dhtmlx.com/gantt/desktop__server_side.html#customrouting

In your case custom router will look like this:

var dp = gantt.createDataProcessor(function(entity, action, data, id) {
       var server = "api/";
        switch(action) {
            case "create":
                return gantt.ajax.post({
                    url: server  + entity,
                    data: data
                });
                break;
            case "update":
                return gantt.ajax.put({
                    url: server  + entity + "/" + id,
                    data: JSON.stringify({
                       id: data.id,
                       task: data
                   })
                });
                break;
            case "delete":
                return gantt.ajax.del({
                    url: server + entity + "/" + id
                });
                break;
        }
    });
#3

Hi @guldmi,

Thank you. Your solution was correct in the front end. The console logs are showing correct payload data being sent from the front-end. However, in the server, it is interpreting the enclosed (or nested) “data” differently in “update” (PUT Request).

The server logs shows it was interpreted like this.


{"id": 33, "task":  "{\"duration\":3,\"open\":true,\"order\":10,\"parent\":0,\"progress\":\"0.2\",\"project_id\":1,\"start_date\":\"2019-04-13\",\"text\":\"Lorem Ipsum\"}"}

The whole “data” is enclosed inside “…” (quotes) with backslash, if the “data” is nested inside JSON.stringify.

Is there another way for this?

#4

Hi @keithmanilla,
I think this could happen for several reasons.
Can you please show me the exact code you use to write parameters of PUT request?
From your description it looks like you assign the value of the task parameter as a string and not as an object, i.e.:
return gantt.ajax.put({
url: server + entity + “/” + id,
data: {
id: data.id,
task: JSON.stringify(data)
}
});

please make sure you assign it like this instead:
return gantt.ajax.put({
url: server + entity + “/” + id,
data: JSON.stringify({
id: data.id,
task: data
})
});

Also you can try to add headers:{"Content-Type":"application/json"} to ajax request, like at this sample
https://snippet.dhtmlx.com/f6c662a00 - you can see that the request parameters look correctly if you open browsers Network panel and move any task.
If this does not solve your problem please send me a snippet (demo) where I could reproduce the issue

#5

Hi @guldmi,

Thanks a lot. The headers:{"Content-Type":"application/json"}, solved it. I actually followed your snippet. It was a missing header that made the server misinterpret the request package.

Thank you so much.

1 Like