Search results

Validation in React TreeGrid component

02 Feb 2023 / 3 minutes to read

Column validation

Column validation allows you to validate the edited or added row data and it display errors for invalid fields before saving data. TreeGrid uses Form Validator component for column validation. You can set validation rules by defining the columns.validationRules.

Source
Preview
App.jsx
App.tsx
Copied to clipboard
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Edit, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
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;
Copied to clipboard
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 './App.css';
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

You can define your own custom validation rules for the specific columns by using Form Validator custom rules.

In the below demo, custom validation applied for Priority column.

Source
Preview
App.jsx
App.tsx
Copied to clipboard
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 './App.css';
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;
Copied to clipboard
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 './App.css';
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;