Search results

Add Custom Fields in the General Tab in Add/Edit Dialog in React Gantt component

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.

Source
Preview
index.jsx
index.tsx
index.html
import { GanttComponent, Inject, Edit, Selection, ColumnsDirective, ColumnDirective, AddDialogFieldsDirective, EditDialogFieldsDirective, EditDialogFieldDirective, AddDialogFieldDirective, Toolbar } from '@syncfusion/ej2-react-gantt';
import { CheckBox } from "@syncfusion/ej2-buttons";
import { TextBox, NumericTextBox, MaskedTextBox } from "@syncfusion/ej2-inputs";
import { DatePicker, DateTimePicker } from "@syncfusion/ej2-calendars";
import { DropDownList } from "@syncfusion/ej2-dropdowns";
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { data } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.inputs = {
            booleanedit: CheckBox,
            dropdownedit: DropDownList,
            datepickeredit: DatePicker,
            datetimepickeredit: DateTimePicker,
            maskededit: MaskedTextBox,
            numericedit: NumericTextBox,
            stringedit: TextBox
        };
        this.taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        };
        this.editOptions = {
            allowAdding: true,
            allowEditing: true,
            allowDeleting: true,
            mode: "Dialog"
        };
        this.toolbarOptions = ['Add', 'Edit', 'Delete', 'Cancel', 'Update', 'ExpandAll', 'CollapseAll', 'Search'];
    }
    ;
    actionBegin(args) {
        if (args.requestType === "beforeOpenEditDialog" || args.requestType === "beforeOpenAddDialog") {
            var column = this.ganttInstance.columnByField["CustomField"];
            this.divElement = this.ganttInstance.createElement("div", {
                className: "e-edit-form-column"
            });
            var inputElement;
            inputElement = this.ganttInstance.createElement("input", {
                attrs: {
                    type: "text",
                    id: this.ganttInstance.controlId + "" + column.field,
                    name: column.field,
                    title: column.field
                }
            });
            this.divElement.appendChild(inputElement);
            var input = {
                enabled: true,
                floatLabelType: "Auto",
                placeholder: "CustomField",
                value: args.rowData.CustomField
            };
            var inputObj = new this.inputs[column.editType](input);
            inputObj.appendTo(inputElement);
        }
    }
    ;
    actionComplete(args) {
        if (args.requestType === "openEditDialog" || args.requestType === "openAddDialog") {
            var generalTab = document.getElementById(this.ganttInstance.controlId + "GeneralTabContainer");
            generalTab.appendChild(this.divElement);
        }
    }
    ;
    render() {
        return <GanttComponent dataSource={data} taskFields={this.taskFields} allowSelection={true} editSettings={this.editOptions} toolbar={this.toolbarOptions} actionBegin={this.actionBegin.bind(this)} actionComplete={this.actionComplete.bind(this)} ref={gantt => this.ganttInstance = gantt} height='400px'>
         <ColumnsDirective>
                <ColumnDirective field='TaskID' width='150'></ColumnDirective>
                <ColumnDirective field='TaskName' width='250'></ColumnDirective>
                <ColumnDirective field='StartDate' width='250'></ColumnDirective>
                <ColumnDirective field='EndDate' width='250'></ColumnDirective>
                <ColumnDirective field='Duration' width='250'></ColumnDirective>
                <ColumnDirective field='Progress' width='250'></ColumnDirective>
                <ColumnDirective field='CustomField' width='250'></ColumnDirective>
          </ColumnsDirective>
           <AddDialogFieldsDirective>
            <AddDialogFieldDirective type='General' headerText='General'></AddDialogFieldDirective>
            <AddDialogFieldDirective type='Dependency'></AddDialogFieldDirective>
            <AddDialogFieldDirective type='Resources'></AddDialogFieldDirective>
            <AddDialogFieldDirective type='Notes'></AddDialogFieldDirective>
        </AddDialogFieldsDirective>
           <EditDialogFieldsDirective>
              <EditDialogFieldDirective type='General' headerText='General'></EditDialogFieldDirective>
              <EditDialogFieldDirective type='Dependency'></EditDialogFieldDirective>
              <EditDialogFieldDirective type='Resources'></EditDialogFieldDirective>
              <EditDialogFieldDirective type='Notes'></EditDialogFieldDirective>
            </EditDialogFieldsDirective>
         <Inject services={[Edit, Selection, Toolbar]}/>
        </GanttComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('root'));
