Validation in React Gantt Chart component
18 Nov 201824 minutes to read
Validation in the React Gantt Chart component ensures accurate task data by enforcing rules during adding or editing, preventing invalid entries before saving. Using the Form Validator component, apply validation to columns in inline or dialog editing, custom rules for specific fields, or dependency and resource grids in the add/edit dialog. Requires Edit and valid taskFields mappings (e.g., id, name) to ensure data integrity for tasks updated on September 23, 2025, or later, maintaining valid date ranges or dependency formats.
Validate columns
Define validation rules for columns using columns.validationRules, such as required or minLength, to display error messages for invalid fields like missing task names in inline or dialog editing.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, Selection, Toolbar, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const editOptions = {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
allowTaskbarEditing: true,
showDeleteConfirmDialog: true
};
const toolbar = ['Add', 'Edit', 'Update', 'Delete', 'Cancel'];
const datetimeParams = { params: { format: 'M/d/y hh:mm a' } };
const format = { type: 'dateTime', format: 'M/d/y hh:mm a' };
const startDateRules = { required: true, date: true };
const taskNameRules = { required: true };
return <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true} editSettings={editOptions} height='450px' toolbar={toolbar}>
<ColumnsDirective>
<ColumnDirective field='TaskID' width='80'></ColumnDirective>
<ColumnDirective field='TaskName' validationRules={taskNameRules}></ColumnDirective>
<ColumnDirective field='StartDate' edit={datetimeParams} editType='datetimepickeredit' format={format} validationRules={startDateRules}></ColumnDirective>
<ColumnDirective field='Duration' validationRules={taskNameRules}></ColumnDirective>
<ColumnDirective field='Progress' validationRules={taskNameRules}></ColumnDirective>
</ColumnsDirective>
<Inject services={[Edit, Selection, Toolbar]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, EditSettingsModel, TaskFieldsModel, Selection, Toolbar, ColumnsDirective, ColumnDirective, ToolbarItem } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
const taskFields: TaskFieldsModel = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const editOptions: EditSettingsModel = {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
allowTaskbarEditing: true,
showDeleteConfirmDialog: true
};
const toolbar: ToolbarItem[] = ['Add', 'Edit', 'Update', 'Delete', 'Cancel'];
const datetimeParams = { params: { format: 'M/d/y hh:mm a' } };
const format = { type: 'dateTime', format: 'M/d/y hh:mm a' };
const startDateRules = { required: true, date: true };
const taskNameRules: any = { required: true };
return <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true} editSettings={editOptions} height='450px' toolbar={toolbar}>
<ColumnsDirective>
<ColumnDirective field='TaskID' width='80'></ColumnDirective>
<ColumnDirective field='TaskName' validationRules={taskNameRules}></ColumnDirective>
<ColumnDirective field='StartDate' edit={datetimeParams} editType='datetimepickeredit' format={format} validationRules={startDateRules}></ColumnDirective>
<ColumnDirective field='Duration' validationRules={taskNameRules}></ColumnDirective>
<ColumnDirective field='Progress' validationRules={taskNameRules}></ColumnDirective>
</ColumnsDirective>
<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/34.1.29/tailwind3.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>Apply custom validation
Implement custom validation for specific columns, like TaskName, using callback functions in columns.validationRules to enforce unique requirements, such as ensuring task names meet specific patterns.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, Selection, Toolbar, ColumnsDirective, ColumnDirective, } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const editOptions = {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
allowTaskbarEditing: true,
showDeleteConfirmDialog: true
};
const toolbar = ['Add', 'Edit', 'Update', 'Delete', 'Cancel'];
const datetimeParams = { params: { format: 'M/d/y hh:mm a' } };
const format = { type: 'dateTime', format: 'M/d/y hh:mm a' };
const startDateRules = { required: true, date: true };
const taskNameRules = { required: true };
const customFn = (args) => {
return args.value.length >= 8;
};
const priorityRules = {
minLength: [customFn, 'Value should be greater than 8 letters'],
required: true
};
return <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true}
editSettings={editOptions} height='450px' toolbar={toolbar}>
<ColumnsDirective>
<ColumnDirective field='TaskID' width='80'></ColumnDirective>
<ColumnDirective field='TaskName' validationRules={priorityRules}></ColumnDirective>
<ColumnDirective field='StartDate' edit={datetimeParams} editType='datetimepickeredit' format={format} validationRules={startDateRules}></ColumnDirective>
<ColumnDirective field='Duration' validationRules={taskNameRules}></ColumnDirective>
<ColumnDirective field='Progress' validationRules={taskNameRules}></ColumnDirective>
</ColumnsDirective>
<Inject services={[Edit, Selection, Toolbar]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, EditSettingsModel, Selection, Toolbar, ColumnsDirective, ColumnDirective, } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
const editOptions: EditSettingsModel = {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
allowTaskbarEditing: true,
showDeleteConfirmDialog: true
};
const toolbar: any = ['Add', 'Edit', 'Update', 'Delete', 'Cancel'];
const datetimeParams = { params: { format: 'M/d/y hh:mm a' } };
const format = { type: 'dateTime', format: 'M/d/y hh:mm a' };
const startDateRules = { required: true, date: true };
const taskNameRules: any = { required: true };
const customFn: any = (args: any) => {
return args.value.length >= 8;
};
const priorityRules: any = {
minLength: [customFn, 'Value should be greater than 8 letters'],
required: true
};
return <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true}
editSettings={editOptions} height='450px' toolbar={toolbar}>
<ColumnsDirective>
<ColumnDirective field='TaskID' width='80'></ColumnDirective>
<ColumnDirective field='TaskName' validationRules={priorityRules}></ColumnDirective>
<ColumnDirective field='StartDate' edit={datetimeParams} editType='datetimepickeredit' format={format} validationRules={startDateRules}></ColumnDirective>
<ColumnDirective field='Duration' validationRules={taskNameRules}></ColumnDirective>
<ColumnDirective field='Progress' validationRules={taskNameRules}></ColumnDirective>
</ColumnsDirective>
<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/34.1.29/tailwind3.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>Validate dependency and resource grids
Set validation rules for dependency and resource grids in the add/edit dialog using the actionBegin event with requestType set to beforeOpenEditDialog or beforeOpenAddDialog, configuring validationRules for fields like predecessor types or resource assignments to ensure valid entries.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, Selection, Toolbar, ColumnsDirective, ColumnDirective, } from '@syncfusion/ej2-react-gantt';
import { data, editingResources } from './datasource';
function App() {
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
dependency: 'Predecessor',
progress: 'Progress',
parentID: 'ParentID',
resourceInfo: 'Resources'
};
const resourceFields = {
id: 'ResourceId',
name: 'ResourceName'
};
const editOptions = {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
allowTaskbarEditing: true,
showDeleteConfirmDialog: true
};
const actionBegin = (args) => {
if (args.requestType == "beforeOpenEditDialog" || args.requestType == "beforeOpenAddDialog") {
args.Dependency.columns[3].validationRules = { required: true }
args.Resources.columns[2].allowEditing = true
args.Resources.columns[2].validationRules = { required: true }
}
};
const toolbar = ['Add', 'Edit', 'Update', 'Delete', 'Cancel'];
const datetimeParams = { params: { format: 'M/d/y hh:mm a' } };
const format = { type: 'dateTime', format: 'M/d/y hh:mm a' };
const startDateRules = { required: true, date: true };
const taskNameRules = { required: true };
return <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true}
editSettings={editOptions} actionBegin={actionBegin.bind(this)} resourceFields={resourceFields} resources={editingResources} height='450px' toolbar={toolbar}>
<ColumnsDirective>
<ColumnDirective field='TaskID' width='80'></ColumnDirective>
<ColumnDirective field='TaskName' validationRules={taskNameRules}></ColumnDirective>
<ColumnDirective field='StartDate' edit={datetimeParams} editType='datetimepickeredit' format={format} validationRules={startDateRules}></ColumnDirective>
<ColumnDirective field='Duration' validationRules={taskNameRules}></ColumnDirective>
<ColumnDirective field='Progress' validationRules={taskNameRules}></ColumnDirective>
</ColumnsDirective>
<Inject services={[Edit, Selection, Toolbar]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, EditSettingsModel, Selection, Toolbar, ColumnsDirective, ColumnDirective, } from '@syncfusion/ej2-react-gantt';
import { data, editingResources } from './datasource';
function App() {
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
dependency: 'Predecessor',
progress: 'Progress',
parentID: 'ParentID',
resourceInfo: 'Resources'
};
const resourceFields: any = {
id: 'ResourceId',
name: 'ResourceName'
};
const editOptions: EditSettingsModel = {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
allowTaskbarEditing: true,
showDeleteConfirmDialog: true
};
const actionBegin = (args: any) => {
if (args.requestType == "beforeOpenEditDialog" || args.requestType == "beforeOpenAddDialog") {
args.Dependency.columns[3].validationRules = { required: true }
args.Resources.columns[2].allowEditing = true
args.Resources.columns[2].validationRules = { required: true }
}
};
const toolbar: any = ['Add', 'Edit', 'Update', 'Delete', 'Cancel'];
const datetimeParams = { params: { format: 'M/d/y hh:mm a' } };
const format = { type: 'dateTime', format: 'M/d/y hh:mm a' };
const startDateRules = { required: true, date: true };
const taskNameRules: any = { required: true };
return <GanttComponent dataSource={data} taskFields={taskFields} allowSelection={true}
editSettings={editOptions} actionBegin={actionBegin.bind(this)} resourceFields={resourceFields} resources={editingResources} height='450px' toolbar={toolbar}>
<ColumnsDirective>
<ColumnDirective field='TaskID' width='80'></ColumnDirective>
<ColumnDirective field='TaskName' validationRules={taskNameRules}></ColumnDirective>
<ColumnDirective field='StartDate' edit={datetimeParams} editType='datetimepickeredit' format={format} validationRules={startDateRules}></ColumnDirective>
<ColumnDirective field='Duration' validationRules={taskNameRules}></ColumnDirective>
<ColumnDirective field='Progress' validationRules={taskNameRules}></ColumnDirective>
</ColumnsDirective>
<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/34.1.29/tailwind3.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>