Validation in React Gantt control
15 Dec 202324 minutes to read
Column validation
Column validation validates the editing and adding data and it display errors for invalid fields before saving data. This is effective in both inline and dialog editing.
Gantt uses Form Validator component for column validation. You can set validation rules by defining the columns.validationRules. The value cannot be saved unless the validation rule get satisfied.
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, 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 };
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/31.2.12/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>Custom validation
You can define your own custom validation rules for the specific columns by using callback function to it’s validation rule.
In the below demo, custom validation applied for TaskName column.
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/31.2.12/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>Dependency and resource grid validation
Validation rules can also be implemented for the dependency and resource grid in the add or edit dialog by employing the event actionBegin.
Within the actionBegin event, validationRules can be configured for columns in the grid of the dependency and resource tabs using the requestType beforeOpenEditDialog or beforeOpenAddDialog.
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/31.2.12/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>