Custom field in React Gantt component
2 Feb 202318 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.
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';
function App () {
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const editOptions = {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
mode: "Dialog"
};
const toolbarOptions = ['Add', 'Edit', 'Delete', 'Cancel', 'Update', 'ExpandAll', 'CollapseAll', 'Search'];
let divElement;
let ganttInstance;
const inputs = {
booleanedit: CheckBox,
dropdownedit: DropDownList,
datepickeredit: DatePicker,
datetimepickeredit: DateTimePicker,
maskededit: MaskedTextBox,
numericedit: NumericTextBox,
stringedit: TextBox
};
function actionBegin(args) {
if (args.requestType === "beforeOpenEditDialog" || args.requestType === "beforeOpenAddDialog" ) {
var column = ganttInstance.columnByField["CustomField"];
divElement = ganttInstance.createElement("div", {
className: "e-edit-form-column"
});
var inputElement;
inputElement = ganttInstance.createElement("input", {
attrs: {
type: "text",
id: ganttInstance.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) {
if (args.requestType === "openEditDialog" || args.requestType === "openAddDialog") {
var generalTab = document.getElementById(
ganttInstance.controlId + "GeneralTabContainer"
);
generalTab.appendChild(divElement);
}
};
return <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true} editSettings={editOptions}
toolbar={toolbarOptions} actionBegin={actionBegin} actionComplete={actionComplete} ref={gantt => 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';
function App () {
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const editOptions = {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
mode: "Dialog"
};
const toolbarOptions = ['Add', 'Edit', 'Delete', 'Cancel', 'Update', 'ExpandAll', 'CollapseAll', 'Search'];
let divElement: any;
let ganttInstance;
const inputs = {
booleanedit: CheckBox,
dropdownedit: DropDownList,
datepickeredit: DatePicker,
datetimepickeredit: DateTimePicker,
maskededit: MaskedTextBox,
numericedit: NumericTextBox,
stringedit: TextBox
};
function actionBegin(args) {
if (args.requestType === "beforeOpenEditDialog" || args.requestType === "beforeOpenAddDialog" ) {
var column = ganttInstance.columnByField["CustomField"];
divElement = ganttInstance.createElement("div", {
className: "e-edit-form-column"
});
var inputElement: any;
inputElement = ganttInstance.createElement("input", {
attrs: {
type: "text",
id: ganttInstance.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) {
if (args.requestType === "openEditDialog" || args.requestType === "openAddDialog") {
var generalTab:any = document.getElementById(
ganttInstance.controlId + "GeneralTabContainer"
);
generalTab.appendChild(divElement);
}
};
return <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true} editSettings={editOptions}
toolbar={toolbarOptions} actionBegin={actionBegin} actionComplete={actionComplete} ref={gantt => 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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>