Add Custom Fields in the General Tab in Add/Edit Dialog
17 Feb 20226 minutes to read
Generally in Gantt, Custom fields are displayed in the Custom Tab of the Add/Edit dialogs. However, they can be included in the General Tab of Add/Edit Dialog Box using actionBegin
and actionComplete
events. These events are used to append the custom field to the dialog box. The following code snippets demonstrate the solution.
<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" height="450px" toolbar="@(new List<string>() { "Add", "Cancel", "CollapseAll", "Delete", "Edit", "ExpandAll", "Search", "Update" }
)" actionBegin="actionBegin" actionComplete="actionComplete">
<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" dependency="Dependency"
endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks">
</e-gantt-taskfields>
<e-gantt-editsettings allowEditing="true" allowAdding="true" mode="Dialog"></e-gantt-editsettings>
<e-gantt-adddialogfields>
<e-gantt-adddialogfield type="General" headerText="General Tab"></e-gantt-adddialogfield>
<e-gantt-adddialogfield type="Dependency"></e-gantt-adddialogfield>
<e-gantt-adddialogfield type="Resources"></e-gantt-adddialogfield>
<e-gantt-adddialogfield type="Notes"></e-gantt-adddialogfield>
</e-gantt-adddialogfields>
<e-gantt-editdialogfields>
<e-gantt-editdialogfield type="General" headerText="General"></e-gantt-editdialogfield>
<e-gantt-editdialogfield type="Dependency"></e-gantt-editdialogfield>
<e-gantt-editdialogfield type="Resources"></e-gantt-editdialogfield>
<e-gantt-editdialogfield type="Notes"></e-gantt-editdialogfield>
</e-gantt-editdialogfields>
<e-gantt-columns>
<e-gantt-column field="TaskId" width="150"> </e-gantt-column>
<e-gantt-column field="TaskName" width="250"></e-gantt-column>
<e-gantt-column field="StartDate" width="150"> </e-gantt-column>
<e-gantt-column field="EndDate" width="150"> </e-gantt-column>
<e-gantt-column field="Duration" width="150"> </e-gantt-column>
<e-gantt-column field="Progress" width="150"> </e-gantt-column>
<e-gantt-column field="CustomField" width="150"> </e-gantt-column>
</e-gantt-columns>
</ejs-gantt>
<script>
var divElement;
var inputs = {
booleanedit: ej.buttons.CheckBox,
dropdownedit: ej.dropdowns.DropDownList,
datepickeredit: ej.calendars.DatePicker,
datetimepickeredit: ej.calendars.DateTimePicker,
maskededit: ej.inputs.MaskedTextBox,
numericedit: ej.inputs.NumericTextBox,
stringedit: ej.inputs.TextBox
};
function actionBegin(args) {
var ganttObj = document.getElementById("Gantt").ej2_instances[0];
if (args.requestType === "beforeOpenEditDialog" || args.requestType === "beforeOpenAddDialog") {
var column = ganttObj.columnByField["CustomField"];
divElement = ganttObj.createElement("div", {
className: "e-edit-form-column"
});
var inputElement;
inputElement = ganttObj.createElement("input", {
attrs: {
type: "text",
id: this.controlId + "" + column.field,
name: column.field,
title: column.field
}
});
divElement.appendChild(inputElement);
var input = {
enabled: true,
floatLabelType: "Auto",
placeholder: "CustomField",
value: args.rowData.CustomField
};
var inputObj = new inputs[column.editType](input);
inputObj.appendTo(inputElement);
}
}
function actionComplete(args) {
var ganttObj = document.getElementById("Gantt").ej2_instances[0];
if (args.requestType === "openEditDialog" || args.requestType === "openAddDialog") {
var generalTab = document.getElementById(
ganttObj.controlId + "GeneralTabContainer"
);
generalTab.appendChild(divElement);
}
}
</script>
public ActionResult Index()
{
ViewBag.DataSource = ProjectNewData();
return View();
}