This is a migrated thread and some comments may be shown as answers.
Custom Gantt Task Editor
2 Answers 34 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Mario asked on 06 Nov 2019, 02:13 AM

Hello everyone!

I've been struggling this past few days trying to accomplish a custom task editor with custom fields and validators for the Gantt widget.


I got to the point in wich: 

1) The only way to edit a Task, is by double clicking the task in the gantt graphic side

2) I wired up the edit event so It opens a custom template edit form (wich have some extra fields and some validations (I didn't put all of them for demo purpuses) with some textboxes, calendars and maskedtextboxes

3) When I edit some values (for example, the title of the task) and then click on the "save" button, It  doesn't save the modified value :(

4) In the "onEdit" function I don't know exactly how to update the model so changes are visible in the Gantt, documentation found here:

says: "wire the change event of the editor and update the model accordingly."  but that is where i'm stucked


I've tried:

1) In te "onEdit" function set the properties directly like "e.task.title = 'Some Value'" but no luck

2) In my custom edit template use for example "<input type="text" name="title" style="display:none;"/>" and then tryied to update the value of that input but no luck either

3) Everything from above but in the "onSave" function, obviously didn't work either :P

4) I've seen there are some functions like "e.task._notifyChange" or "e.task.change" or "e.task.set" functions but couldn't find any documentation for those.



In case you are wondering why I need a custom template?, because my client wants some custom dates to be disabled while selecting start or end date, also I have to calculate the number of work days between the selected dates, show the completePercentage without the decimal parts,  and other bussiness rules like those.


I have set up this Dojo example, and some images to clarify my problem. Just double click on "Sub Tarea 1.2" and make some changes


Any suggestions are very appriciated

2 Answers, 1 is accepted

Sort by
Top achievements
Rank 1
answered on 06 Nov 2019, 10:11 PM

With the help of Petar (one of the admins) I was able to solve this issue

1) bind the controls in the template by using the name property

2) returning in the e.success() inside the edit function in the taskdatasource

Only a small details remains:

1) when you double click a task the percent Complete does not show the "%" rigth away, it shows once you click and edit the value.

The resulting dojo can be found here

Hope this helps someone

Any suggestions or improvements are welcome!

Telerik team
answered on 07 Nov 2019, 11:23 AM

Hi Mario,

Thank you for sharing the solution of the case with the community!

Regarding the issue with the missing percentage sign, I would suggest using a NumericTexbox for updating the "percentComplete" field. Here is how the definition of the percentComplete field in the editor template will look like :

<div class="form-group">
       <label for="percentComplete">Completition</label>
       <input type="number" id="percentComplete" name="percentComplete" data-role="numerictextbox" data-format="p0" data-step="0.01" class="form-control"" />

Here is the modified version of the Dojo you shared that uses the above NumericTextBox definition. More information about the formats that can be applied can be found in this Number Formatting article

Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Asked by
Top achievements
Rank 1
Answers by
Top achievements
Rank 1
Telerik team
Share this question