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.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

How to customize the dialog fields in Gantt

In Gantt control, user can enable or disable required fields in both edit dialog and add dialog, for both the predefined and custom columns using editDialogFields and addDialogFields properties. The fields displayed in the editDialogFields and addDialogFields properties alone will be displayed in the Gantt dialogs.

Please refer the following code snippets for more details.

Code snippets:

<body style="overflow: hidden; position: static; margin: 0; padding: 0;">
<div id="gantt" style="position: absolute; height:450px; width:1300px"></div>    
    <script type="text/javascript">       
       $(function () {
                addDialogFields: [
                    { field: "Id" },
                    { field: "Name" },
                    { field: "startDate" },
                    { field: "Duration" }
                editDialogFields: [
                    { field: "Name" },
                    { field: "StartDate" },
                    { 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: (General Tab)

Customize the add dialog fields.

Edit Dialog: (General Tab)Customize the general tab fields of edit dialog.

Edit Dialog: (Tab for custom column)

Customize the custom tab fields of edit dialog.




The “displayInGeneralTab” property in edit dialog 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: [
        { field: "Name" },
        { field: "StartDate" },
        { 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.

Edit dialog with custom column field in general tab.

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