import { GanttComponent, Inject, Edit, Selection, ColumnsDirective, ColumnDirective, AddDialogFieldsDirective, EditDialogFieldsDirective, EditDialogFieldDirective, AddDialogFieldDirective, Toolbar } from '@syncfusion/ej2-react-gantt';
import { CheckBox } from "@syncfusion/ej2-buttons";
import { TextBox, NumericTextBox, MaskedTextBox } from "@syncfusion/ej2-inputs";
import { DatePicker, DateTimePicker } from "@syncfusion/ej2-calendars";
import { DropDownList } from "@syncfusion/ej2-dropdowns";
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { data } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        };
        this.editOptions = {
        allowAdding: true,
        allowEditing: true,
        allowDeleting: true,
        mode: "Dialog"
        };
        this.toolbarOptions = ['Add', 'Edit', 'Delete', 'Cancel', 'Update', 'ExpandAll', 'CollapseAll', 'Search'];
    };
    public divElement: any;
    public inputs = {
       booleanedit: CheckBox,
       dropdownedit: DropDownList,
       datepickeredit: DatePicker,
       datetimepickeredit: DateTimePicker,
       maskededit: MaskedTextBox,
       numericedit: NumericTextBox,
       stringedit: TextBox
     };
    actionBegin(args) {
        if (args.requestType === "beforeOpenEditDialog" || args.requestType === "beforeOpenAddDialog" ) {
          var column = this.ganttInstance.columnByField["CustomField"];
          this.divElement = this.ganttInstance.createElement("div", {
            className: "e-edit-form-column"
          });
          var inputElement: any;
          inputElement = this.ganttInstance.createElement("input", {
            attrs: {
              type: "text",
              id: this.ganttInstance.controlId + "" + column.field,
              name: column.field,
              title: column.field
            }
          });
          this.divElement.appendChild(inputElement);
          var input = {
            enabled: true,
            floatLabelType: "Auto",
            placeholder: "CustomField",
            value: args.rowData.CustomField
          };
          var inputObj = new this.inputs[column.editType](input);
          inputObj.appendTo(inputElement);
        }
    };
    actionComplete(args) {
        if (args.requestType === "openEditDialog" || args.requestType === "openAddDialog") {
          var generalTab = document.getElementById(
            this.ganttInstance.controlId + "GeneralTabContainer"
          );
          generalTab.appendChild(this.divElement);
        }
      };
    render() {
        return <GanttComponent dataSource={data} taskFields={this.taskFields} allowSelection={true} editSettings={this.editOptions}
        toolbar={this.toolbarOptions} actionBegin={this.actionBegin.bind(this)} actionComplete={this.actionComplete.bind(this)} ref={gantt => this.ganttInstance = gantt} height='400px'>
         <ColumnsDirective>
                <ColumnDirective field='TaskID' width='150'></ColumnDirective>
                <ColumnDirective field='TaskName' width='250'></ColumnDirective>
                <ColumnDirective field='StartDate' width='250'></ColumnDirective>
                <ColumnDirective field='EndDate' width='250'></ColumnDirective>
                <ColumnDirective field='Duration' width='250'></ColumnDirective>
                <ColumnDirective field='Progress' width='250'></ColumnDirective>
                <ColumnDirective field='CustomField' width='250'></ColumnDirective>
          </ColumnsDirective>
           <AddDialogFieldsDirective>
            <AddDialogFieldDirective type='General' headerText='General'></AddDialogFieldDirective>
            <AddDialogFieldDirective type='Dependency'></AddDialogFieldDirective>
            <AddDialogFieldDirective type='Resources'></AddDialogFieldDirective>
            <AddDialogFieldDirective type='Notes'></AddDialogFieldDirective>
        </AddDialogFieldsDirective>
           <EditDialogFieldsDirective>
              <EditDialogFieldDirective type='General' headerText='General'></EditDialogFieldDirective>
              <EditDialogFieldDirective type='Dependency'></EditDialogFieldDirective>
              <EditDialogFieldDirective type='Resources'></EditDialogFieldDirective>
              <EditDialogFieldDirective type='Notes'></EditDialogFieldDirective>
            </EditDialogFieldsDirective>
         <Inject services={[Edit, Selection, Toolbar]}/>
        </GanttComponent>;
    }
};
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>