Disable/Enable Fields Task Dialog

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,

Reply | Reply with quote

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.

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

Reply | Reply with quote

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

Reply | Reply with quote

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.

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

Regards,

Pooja Priya K.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
147984	Sep 30,2019 06:19 PM UTC	Oct 2,2019 04:43 AM UTC	Angular	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US