How can I help you?
Template Editing in React Grid Component
17 Feb 202624 minutes to read
The Syncfusion® React Grid component supports template editing, providing a powerful and flexible way to customize the appearance and behavior of cells during editing. React templates enable defining the structure and content of cells within the grid.
For grid basic editing setup and configuration, refer to the Edit Feature Setup.
Inline or Dialog template editing
The Syncfusion® React Grid provides support for inline and dialog template editing, enabling customization of editing using Forms. Forms enable adding and updating grid records through template support in both dialog and inline edit modes.
To enable this feature, set the editSettings.mode property to either Normal or Dialog and define grid editors using the editSettings.template template variable.
Using Forms
Forms provide an approach to create and manipulate form controls for adding and updating grid records through template support. Setting the editSettings.mode to Normal or Dialog and editSettings.template as the template variable enables grid editor definition.
When new field editors need to be added to the dialog but are not present in the column model, the dialog template enables customization of the default edit dialog.
The following example demonstrates a grid enabled with dialog template editing.
import { setValue } from '@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { Edit, Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
import { DialogFormTemplate } from './template';
function App() {
let grid;
const dialogTemplate = (props) => {
return (<DialogFormTemplate {...props}/>);
};
const editOptions = {
allowAdding: true, allowDeleting: true, allowEditing: true, mode: 'Dialog',
template: dialogTemplate
};
const toolbarOptions = ['Add', 'Edit', 'Delete'];
const actionComplete = (args) => {
if (args.form) {
if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
/** Add Validation Rules */
args.form.ej2_instances[0].addRules('Freight', { max: 500 });
}
}
};
const actionBegin = (args) => {
if (args.requestType === 'save' && args.form) {
/** cast string to integer value */
setValue('data.Freight', parseFloat(args.form.querySelector("#Freight").value), args);
}
};
return <GridComponent ref={g => grid = g} dataSource={data} actionComplete={actionComplete} actionBegin={actionBegin} editSettings={editOptions} toolbar={toolbarOptions} height={265}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right" isPrimaryKey={true} validationRules=/>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='120'/>
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150'/>
</ColumnsDirective>
<Inject services={[Edit, Toolbar]}/>
</GridComponent>;
}
;
export default App;import { setValue } from '@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, DialogEditEventArgs, Grid, GridComponent } from '@syncfusion/ej2-react-grids';
import { Edit, EditSettingsModel, Inject, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
import { IOrderModel } from './orderModel';
import { DialogFormTemplate } from './template';
function App() {
let grid: Grid | null;
const dialogTemplate = (props: IOrderModel): any => {
return (<DialogFormTemplate {...props} />);
}
const editOptions: EditSettingsModel = {
allowAdding: true, allowDeleting: true, allowEditing: true, mode: 'Dialog',
template: dialogTemplate
};
const toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete'];
const actionComplete = (args: DialogEditEventArgs): void => {
if (args.form) {
if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
/** Add Validation Rules */
args.form.ej2_instances[0].addRules('Freight', { max: 500 });
}
}
}
const actionBegin = (args: DialogEditEventArgs) => {
if (args.requestType === 'save' && args.form) {
/** cast string to integer value */
setValue('data.Freight',
parseFloat((args.form.querySelector("#Freight") as HTMLInputElement).value), args);
}
}
return <GridComponent ref={g => grid = g} dataSource={data} actionComplete={actionComplete}
actionBegin={actionBegin} editSettings={editOptions} toolbar={toolbarOptions}
height={265}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right" isPrimaryKey={true} validationRules= />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='120' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' />
</ColumnsDirective>
<Inject services={[Edit, Toolbar]} />
</GridComponent>
};
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', Role: 'Admin', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', Mask: '1111', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', Role: 'Employee', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', Mask: '2222', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', Mask: '3333', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', Role: 'Manager', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', Mask: '4444', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', Role: 'Manager', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', Mask: '5555', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', Mask: '6666', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', Role: 'Employee', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', Mask: '7777', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', Role: 'Admin', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', Mask: '8888', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', Role: 'Employee', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', Mask: '9999', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', Mask: '1234', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', Role: 'Manager', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', Mask: '2345', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', Mask: '3456', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', Mask: '4567', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', Role: 'Manager', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', Mask: '5678', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', Role: 'Employee', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', Mask: '6789', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', Role: 'Admin', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', Mask: '1111', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', Role: 'Employee', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', Mask: '2222', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', Mask: '3333', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', Role: 'Manager', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', Mask: '4444', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', Role: 'Manager', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', Mask: '5555', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', Mask: '6666', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', Role: 'Employee', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', Mask: '7777', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', Role: 'Admin', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', Mask: '8888', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', Role: 'Employee', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', Mask: '9999', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', Mask: '1234', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', Role: 'Manager', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', Mask: '2345', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', Mask: '3456', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', Mask: '4567', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', Role: 'Manager', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', Mask: '5678', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', Role: 'Employee', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', Mask: '6789', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];export {};export interface IOrderModel {
OrderID?: number;
CustomerID?: string;
Freight?: number;
OrderDate?: Date;
ShipCity?: string;
ShipCountry?: string;
ShipAddress?: string;
isAdd?: boolean;
Verified?: boolean;
}import { DataUtil } from '@syncfusion/ej2-data';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import { data as orderData } from './datasource';
export class DialogFormTemplate extends React.Component {
shipCountryDistinctData = DataUtil.distinct(orderData, 'ShipCountry', true);
constructor(props) {
super(props);
this.state = Object.assign({}, props);
}
onChange(args) {
this.setState({ [args.target.name]: args.target.value });
}
render() {
this.onChange = this.onChange.bind(this);
const data = this.state;
return (<div>
<div className="form-row">
<div className="form-group col-md-6">
<div className="e-float-input e-control-wrapper">
<input id="OrderID" name="OrderID" type="text" disabled={!data.isAdd} value={data.OrderID} onChange={this.onChange}/>
<span className="e-float-line"/>
<label className="e-float-text e-label-top"> Order ID</label>
</div>
</div>
<div className="form-group col-md-6">
<div className="e-float-input e-control-wrapper">
<input value={data.CustomerID} id="CustomerID" name="CustomerID" type="text" onChange={this.onChange}/>
<span className="e-float-line" />
<label className="e-float-text e-label-top">Customer Name</label>
</div>
</div>
</div>
<div className="form-row">
<div className="form-group col-md-6">
<NumericTextBoxComponent id="Freight" format='C2' value={data.Freight} placeholder="Freight" floatLabelType='Always'/>
</div>
<div className="form-group col-md-6">
<DropDownListComponent id="ShipCountry" value={data.ShipCountry} dataSource={this.shipCountryDistinctData} fields={{ text: 'ShipCountry', value: 'ShipCountry' }} placeholder="Ship Country" popupHeight='300px' floatLabelType='Always'/>
</div>
</div>
<div className="form-row">
<div className="form-group col-md-12">
<div className="e-float-input e-control-wrapper">
<textarea id="ShipAddress" name="ShipAddress" value={data.ShipAddress} onChange={this.onChange}></textarea>
<span className="e-float-line"/>
<label className="e-float-text e-label-top">Ship Address</label>
</div>
</div>
</div>
</div>);
}
}import { DataUtil } from '@syncfusion/ej2-data';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import { data as orderData } from './datasource';
import { IOrderModel } from './orderModel';
export class DialogFormTemplate extends React.Component<{}, {}> {
private shipCountryDistinctData: any = DataUtil.distinct(orderData, 'ShipCountry', true );
constructor(props: object) {
super(props);
this.state = Object.assign({}, props);
}
public onChange(args: any) {
this.setState({[(args.target as HTMLInputElement).name]: args.target.value});
}
public render(): any {
this.onChange = this.onChange.bind(this);
const data: IOrderModel = this.state;
return (<div>
<div className="form-row">
<div className="form-group col-md-6">
<div className="e-float-input e-control-wrapper">
<input id="OrderID" name="OrderID" type="text" disabled={!data.isAdd} value={data.OrderID} onChange={this.onChange} />
<span className="e-float-line"/>
<label className="e-float-text e-label-top"> Order ID</label>
</div>
</div>
<div className="form-group col-md-6">
<div className="e-float-input e-control-wrapper" >
<input value={data.CustomerID} id="CustomerID" name="CustomerID" type="text" onChange={this.onChange} />
<span className="e-float-line"/>
<label className="e-float-text e-label-top">Customer Name</label>
</div>
</div>
</div>
<div className="form-row">
<div className="form-group col-md-6">
<NumericTextBoxComponent id="Freight" format='C2' value={data.Freight} placeholder="Freight" floatLabelType='Always'/>
</div>
<div className="form-group col-md-6">
<DropDownListComponent id="ShipCountry" value={data.ShipCountry} dataSource={this.shipCountryDistinctData}
fields={{text: 'ShipCountry', value: 'ShipCountry' }} placeholder="Ship Country"
popupHeight='300px' floatLabelType='Always'/>
</div>
</div>
<div className="form-row">
<div className="form-group col-md-12">
<div className="e-float-input e-control-wrapper">
<textarea id="ShipAddress" name="ShipAddress" value={data.ShipAddress} onChange={this.onChange} />
<span className="e-float-line"/>
<label className="e-float-text e-label-top">Ship Address</label>
</div>
</div>
</div>
</div>);
}
}The
DialogandInlinetemplate form editors must have name attribute.
Using template context
Template contexts enhance customization of grid edit forms by enabling access to row details, rendering editors as components, retrieving values from editors, setting focus to specific editors, disabling default form validation, and adding custom validation rules. These features apply to both inline and dialog editing modes.
The following template context topics are demonstrated through a practical example in the Render tab component inside the dialog template section.
Access row details inside template using template context
Edit templates in the grid provide access to crucial row information, enabling dynamic binding of attributes, values, or elements based on the specific row being edited. This approach is particularly useful for conditionally rendering or modifying elements in the edit template based on the row’s state.
The following properties are available at the time of template execution:
| Property Name | Usage |
|---|---|
isAdd |
Boolean property indicating whether the current row is a new record |
The following code example demonstrates the usage of the isAdd property in an edit template to disable the “Order ID” textbox when editing an existing record.
<div className="form-group col-md-6">
{data.isAdd && (
<div className="e-float-input e-control-wrapper">
<input id="OrderID" name="OrderID" type="text" disabled={!data.isAdd} value={props.OrderID} onChange={onChange} />
<span className="e-float-line"></span>
<label className="e-float-text e-label-top">Order ID</label>
</div>
)}
</div>Render editors as components
The Syncfusion® React Grid provides a powerful feature enabling dynamic rendering of Syncfusion® EJ2 controls as form editors during the editing process. This functionality delivers feature-rich controls for data entry within the edit form.
To achieve this, utilize the actionComplete event of the grid and specify requestType as beginEdit or add.
The following code example illustrates rendering the DropDownList component in the actionComplete event.
const actionComplete = (args: DialogEditEventArgs) => {
if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
let countryData: {}[] = DataUtil.distinct(data, 'ShipCountry', true);
new DropDownList({value: args.rowData.ShipCountry, popupHeight: '200px', floatLabelType: 'Always',
dataSource: countryData, fields: {text: 'ShipCountry', value: 'ShipCountry'}, placeholder: 'Ship Country'}, args.form.elements.namedItem('ShipCountry') as HTMLInputElement);
}
}Get value from editor
The get value from editor feature in the Syncfusion® React Grid enables reading, formatting, and updating the current editor value before saving. This feature provides significant value when specific actions must be performed on data, such as formatting or validation, before committing to the underlying data source.
To implement this feature, utilize the actionBegin event with the requestType set to save.
In the following code example, the freight value has been formatted and updated.
const actionBegin = (args: SaveEventArgs) => {
if (args.requestType === 'save') {
// cast string to integer value.
(args.data as ColumnDataType).Freight = parseFloat(((args as any).form.querySelector('#Freight').ej2_instances[0] as HTMLInputElement).value);
}
}Set focus to particular column editor
The Syncfusion® React Grid enables control of focus behavior for input elements in edit forms. By default, the first input element in the dialog receives focus when the dialog is opened. However, when the first input element is disabled or hidden, a different valid input element can receive focus. This can be achieved using the actionComplete event of the grid, where the requestType is set to beginEdit.
In the following code example, the Customer ID column receives focus.
const actionComplete = (args: DialogEditEventArgs) => {
// Set initial focus
if (args.requestType === 'beginEdit') {
((args.form as HTMLFormElement).elements.namedItem('CustomerID') as HTMLInputElement).focus();
}
}Disable default form validation
The Syncfusion® React Grid provides built-in support for react form validation to ensure data integrity and accuracy during editing. Scenarios may arise where disabling the default form validation rules is necessary. This can be achieved using the removeRules method within the actionComplete event of the grid.
To disable default form validation rules in the grid, use the following approach:
const actionComplete = (args: DialogEditEventArgs) => {
if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
// Disable the Validation Rules
(args.form as HTMLFormElement)['ej2_instances'][0].removeRules();
}
}An alternative method to disable validation rules:
args.form.ej2_instances[0].rules = {}.
Add validation rules for custom editors
The Syncfusion® React Grid provides the ability to add validation rules for fields not present in the column model. This feature prevents erroneous or inconsistent data from being submitted, enhancing the reliability of application data.
To add validation rules, utilize the actionComplete event along with the addRules method.
The following approach uses the addRules method to add validation rules for custom editors in the actionComplete event:
const actionComplete = (args: DialogEditEventArgs) => {
if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
// Add Validation Rules
(args.form as HTMLFormElement)['ej2_instances'][0].addRules('Freight', { max: 500 });
}
}Render tab component inside the dialog template
Rendering a Tab component inside the dialog template enhances the grid editing experience. This feature is especially useful for presenting multiple editing sections or categories in a tabbed layout, ensuring a more intuitive and easily navigable interface for data editing.
To enable this functionality, set the editSettings.mode property of the grid to Dialog. Additionally, use the editSettings.template property to define a template variable containing the Tab component and its corresponding content.
The following example renders a tab component inside the edit dialog. The tab component has two tabs. Once fields in the first tab are filled and navigation to the second tab occurs, validation for the first tab is performed before proceeding.
import { ColumnDirective, ColumnsDirective, Edit } from '@syncfusion/ej2-react-grids';
import { GridComponent, Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from "react";
import { data } from './datasource';
import { DialogFormTemplate } from './wizardTab';
function App() {
const dialogTemplate = (props) => {
const a = [props, grid];
return (<DialogFormTemplate {...a}/>);
};
const editOptions = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog', template: dialogTemplate };
const toolbarOptions = ['Add', 'Edit', 'Delete'];
let grid;
return <GridComponent ref={g => grid = g} dataSource={data} editSettings={editOptions} toolbar={toolbarOptions} height={265}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right" isPrimaryKey={true} validationRules=/>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='120'/>
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150'/>
<ColumnDirective field='Verified' headerText='Verified' width='100' type='boolean' displayAsCheckBox={true}/>
</ColumnsDirective>
<Inject services={[Edit, Toolbar]}/>
</GridComponent>;
}
;
export default App;import { ColumnDirective, ColumnsDirective, Edit } from '@syncfusion/ej2-react-grids';
import { EditSettingsModel, Grid, GridComponent, Inject, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-grids';
import * as React from "react";
import { data } from './datasource';
import { IOrderModel } from './orderModel';
import { DialogFormTemplate} from './wizardTab';
function App() {
const dialogTemplate = (props: IOrderModel): any => {
const a = [props, grid]
return (<DialogFormTemplate {...a} />);
}
const editOptions: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog', template: dialogTemplate };
const toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete'];
let grid: Grid | null;
return <GridComponent ref={g => grid = g} dataSource={data} editSettings={editOptions}
toolbar={toolbarOptions} height={265}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right" isPrimaryKey={true} validationRules=/>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='120' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' />
<ColumnDirective field='Verified' headerText='Verified' width='100' type='boolean' displayAsCheckBox={true}/>
</ColumnsDirective>
<Inject services={[Edit, Toolbar]} />
</GridComponent>
};
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: null,
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: null,
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];import * as React from 'react';
export class TabOneComponent extends React.Component {
tab;
constructor(props) {
super(props);
this.state = Object.assign({}, props[0]);
this.tab = props[1];
}
onChange(args) {
this.setState({ [args.target.name]: args.target.value });
}
next() {
let valid = true;
[].slice.call(document.getElementById('tab1').querySelectorAll('[name]'))
.forEach((element) => {
element.form.ej2_instances[0].validate(element.name);
if (element.getAttribute('aria-invalid') === 'true') {
valid = false;
}
});
if (!valid) {
return;
}
if (this.tab) {
this.tab.select(1);
}
}
render() {
this.onChange = this.onChange.bind(this);
this.next = this.next.bind(this);
const data = this.state;
return (<div id='tab1'>
<div className="form-row">
<div className="form-group">
<div className="e-float-input e-control-wrapper">
<input id="OrderID" name="OrderID" type="text" disabled={!data.isAdd} value={data.OrderID} onChange={this.onChange}/>
<span className="e-float-line"/>
<label className="e-float-text e-label-top"> Order ID</label>
</div>
</div>
</div>
<div className="form-row">
<div className="form-group">
<div className="e-float-input e-control-wrapper">
<input value={data.CustomerID} id="CustomerName" name="CustomerID" type="text" onChange={this.onChange}/>
<span className="e-float-line"/>
<label className="e-float-text e-label-top">Customer Name</label>
</div>
</div>
</div>
<div id='footer'>
<button id="nextBtn" className='e-info e-btn' type="button" style={{ float: "right" }} onClick={this.next}>Next</button>
</div>
</div>);
}
}import { TabComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import { IOrderModel } from './orderModel';
export class TabOneComponent extends React.Component<{}, {}> {
public tab: TabComponent | null;
constructor(props: any) {
super(props);
this.state = Object.assign({}, props[0]);
this.tab = props[1];
}
public onChange(args: React.ChangeEvent) {
this.setState({[(args.target as HTMLInputElement).name]: (args.target as HTMLInputElement).value});
}
public next() {
let valid: boolean = true;
[].slice.call((document.getElementById('tab1') as HTMLElement).querySelectorAll('[name]'))
.forEach((element: any) => {
element.form.ej2_instances[0].validate(element.name);
if (element.getAttribute('aria-invalid') === 'true'){
valid = false;
}
});
if (!valid) {
return
}
if (this.tab) {
this.tab.select(1);
}
}
public render(): any {
this.onChange = this.onChange.bind(this);
this.next = this.next.bind(this);
const data: IOrderModel = this.state;
return (<div id='tab1'>
<div className="form-row">
<div className="form-group">
<div className="e-float-input e-control-wrapper">
<input id="OrderID" name="OrderID" type="text" disabled={!data.isAdd} value={data.OrderID} onChange={this.onChange} />
<span className="e-float-line"/>
<label className="e-float-text e-label-top"> Order ID</label>
</div>
</div>
</div>
<div className="form-row">
<div className="form-group">
<div className="e-float-input e-control-wrapper" >
<input value={data.CustomerID} id="CustomerName" name="CustomerID" type="text" onChange={this.onChange} />
<span className="e-float-line"/>
<label className="e-float-text e-label-top">Customer Name</label>
</div>
</div>
</div>
<div id='footer'>
<button id="nextBtn" className='e-info e-btn' type="button" style={{float: "right"}} onClick={this.next}>Next</button>
</div>
</div>);
}
}import { DataUtil } from '@syncfusion/ej2-data';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { data as orderData } from './datasource';
export class TabTwoComponent extends React.Component {
shipCountryDistinctData = DataUtil.distinct(orderData, 'ShipCountry', true);
grid;
constructor(props) {
super(props);
this.state = Object.assign({}, props[0]);
this.grid = props[2];
}
onChange(args) {
this.setState({ [args.target.name]: args.target.value });
}
submit() {
let valid = true;
[].slice.call(document.getElementById('tab1').querySelectorAll('[name]'))
.forEach((element) => {
element.form.ej2_instances[0].validate(element.name);
if (element.getAttribute('aria-invalid') === 'true') {
valid = false;
}
});
if (!valid) {
return;
}
if (this.grid) {
this.grid.endEdit();
}
}
render() {
this.submit = this.submit.bind(this);
const data = this.state;
return (<div id='tab2'>
<div className="form-row">
<div className="form-group">
<DropDownListComponent id="ShipCountry" value={data.ShipCountry} dataSource={this.shipCountryDistinctData} fields={{ text: 'ShipCountry', value: 'ShipCountry' }} placeholder="Ship Country" popupHeight='300px' floatLabelType='Always'/>
</div>
</div>
<div className="form-row">
<div className="form-group">
<CheckBoxComponent name="Verified" id="Verified" label="Verified" checked={data.Verified}/>
</div>
</div>
<div id='footer'>
<button id="submitBtn" className="e-info e-btn" type="button" style={{ float: "right" }} onClick={this.submit}>SUBMIT</button>
</div>
</div>);
}
}import { DataUtil } from '@syncfusion/ej2-data';
import { Grid } from '@syncfusion/ej2-grids';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { data as orderData } from './datasource';
import { IOrderModel } from './orderModel';
export class TabTwoComponent extends React.Component<{}, {}> {
private shipCountryDistinctData: any = DataUtil.distinct(orderData, 'ShipCountry', true );
private grid: Grid | null;
constructor(props: any) {
super(props);
this.state = Object.assign({}, props[0]);
this.grid = props[2];
}
public onChange(args: React.ChangeEvent) {
this.setState({[(args.target as HTMLInputElement).name]: (args.target as HTMLInputElement).value});
}
public submit() {
let valid: boolean = true;
[].slice.call((document.getElementById('tab1') as HTMLElement).querySelectorAll('[name]'))
.forEach((element: any) => {
element.form.ej2_instances[0].validate(element.name);
if (element.getAttribute('aria-invalid') === 'true'){
valid = false;
}
});
if (!valid) {
return
}
if (this.grid) {
this.grid.endEdit();
}
}
public render(): any {
this.submit = this.submit.bind(this);
const data: IOrderModel = this.state;
return (<div id='tab2'>
<div className="form-row">
<div className="form-group">
<DropDownListComponent id="ShipCountry" value={data.ShipCountry} dataSource={this.shipCountryDistinctData} fields={{ text: 'ShipCountry', value: 'ShipCountry' }} placeholder="Ship Country" popupHeight='300px' floatLabelType='Always'/>
</div>
</div>
<div className="form-row">
<div className="form-group">
<CheckBoxComponent name="Verified" id="Verified" label="Verified" checked={data.Verified}/>
</div>
</div>
<div id='footer'>
<button id="submitBtn" className="e-info e-btn" type="button" style={{float: "right"}} onClick={this.submit}>SUBMIT</button>
</div>
</div>);
}
}import { TabComponent, TabItemDirective, TabItemsDirective } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import { TabOneComponent } from './tabOne';
import { TabTwoComponent } from './tabTwo';
export class DialogFormTemplate extends React.Component {
grid;
tab;
constructor(props) {
super(props);
this.state = Object.assign({}, props[0]);
this.grid = props[1];
}
tabOne() {
const tab = [this.state, this.tab, this.grid];
return (<TabOneComponent {...tab}/>);
}
tabTwo() {
const tab = [this.state, this.tab, this.grid];
return (<TabTwoComponent {...tab}/>);
}
next() {
let valid = true;
[].slice.call(document.getElementById('tab1')
.querySelectorAll('[name]')).forEach((element) => {
element.form.ej2_instances[0].validate(element.name);
if (element.getAttribute('aria-invalid') === 'true') {
valid = false;
}
});
if (!valid) {
return false;
}
return true;
}
selecting(e) {
{
if (e.isSwiped) {
e.cancel = true;
}
if (e.selectingIndex === 1) {
e.cancel = !this.next();
}
}
}
render() {
this.tabOne = this.tabOne.bind(this);
this.tabTwo = this.tabTwo.bind(this);
this.selecting = this.selecting.bind(this);
return (<div>
<TabComponent id='defaultTab' ref={t => this.tab = t} selecting={this.selecting}>
<TabItemsDirective>
<TabItemDirective header={{ 'text': 'Details' }} content={this.tabOne}/>
<TabItemDirective header={{ 'text': 'Verify' }} content={this.tabTwo}/>
</TabItemsDirective>
</TabComponent>
</div>);
}
}import { Grid } from '@syncfusion/ej2-grids';
import { SelectingEventArgs } from '@syncfusion/ej2-navigations';
import { TabComponent, TabItemDirective, TabItemsDirective } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import { TabOneComponent } from './tabOne';
import { TabTwoComponent } from './tabTwo';
export class DialogFormTemplate extends React.Component<{}, {}> {
private grid: Grid;
private tab: TabComponent | null;
constructor(props: any) {
super(props);
this.state = Object.assign({}, props[0]);
this.grid = props[1];
}
public tabOne() {
const tab = [this.state, this.tab, this.grid];
return (<TabOneComponent {...tab} />);
}
public tabTwo() {
const tab = [this.state, this.tab, this.grid];
return (<TabTwoComponent {...tab} />);
}
public next() {
let valid: boolean = true;
[].slice.call((document.getElementById('tab1') as HTMLElement)
.querySelectorAll('[name]')).forEach((element: any) => {
element.form.ej2_instances[0].validate(element.name);
if (element.getAttribute('aria-invalid') === 'true'){
valid = false;
}
});
if (!valid) {
return false;
}
return true;
}
public selecting(e: SelectingEventArgs) {
{
if(e.isSwiped) {e.cancel = true;}
if(e.selectingIndex === 1) {e.cancel = !this.next();}
}
}
public render(): any {
this.tabOne = this.tabOne.bind(this);
this.tabTwo = this.tabTwo.bind(this);
this.selecting = this.selecting.bind(this);
return (<div>
<TabComponent id='defaultTab' ref={t => this.tab = t} selecting={this.selecting}>
<TabItemsDirective>
<TabItemDirective header= { { 'text': 'Details' } } content={this.tabOne} />
<TabItemDirective header= { { 'text': 'Verify' } } content={this.tabTwo}/>
</TabItemsDirective>
</TabComponent>
</div>);
}
}