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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to customize the dialog fields of Gantt

In Gantt control, user can enable or disable required fields in both edit dialog box and add dialog box for all the predefined columns and custom columns with the help of “EditDialogFields” and “AddDialogFields” property. The provided fields in the “EditDialogFields” and “AddDialogFields” property alone will be displayed in the dialog box of the Gantt chart.

Please refer the following code snippets for more details.

Code snippets:


<form id="form1" runat="server"  
<ej:Gantt ID="Gantt" runat="server"  
<ej:AddDialogField Field="Id" />
<ej:AddDialogField Field="Name" />
<ej:AddDialogField Field="StartDate" />
<ej:AddDialogField Field="Duration" />
<ej:EditDialogField Field="Name" />
<ej:EditDialogField Field="StartDate" />
<ej:EditDialogField Field="ExpectedDate" /> <%--To display custom column--%>
function Load(args) {
var columns = this.getColumns();
columns.splice(2, 0,
field: "ExpectedDate",
headerText: "Expected Date ",
editType: "stringedit",
mappingName: "ExpectedDate", //Provide this mapping name
width: "180px"

The following screen shots shows the output of the above code snippets.

Add Dialog Window: (General Tab)

Customize the general tab fields for add dialog.

Edit Dialog Window: (General Tab)

Customize the general tab fields for edit dialog.

Edit Dialog Window: (Tab for custom column)

Customize the custom fields tab for edit dialog.


The “DisplayInGeneralTab” property in Edit Dialog fields and Add dialog fields is required to provide the support for displaying the fields of custom columns in the General tab of dialog box. By default the value of this property will be false.

In the above Edit dialog box, to display the field of “ExpectedDate” custom column in General Tab, the following code snippets can be used in “EditDialogFields” property.

Code snippets:


<ej:EditDialogField Field="Name" />
<ej:EditDialogField Field="StartDate" />
<ej:EditDialogField Field="ExpectedDate" DisplayInGeneralTab="true"/> <%--To display this custom column field in General Tab--%>

The following screen shots shows the output of the above code snippets.

Customize the general tab of edit dialog with custom field column.

2X faster development

The ultimate ASP.NET Web Forms UI toolkit to boost your development speed.
You must log in to leave a comment

Please sign in to access our KB

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

Up arrow icon

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