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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Disable/Enable Fields Task Dialog

Thread ID:

Created:

Updated:

Platform:

Replies:

147984 Sep 30,2019 06:19 PM UTC Oct 2,2019 04:43 AM UTC Angular 3
loading
Tags: ejGantt
Johnny
Asked On September 30, 2019 06:19 PM UTC

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 [Syncfusion]
Replied On 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. 
 
[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. 
 
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. 
  
Thanks, 
Gurunathan 


Johnny
Replied On October 2, 2019 01:23 AM UTC

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 [Syncfusion]
Replied On 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. 
 
[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. 
 
Regards, 
Pooja Priya K. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon