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();
}