Search results

Add Custom Fields in the General Tab in Add/Edit Dialog in ASP.NET Core Gantt control

28 Jul 2021 / 1 minute 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.

tagHelper
customfield.cs
Copied to clipboard
<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>
Copied to clipboard
public ActionResult Index()
{
    ViewBag.DataSource = ProjectNewData();
    return View();
}