Custom 'add task' screen for Gantt

[Al]

I have some additional info that I want to capture when creating a new task for the Gantt eg. task owner, status etc. so obviously I will need a custom screen to capture the extra info, I was thinking along these lines:

- Have a custom 'add task button' & hide the built-in one

- The button will open my custom screen which mimics the builtin one, but with some additional fields

- On save, the screen directly updates that backend and then refresh the gantt

 

Is this the best way to do this and/or is there any flaw with this approach?

If ok, then how would I refresh the gannt? would I have to rebind it or is it better/possible to add the new task to the datasource and then sync?

[Petar]

Hi Al,

Just to be sure we are on the same page, you want to have a popup window once the "Add task" button is clicked? Is this correct? Or you want to use the default Gantt flow and define a custom editor template that will have all the fields that you need? 

If you don't need to have a popup window just after the "Add task" button is clicked, I would recommend using a custom template for achieving your scenario. The custom template can be implemented using the editable-template property. More about how the custom templates can be implemented, you can find in the following Kendo UI for jQuery discussions. The approach demonstrated in these threads, can be directly used in the Gantt Vue component:

• https://stackoverflow.com/questions/42784904/how-to-customize-the-editor-in-kendo-gantt-chart 
• https://www.telerik.com/forums/custom-gantt-task-editor 
• https://docs.telerik.com/kendo-ui/api/javascript/ui/gantt/configuration/editable.template 
• https://www.telerik.com/forums/gantt-tasks---add-custom-fields#pS9wiZyAAkmELjEwrZa5Nw 

Talking about the custom "Add task" button, I would recommend you to keep the default one. Then in the function that is executed, once the add event is triggered, use preventDefault to prevent the execution of the default logic. Then you can add a code that will display your custom window. With this approach, you won't have to make any customizations in Gantt's layout and thus will skip potential styling issues that may appear. 

To answer your question, the described steps for achieving your scenario are valid ones. After the backend data is updated, you can use the read method of Gantt's datasource and fetch the data.

Regards,

Petar
Progress Telerik

[Al]

Thank you for outlining all the options here Petar!

Currently I plan to keep the builtin add button as you suggest and then use this click event to show my custom form. I have however found a way to let the gannt do it's regular updates via transport-create/transport-update (ie. I do not call the backend directly), so my custom form does this when submitting:

 

const ganttDS = this.$refs.ganttdatasource1.kendoWidget()
var taskNew = new kendo.data.GanttTask({.................})
ganttDS.add(taskNew);
ganttDS.sync();

 

and then transport-update is fired as normal and it all seems to work fine - I assume it is ok to do as above?

[Petar]

Hi Al,

I can confirm it is OK to do it as you described.

Regards,
Petar
Progress Telerik