We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Disable/Enable Fields Task Dialog


How does one disable a field in the task edit dialog modal? 

At present I have attempted to disabled the field by catching the beforeOpenEditDialog event on the actionBegin method of the Gantt chart, and setting the $event.General.['gantt_column_property'].enabled to false...without success. 

Through the docs, I understand that I can remove the field by customizing the Edit Dialog Tab fields; however, I would like a field to viewable but disabled.

Thanks in advance for the assistance.


3 Replies

GA Gurunathan A Syncfusion Team October 1, 2019 12:23 PM UTC

Hi Johnny, 
Good day to you. 
We can disable the particular field in add/edit dialog by using disable method of corresponding control in actionBegin event with argument requestType value as openEditDialog. To disable the text box, we need to set disabled attribute and opacity as 0.5, please find the below code example. 
<ej-gantt id="GanttControl" 
actionBegin(args) { 
   if(args.requestType === "openEditDialog") { 
       var obj = $("# GanttControl").data("ejGantt"); 
       var statusField = $("#" + obj._id + 'statusEdit').ejNumericTextbox('instance') 
       $("#" + obj._id + 'taskNameEdit').attr("disabled", "disabled"); 
       $("#" + obj._id + 'taskNameEdit').css('opacity', '0.5'); 
We have prepared a sample and disabled the Task Name, Progress field editors in edit dialog, please find the sample from below link. 
And we would like to inform you that our newer version Gantt was available, which is based on pure JavaScript, please refer following links to know more about EJ2 Angular Gantt. 

JO Johnny October 2, 2019 01:23 AM UTC


Thanks for the swift reply. Couple of questions for clarification: 

I am currently using the pure javascript version (ej2) for Angular. 

But the example provide seems to point to using jQuery which is part of the AngularJS, I believe. Is there an example without the need for jQuery?

Also, there is not a requestType === 'openEditDialog'.

The beforeOpenEditDialo is the closest match.

Please confirm the only way to disable a field in the Edit Dialog box is to manipulate the dom elements directly, hence adding the "disabled" attribute to the dom element as shown in the provided example?

Thanks again.


PP Pooja Priya Krishna Moorthy Syncfusion Team October 2, 2019 04:43 AM UTC

Hi Johnny, 
In Gantt, actionComplete event gets triggered with requestType openEditDialog after the dialog is appended to the DOM. To disable the particular field, we can set enabled property of corresponding control as false. Please find the below code example. 
<ejs-gantt id="ganttDefault"  
   (actionComplete) = "actionComplete($event)" > 
public actionComplete(args: any): void { 
   if (args.requestType == 'openEditDialog') { 
       let durationField = (<EJ2Intance>(document.getElementById("ganttDefaultDuration"))).ej2_instances[0]; 
                             durationField.enabled = false; 
Please find the below sample link. 
Pooja Priya K. 

Live Chat Icon For mobile
Up arrow icon