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 () {
$("#gantt").ejGantt({
load:"load",
//...
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"
});
}
</script>
</body>
The following screen shots shows the output of the above code snippets.
Add Dialog: (General Tab)
Edit Dialog: (General Tab)
Edit Dialog: (Tab for custom column)
DisplayInGeneralTab:
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.
