Disable/Enable Fields Task Dialog

[Johnny]

Support, 

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.

Regards, 

[Gurunathan A]

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. 

 

[app.component.html] 

<ej-gantt id="GanttControl" 

    //... 

      (actionBegin)="actionBegin($event)"> 

</ej-gantt> 

 

[app.component.ts] 

actionBegin(args) { 

   if(args.requestType === "openEditDialog") { 

       var obj = $("# GanttControl").data("ejGantt"); 

       var statusField = $("#" + obj._id + 'statusEdit').ejNumericTextbox('instance') 

       statusField.disable(); 

       $("#" + 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. 

Sample – https://www.syncfusion.com/downloads/support/directtrac/general/ze/SimpleGantt859509951 

 

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. 

Demo – https://ej2.syncfusion.com/angular/demos/#/material/gantt/default 

UG – https://ej2.syncfusion.com/angular/documentation/gantt/getting-started/?no-cache=1 

Feature Tour – https://www.syncfusion.com/angular-ui-components/angular-gantt-chart 

  

Thanks, 

Gurunathan 

[Johnny]

Support,

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.

Johnny

[Pooja Priya Krishna Moorthy]

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. 

 

[app.component.html] 

<ejs-gantt id="ganttDefault"  

   //... 

   (actionComplete) = "actionComplete($event)" > 

</ejs-gantt> 

 

[app.component.ts] 

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. 

Sample - https://stackblitz.com/edit/angular-cft3wg?file=app.component.ts 

 

Regards, 

Pooja Priya K.