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

Platform: ASP.NET MVC |
Control: Gantt |
Published Date: July 31, 2017 |
Last Revised Date: May 29, 2019

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:

<body style="position: static; margin: 0px; padding: 2px">
.AddDialogFields(eve =>
.EditDialogFields(eve =>
eve.Field("ExpectedDate").Add();//To display custom column
.ClientSideEvents(eve => {
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)

Add dialog window with id, task name, start date and duration fields.


Edit Dialog Window: (General Tab)

Customize the general tab of edit dialog window.

Edit Dialog Window: (Tab for custom column)

Customize the custom fields tab of edit dialog window.




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:


.EditDialogFields(eve =>
eve.Field("ExpectedDate").DisplayInGeneralTab(true).Add();//To display this custom column field in General Tab



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

Customize the edit dialog general tab with custom column field.

2X faster development

The ultimate ASP.NET MVC 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