Hi,
I am trying to integrate Gantt chart with Angular 4 application. I was curious about how to restrict task creation when the backend API fails.
Hello Reshma,
Gantt doesn’t have a method to check that everything is OK on the server-side, you need to implement a custom solution for that.
After that, you can use the onTaskCreated event handler and return false if something is wrong on the server-side, then the task won’t be added:
https://docs.dhtmlx.com/gantt/api__gantt_ontaskcreated_event.html
Here is an example of how it might be implemented:
http://snippet.dhtmlx.com/b17c66413
Thanks for the response. My concern was, in case a task doesn’t get added at server side, ie. the server responds with an error to the Add API, the gantt will have already add a task to the UI. How do we restrict that creation and wait for the API response?
Hello Reshma,
Gantt is a client-side application.
When you click on the “+” button to add a task, Gantt creates a temporary task. When you click on the “Save” button, Gantt saves the changes and replaces the temporary task. But if the Data Processor is connected and there are issues on the server-side, the task will have the bold text in the grid:
But there are ways to work around it. When the task is added but not saved on the server-side, it has the $dataprocessor_class property with the "gantt_inserted" value. You can use it to change the task style to hide the task completely.
To change the task style, you can use the task_class template and hide the task from the timeline or change its transparency when there are issues on the server-side:
https://docs.dhtmlx.com/gantt/api__gantt_task_class_template.html
http://snippet.dhtmlx.com/e5b158057
http://snippet.dhtmlx.com/60cd072a3
To hide the task completely, you need to use the onBeforeTaskDisplay event handler:
https://docs.dhtmlx.com/gantt/api__gantt_onbeforetaskdisplay_event.html
However, you need to use the gantt.render() or gantt.refreshData() commands to see the task again when it is added on the server-side. Here is an example of how it might be implemented:
http://snippet.dhtmlx.com/e98a661a9
And here are the API reference for the Data Processor:
https://docs.dhtmlx.com/api__refs__dataprocessor.html