Validation in React TreeGrid

8 Oct 202513 minutes to read

Column validation

Column validation checks edited or newly added data and displays error messages for invalid fields before saving. TreeGrid uses the Form Validator component for column validation. Configure rules using the columns.validationRules property.

app.jsx

import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Edit, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
    const editOptions = {
        allowAdding: true,
        allowDeleting: true,
        allowEditing: true,
        mode: 'Cell',
        showDeleteConfirmDialog: true
    };
    const toolbarOptions = ['Add', 'Delete', 'Update', 'Cancel'];
    const format = { type: 'dateTime', format: 'M/d/y hh:mm a' };
    const datetimeParams = { params: { format: 'M/d/y hh:mm a' } };
    const numericParams = { params: { format: 'n' } };
    const taskIDRules = { required: true, number: true };
    const progressRules = { number: true, min: 0 };
    const startDateRules = { date: true };
    const priorityRules = { required: true };
    const taskNameRules = { required: true };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='270' editSettings={editOptions} toolbar={toolbarOptions}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right' isPrimaryKey={true} validationRules={taskIDRules}/>
            <ColumnDirective field='taskName' headerText='Task Name' width='180' validationRules={taskNameRules}/>
            <ColumnDirective field='startDate' headerText='Start Date' width='150' textAlign='Right' edit={datetimeParams} editType='datetimepickeredit' format={format} validationRules={startDateRules}/>
            <ColumnDirective field='approved' headerText='Approved' width='110' textAlign='Right' editType='booleanedit' type='boolean' displayAsCheckBox={true}/>
            <ColumnDirective field='progress' headerText='Progress' textAlign='Right' width='120' editType='numericedit' edit={numericParams} validationRules={progressRules}/>
            <ColumnDirective field='priority' headerText='Priority' width='110' editType='dropdownedit' validationRules={priorityRules}/>
        </ColumnsDirective>
        <Inject services={[Edit, Toolbar]}/>
    </TreeGridComponent>;
}
;
export default App;

app.tsx

import { IEditCell } from '@syncfusion/ej2-grids';
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Edit, EditSettingsModel, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';

function App() {
    const editOptions: EditSettingsModel = {
        allowAdding: true,
        allowDeleting: true,
        allowEditing: true,
        mode: 'Cell',
        showDeleteConfirmDialog: true
    };

    const toolbarOptions: ToolbarItems[] = ['Add', 'Delete', 'Update', 'Cancel'];

    const format: any = {type:'dateTime', format:'M/d/y hh:mm a'};

    const datetimeParams: IEditCell = { params: { format: 'M/d/y hh:mm a' } };
    const numericParams: IEditCell = { params: { format: 'n' } };

    const taskIDRules: object = { required: true, number: true };
    const progressRules: object = { number: true, min: 0 };
    const startDateRules: object = { date: true };
    const priorityRules: object = { required: true };
    const taskNameRules: object = { required: true };

    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='270'
        editSettings={editOptions} toolbar={toolbarOptions}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right' isPrimaryKey={true} validationRules={taskIDRules}/>
            <ColumnDirective field='taskName' headerText='Task Name' width='180' validationRules={taskNameRules}/>
            <ColumnDirective field='startDate' headerText='Start Date' width='150' textAlign='Right' edit={datetimeParams}
            editType='datetimepickeredit' format={format} validationRules={startDateRules} />
            <ColumnDirective field='approved' headerText='Approved' width='110' textAlign='Right' editType='booleanedit' type='boolean' displayAsCheckBox={true} />
            <ColumnDirective field='progress' headerText='Progress' textAlign='Right' width='120' editType='numericedit' edit={numericParams} validationRules={progressRules} />
            <ColumnDirective field='priority' headerText='Priority' width='110' editType='dropdownedit' validationRules={priorityRules} />
        </ColumnsDirective>
        <Inject services={[Edit,Toolbar]}/>
    </TreeGridComponent>
};
export default App;

Custom validation

Custom validation rules can be defined for specific columns using Form Validator custom rules.

In the following example, a custom rule is applied to the Priority column.

app.jsx

import { getValue } from '@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Edit, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
    const editOptions = {
        allowAdding: true,
        allowDeleting: true,
        allowEditing: true,
        mode: 'Cell'
    };
    const toolbarOptions = ['Add', 'Delete', 'Update', 'Cancel'];
    const customFn = (args) => {
        return getValue('value', args) <= 8;
    };
    const priorityRules = {
        minLength: [customFn, 'Value should be within 8 letters'],
        required: true
    };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='270' editSettings={editOptions} toolbar={toolbarOptions}>
        <ColumnsDirective>
          <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right' isPrimaryKey={true}/>
          <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
          <ColumnDirective field='startDate' headerText='Start Date' width='90' textAlign='Right' editType='datepickeredit' format='yMd' type='date'/>
          <ColumnDirective field='duration' headerText='Duration' width='110' validationRules={priorityRules}/>
        </ColumnsDirective>
        <Inject services={[Edit, Toolbar]}/>
    </TreeGridComponent>;
}
;
export default App;

app.tsx

import { getValue } from '@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Edit, EditSettingsModel, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';

function App() {
    const editOptions: EditSettingsModel = {
        allowAdding: true,
        allowDeleting: true,
        allowEditing: true,
        mode: 'Cell'
    };
    const toolbarOptions: ToolbarItems[] = ['Add', 'Delete', 'Update', 'Cancel'];
    const customFn = (args: { [key: string]: string }) : boolean => {
        return getValue('value', args) <= 8;
    };
    const priorityRules: object = {
      minLength: [customFn, 'Value should be within 8 letters'],
      required: true
    };

    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='270' editSettings={editOptions} toolbar={toolbarOptions}>
        <ColumnsDirective>
          <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right' isPrimaryKey={true}/>
          <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
          <ColumnDirective field='startDate' headerText='Start Date' width='90' textAlign='Right' editType='datepickeredit' format='yMd' type='date'/>
          <ColumnDirective field='duration' headerText='Duration' width='110' validationRules={priorityRules}/>
        </ColumnsDirective>
        <Inject services={[Edit,Toolbar]}/>
    </TreeGridComponent>
};
export default App;