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.
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:
Here is an example of how it might be implemented:
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?
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:
To hide the task completely, you need to use the
onBeforeTaskDisplay event handler:
However, you need to use the
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:
And here are the API reference for the Data Processor: