How to customize the editing task page for Gantt

[n/a]

How to customize the editing task page for Gantt, like this

[Filip]

Hi, Qiushen,

Based on the provided information I understand that you wish to customize the popup that is shown when the user edits a task and implement custom fields, is that correct?

If this is the case I can recommend using the `editable.template` property, more information on how to implement custom templates can be found in the following discussions:

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

Please review the approaches outlined above and let me know in case further assistance is required.

Regards,
Filip
Progress Telerik

[n/a]

Hello,

Thank you for your answer, but the cases you provided are all applicable to jQuery and I am not sure how to use them in Vue.

I tried to use the demo in the link you provided, but the effect was not very good. The time control did not take effect. I was

wondering if I could directly listen for double-click events in Vue to prevent the task editing window from popping up.

editable: {
        template:
          '<p><label>任务描述: <input name="OperationName" /></p>' +
          '<p><label>计划开始时间: <input data-role="datetimepicker" name="start" /></label></p>' +
          '<p><label>计划结束时间: <input data-role="datetimepicker" name="end" /></label></p>' +
          '<p><label>完成百分比：<input type="number" id="percentComplete" name="PercentComplete" data-role="numerictextbox" data-format="p0" data-step="0.01" class="form-control"" /></label></p>'
      }

 

[Filip]

Hi, Qiushen,

The Gantt component is a wrapper that uses the Kendo UI for JQuery, this was the reason why the resources I sent were mostly for JQuery as they could be helpful, can you please provide more information on the encountered issue with the time control, is the date not changing correctly or is it something else? If possible, can you please reproduce it in this runnable example:

https://stackblitz.com/edit/kfedqi-4rubtx?file=src%2Fmain.vue

This will allow me to debug it locally and look for a possible fix.

Looking forward to your reply.

Regards,
Filip