React Migration in Grid Component

This section explains how to migrate the Grid component from EJ2 React to React. It provides a detailed comparison of APIs, including props, methods, and events.

Properties

EJ2 ReactReactDescription

Props: aggregates

footerSum(props: any) : any { return(<span>Sum: {props.Sum}</span>) } <GridComponent dataSource={data}> <ColumnsDirective> <ColumnDirective field='OrderID' headerText='Order ID' textAlign='Right'/> <ColumnDirective field='Freight' headerText='Freight' textAlign='Right'/> </ColumnsDirective> <AggregatesDirective> <AggregateDirective> <AggregateColumnsDirective> <AggregateColumnDirective field='Freight' type='Sum' footerTemplate={footerSum}/> </AggregateColumnsDirective> </AggregateDirective> </AggregatesDirective> <Inject services={[Aggregate]}/> </GridComponent>

Props: aggregates

const footerSum = useCallback((props: AggregateData) => { return (<span>Sum: {props.Sum}</span>); }, []); <Grid dataSource={data}> <Columns> <Column field='OrderID' headerText='Order ID' textAlign='Right'/> <Column field='Freight' headerText='Freight' textAlign='Right'/> </Columns> <Aggregates> <AggregateRow> <AggregateColumn field='Freight' type='Sum' footerTemplate={footerSum}/> </AggregateRow> </Aggregates> </Grid>
Replace <AggregatesDirective> with <Aggregates>, <AggregateRow>, and <AggregateColumn>. Remove <Inject services={[Aggregate]}/>. Behavior unchanged.

Props: allowKeyboard

<GridComponent allowKeyboard={true}></GridComponent>

Props: allowKeyboard

<Grid allowKeyboard={true}></Grid>
Set allowKeyboard on <Grid>. No changes to name or behavior. Enables keyboard navigation.

Props: clipMode

<GridComponent clipMode={'EllipsisWithTooltip'}></GridComponent>

Props: clipMode

<Grid clipMode={ClipMode.EllipsisWithTooltip}></Grid>
Use ClipMode enum for values (Clip, Ellipsis, EllipsisWithTooltip). Set on <Grid>. No structural changes.

Props: columns

<GridComponent dataSource={data}> <ColumnsDirective> <ColumnDirective field='OrderID' headerText='Order ID' textAlign='Right'/> <ColumnDirective field='Freight' headerText='Freight' textAlign='Right'/> </ColumnsDirective> </GridComponent>

Props: columns

<Grid dataSource={data}> <Columns> <Column field='OrderID' headerText='Order ID' textAlign='Right'/> <Column field='Freight' headerText='Freight' textAlign='Right'/> </Columns> </Grid>
Replace <ColumnsDirective> with <Columns> and <ColumnDirective> with <Column>. Pass array of ColumnProps<T>. Behavior unchanged.

Props: dataSource

<GridComponent dataSource={data}></GridComponent>

Props: dataSource

<Grid dataSource={data}></Grid>
Set dataSource on <Grid>. Supports array, DataManager, or DataResult. No changes needed.

Props: editSettings

<GridComponent editSettings={{ allowEditing: true, allowAdding: true, allowDeleting: true }}> <Inject services={[Edit]}/> </GridComponent>

Props: editSettings

<Grid editSettings={{ allowEdit: true, allowAdd: true, allowDelete: true }}></Grid>
Update to camelCase (allowEdit, allowAdd, allowDelete). Remove <Inject services={[Edit]}/>. Set object on <Grid>. Behavior preserved.

Props: emptyRecordTemplate

const emptyRecordTemplate = ( <div className="empty-grid-message"> <h3>No employees found</h3> </div> ); <GridComponent emptyRecordTemplate={emptyRecordTemplate}></GridComponent>

Props: emptyRecordTemplate

const emptyRecordTemplate = ( <div className="empty-grid-message"> <h3>No employees found</h3> </div> ); <Grid emptyRecordTemplate={emptyRecordTemplate}></Grid>
Define template as string, ReactElement, or function. Set on <Grid>. No changes to behavior.

Props: enableAltRow

<GridComponent enableAltRow={true}></GridComponent>

Props: enableAltRow

<Grid enableAltRow={true}></Grid>
Set enableAltRow on <Grid>. Toggles sf-alt-row class. No changes to behavior.

Props: enableHover

<GridComponent enableHover={true}></GridComponent>

Props: enableHover

<Grid enableHover={true}></Grid>
Set enableHover on <Grid>. Enables row hover effects. No changes to behavior.

Props: enableHtmlSanitizer

<GridComponent enableHtmlSanitizer={true}></GridComponent>

Props: enableHtmlSanitizer

<Grid enableHtmlSanitizer={true}></Grid>
Set enableHtmlSanitizer on <Grid>. Sanitizes HTML to prevent XSS. No changes to behavior.

Props: enableStickyHeader

<GridComponent enableStickyHeader={true}></GridComponent>

Props: enableStickyHeader

<Grid enableStickyHeader={true}></Grid>
Set enableStickyHeader on <Grid>. Keeps headers fixed on scroll. No changes to behavior.

Props: allowFiltering

<GridComponent allowFiltering={true}> <Inject services={[Filter]}/> </GridComponent>

Props: filterSettings

<Grid filterSettings={{ enabled: true }}></Grid>
Replace allowFiltering with filterSettings={{ enabled: true }}. Remove <Inject services={[Filter]}/>. Configure filter UI via object.

Props: gridLines

<GridComponent gridLines={'Both'}></GridComponent>

Props: gridLines

<Grid gridLines={GridLine.Both}></Grid>
Use GridLine enum (Default, None, Both, Horizontal, Vertical). Set on <Grid>. No changes to behavior.

Props: height

<GridComponent height={'400'}></GridComponent>

Props: height

<Grid height={'400'}></Grid>
Set height on <Grid>. Accepts number, string (e.g., '400px'), or 'auto'. Behavior unchanged.

Props: id

<GridComponent id={'grid'}></GridComponent>

Props: id

<Grid id={'grid'}></Grid>
Set id on <Grid> for unique identification. No changes to name or behavior.

Props: allowPaging

<GridComponent allowPaging={true}> <Inject services={[Page]}/> </GridComponent>

Props: pageSettings

<Grid pageSettings={{ enabled: true }}></Grid>
Replace allowPaging with pageSettings={{ enabled: true }}. Remove <Inject services={[Page]}/>. Configure pagination via object.

Props: query

const query = new Query().sortBy('name', 'ascending'); <GridComponent query={query}></GridComponent>

Props: query

const query = new Query().sortBy('name', 'ascending'); <Grid query={query}></Grid>
Set query on <Grid>. Accepts Query instance for sorting, filtering, and other grid action. No changes to behavior.

Props: rowClass Not applicable

Props: rowClass

<Grid rowClass={'grid-row'}></Grid>
Set rowClass on <Grid> as string or function returning class name based on RowClassProps<T>.

Props: rowHeight

<GridComponent rowHeight={'40'}></GridComponent>

Props: rowHeight

<Grid rowHeight={'40'}></Grid>
Set rowHeight on <Grid> for fixed row height in pixels. No changes to behavior.

Props: rowTemplate

const rowTemplate = ( <div className="row-template"> <h3>Row Info</h3> </div> ); <GridComponent rowTemplate={rowTemplate}></GridComponent>

Props: rowTemplate

const rowTemplate = (<div className="row-template"> <h3>Row Info</h3> </div> ); <Grid rowTemplate={rowTemplate}></Grid>
Define rowTemplate as string, ReactElement, or function. Set on <Grid>. No changes to behavior.

Props: searchSettings

<GridComponent toolbar={['Search']} searchSettings={{ fields: ['OrderID'], key: 2 }}> <Inject services={[Search, Toolbar]}/> </GridComponent>

Props: searchSettings

<Grid toolbar={['Search']} searchSettings={{ enabled: true, fields: ['OrderID'], value: 2 }}></Grid>
Replace key with value in searchSettings. Remove <Inject services={[Search, Toolbar]}/>. Configure search via object on <Grid>.

Props: allowSelection

<GridComponent allowSelection={true}> <Inject services={[Selection]}/> </GridComponent>

Props: selectionSettings

<Grid selectionSettings={{ enabled: true }}></Grid>
Replace allowSelection with selectionSettings={{ enabled: true }}. Remove <Inject services={[Selection]}/>. Configure via object.

Props: allowSorting

<GridComponent allowSorting={true}> <Inject services={[Sort]}/> </GridComponent>

Props: sortSettings

<Grid sortSettings={{ enabled: true }}></Grid>
Replace allowSorting with sortSettings={{ enabled: true }}. Remove <Inject services={[Sort]}/>. Configure via object.

Props: allowTextWrap

<GridComponent allowTextWrap={true}></GridComponent>

Props: textWrapSettings

<Grid textWrapSettings={{ enabled: true }}></Grid>
Replace allowTextWrap with textWrapSettings={{ enabled: true }}. Configure text wrapping via object on <Grid>.

Props: toolbar

<GridComponent toolbar={['Add', 'Edit', 'Delete']}> <Inject services={[Toolbar]}/> </GridComponent>

Props: toolbar

<Grid toolbar={['Add', 'Edit', 'Delete']}></Grid>
Set toolbar array on <Grid>. Remove <Inject services={[Toolbar]}/>. Same item keys supported.

Props: width

<GridComponent width={'800'}></GridComponent>

Props: width

<Grid width={'800'}></Grid>
Set width on <Grid>. Accepts number, string (e.g., '800px'), or 'auto'. No changes to behavior.

Methods

EJ2 ReactReactDescription

Methods: addRecord(data?: Object, index?: number): void

let grid; return ( <div> <Button onClick={() => { grid.addRecord({OrderID: 1, Freight: 22}); }}></Button> <GridComponent ref={g => grid = g} editSettings={{ allowEditing: true, allowAdding: true, allowDeleting: true }}> <Inject services={[Edit]}/> </GridComponent> </div> );

Methods: addRecord(data?: T, index?: number): void

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => { gridRef.current.addRecord({OrderID: 1, Freight: 22}); }}></Button> <Grid<DataItem> ref={gridRef} editSettings={{ allowEdit: true, allowAdd: true, allowDelete: true }}></Grid> </div> );
Use useRef<GridRef<T>> for grid reference. Remove <Inject services={[Edit]}/>. Method signature unchanged; adds record at index or start.

Methods: closeEdit(): void

let grid; return ( <div> <Button onClick={() => { grid.closeEdit(); }}></Button> <GridComponent ref={g => grid = g} editSettings={{ allowEditing: true, allowAdding: true, allowDeleting: true }}> <Inject services={[Edit]}/> </GridComponent> </div> );

Methods: cancelDataChanges(): void

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => { gridRef.current.cancelDataChanges(); }}></Button> <Grid<DataItem> ref={gridRef} editSettings={{ allowEdit: true, allowAdd: true, allowDelete: true }}></Grid> </div> );
Replace closeEdit with cancelDataChanges. Use useRef<GridRef<T>>. Remove <Inject services={[Edit]}/>. Cancels CRUD operations.

Methods: clearFiltering(fields?: string[]): void

let grid; return ( <div> <Button onClick={() => { grid.clearFiltering(); }}></Button> <GridComponent ref={g => grid = g} allowFiltering={true}> <Inject services={[Filter]}/> </GridComponent> </div> );

Methods: clearFilter(fields?: string[]): void

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => { gridRef.current.clearFilter(); }}></Button> <Grid<DataItem> ref={gridRef} filterSettings={{ enabled: true }}></Grid> </div> );
Replace clearFiltering with clearFilter. Use useRef<GridRef<T>>. Remove <Inject services={[Filter]}/>. Clears filters for fields or all columns.

Methods: clearRowSelection(): void

let grid; return ( <div> <Button onClick={() => { grid.clearRowSelection(); }}></Button> <GridComponent ref={g => grid = g} allowSelection={true}> <Inject services={[Selection]}/> </GridComponent> </div> );

Methods: clearRowSelection(indexes: number[]): void

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => { gridRef.current.clearRowSelection([1]); }}></Button> <Grid<DataItem> ref={gridRef} selectionSettings={{ enabled: true }}></Grid> </div> );
The clearRowSelection method now supports deselecting specific row indexes.

Methods: clearSelection(): void

let grid; return ( <div> <Button onClick={() => { grid.clearSelection(); }}></Button> <GridComponent ref={g => grid = g} allowSelection={true}> <Inject services={[Selection]}/> </GridComponent> </div> );

Methods: clearSelection(): void

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => { gridRef.current.clearSelection(); }}></Button> <Grid<DataItem> ref={gridRef} selectionSettings={{ enabled: true }}></Grid> </div> );
Use useRef<GridRef<T>>. Remove <Inject services={[Selection]}/>. Method name and behavior unchanged; clears all row selections.

Methods: clearSorting(): void

let grid; return ( <div> <Button onClick={() => { grid.clearSorting(); }}></Button> <GridComponent ref={g => grid = g} allowSorting={true}> <Inject services={[Sort]}/> </GridComponent> </div> );

Methods: clearSort(fields?: string[]): void

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => { gridRef.current.clearSort(); }}></Button> <Grid<DataItem> ref={gridRef} sortSettings={{ enabled: true }}></Grid> </div> );
Replace clearSorting with clearSort. Use useRef<GridRef<T>>. Remove <Inject services={[Sort]}/>. Clears sorting for fields or all columns.

Methods: deleteRecord(fieldName?: string, data?: Object): void

let grid; return ( <div> <Button onClick={() => { grid.deleteRecord('OrderID', {OrderID: 1}); }}></Button> <GridComponent ref={g => grid = g} editSettings={{ allowDeleting: true }}> <Inject services={[Edit]}/> </GridComponent> </div> );

Methods: deleteRecord(fieldName?: string, data?: T): void

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => { gridRef.current.deleteRecord('OrderID', {OrderID: 1}); }}></Button> <Grid<DataItem> ref={gridRef} editSettings={{ allowDelete: true }}></Grid> </div> );
Use useRef<GridRef<T>>. Remove <Inject services={[Edit]}/>. Method signature unchanged; deletes record by field or selected row.

Methods: startEdit(): void

let grid; return ( <div> <Button onClick={() => { grid.startEdit(); }}></Button> <GridComponent ref={g => grid = g} editSettings={{ allowEditing: true }}> <Inject services={[Edit]}/> </GridComponent> </div> );

Methods: editRecord(rowElement?: HTMLTableRowElement): void

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => { gridRef.current.editRecord(); }}></Button> <Grid<DataItem> ref={gridRef} editSettings={{ allowEdit: true }}></Grid> </div> );
Replace startEdit with editRecord. Use useRef<GridRef<T>>. Remove <Inject services={[Edit]}/>. Accepts optional row element; edits selected row if omitted.

Methods: filterByColumn(fieldName: string, filterOperator: string, filterValue: string | number | Date | boolean | number[] | string[] | Date[] | boolean[] | null, predicate?: string, matchCase?: boolean, ignoreAccent?: boolean, actualFilterValue?: string, actualOperator?: string): void

let grid; return ( <div> <Button onClick={() => { grid.filterByColumn('OrderID', 'equal', 1); }}></Button> <GridComponent ref={g => grid = g} allowFiltering={true}> <Inject services={[Filter]}/> </GridComponent> </div> );

Methods: filterByColumn(fieldName: string, filterOperator: string, filterValue: ValueType | ValueType[], predicate?: string, caseSensitive?: boolean, ignoreAccent?: boolean): void

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => { gridRef.current.filterByColumn('OrderID', 'equal', 1); }}></Button> <Grid<DataItem> ref={gridRef} filterSettings={{ enabled: true }}></Grid> </div> );
Rename matchCase to caseSensitive. Remove actualFilterValue and actualOperator parameters. Use useRef<GridRef<T>> for grid reference. Remove <Inject services={[Filter]}/>. Filters rows by column criteria with filterValue as ValueType | ValueType[].

Methods: getColumnByField(field: string): Column

let grid; return ( <div> <Button onClick={() => { console.log(grid.getColumnByField('OrderID')); }}></Button> <GridComponent ref={g => grid = g}></GridComponent> </div> );

Methods: getColumnByField(field: string): ColumnProps<T>

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => { console.log(gridRef.current.getColumnByField('OrderID')); }}></Button> <Grid<DataItem> ref={gridRef}></Grid> </div> );
Use useRef<GridRef<T>>. Returns ColumnProps<T> instead of Column. Retrieves column config by field.

Methods: getColumns(isRefresh?: boolean): Column[]

let grid; return ( <div> <Button onClick={() => { console.log(grid.getColumns()); }}></Button> <GridComponent ref={g => grid = g}></GridComponent> </div> );

Methods: getColumns(): ColumnProps<T>[]

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => { console.log(gridRef.current.getColumns()); }}></Button> <Grid<DataItem> ref={gridRef}></Grid> </div> );
Use useRef<GridRef<T>>. Returns ColumnProps<T>[] instead of Column[]. Retrieves all column configs.

Methods: getData(skipPage?: boolean, requiresCount?: boolean): T[] | Promise<Response | DataReturnType> Not applicable

Methods: getData(skipPage?: boolean, requiresCount?: boolean): T[] | Promise<Response | DataReturnType>

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => { console.log(gridRef.current.getData()); }}></Button> <Grid<DataItem> ref={gridRef}></Grid> </div> );
Use useRef<GridRef<T>>. Retrieves grid data.

Methods: getHiddenColumns(): Column[]

let grid; return ( <div> <Button onClick={() => { console.log(grid.getHiddenColumns()); }}></Button> <GridComponent ref={g => grid = g}></GridComponent> </div> );

Methods: getHiddenColumns(): ColumnProps<T>[]

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => { console.log(gridRef.current.getHiddenColumns()); }}></Button> <Grid<DataItem> ref={gridRef}></Grid> </div> );
Use useRef<GridRef<T>>. Returns ColumnProps<T>[] instead of Column[]. Retrieves hidden column configs.

Methods: getPrimaryKeyFieldNames(): string[]

let grid; return ( <div> <Button onClick={() => { console.log(grid.getPrimaryKeyFieldNames()); }}></Button> <GridComponent ref={g => grid = g}></GridComponent> </div> );

Methods: getPrimaryKeyFieldNames(): string[]

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => { console.log(gridRef.current.getPrimaryKeyFieldNames()); }}></Button> <Grid<DataItem> ref={gridRef}></Grid> </div> );
Use useRef<GridRef<T>>. No changes to name or behavior; returns primary key field names.

Methods: getRowInfo(target: Element | EventTarget): RowInfo

let grid; return ( <div> <Button onClick={() => { console.log(grid.getRowInfo(document.querySelector('td'))); }}></Button> <GridComponent ref={g => grid = g}></GridComponent> </div> );

Methods: getRowInfo(target: Element): RowInfo

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => { console.log(gridRef.current.getRowInfo(document.querySelector('td'))); }}></Button> <Grid<DataItem> ref={gridRef}></Grid> </div> );
Use useRef<GridRef<T>>. Retrieves row metadata.

Methods: getSelectedRecords(): Object[]

let grid; return ( <div> <Button onClick={() => { console.log(grid.getSelectedRecords()); }}></Button> <GridComponent ref={g => grid = g} allowSelection={true}> <Inject services={[Selection]}/> </GridComponent> </div> );

Methods: getSelectedRecords(): T[] | null

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => { console.log(gridRef.current.getSelectedRecords()); }}></Button> <Grid<DataItem> ref={gridRef} selectionSettings={{ enabled: true }}></Grid> </div> );
Use useRef<GridRef<T>>. Returns T[] | null instead of Object[]. Remove <Inject services={[Selection]}/>. Retrieves selected row data.

Methods: getSelectedRowIndexes(): number[]

let grid; return ( <div> <Button onClick={() => { console.log(grid.getSelectedRowIndexes()); }}></Button> <GridComponent ref={g => grid = g} allowSelection={true}> <Inject services={[Selection]}/> </GridComponent> </div> );

Methods: getSelectedRowIndexes(): number[]

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => { console.log(gridRef.current.getSelectedRowIndexes()); }}></Button> <Grid<DataItem> ref={gridRef} selectionSettings={{ enabled: true }}></Grid> </div> );
Use useRef<GridRef<T>>. Remove <Inject services={[Selection]}/>. No changes to name or behavior; returns selected row indexes.

Methods: getVisibleColumns(): Column[]

let grid; return ( <div> <Button onClick={() => { console.log(grid.getVisibleColumns()); }}></Button> <GridComponent ref={g => grid = g}></GridComponent> </div> );

Methods: getVisibleColumns(): ColumnProps<T>[]

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => { console.log(gridRef.current.getVisibleColumns()); }}></Button> <Grid<DataItem> ref={gridRef}></Grid> </div> );
Use useRef<GridRef<T>>. Returns ColumnProps<T>[] instead of Column[]. Retrieves visible column configs.

Methods: goToPage(pageNo: number): void

let grid; return ( <div> <Button onClick={() => { grid.goToPage(2); }}></Button> <GridComponent ref={g => grid = g} allowPaging={true}> <Inject services={[Page]}/> </GridComponent> </div> );

Methods: goToPage(pageNumber: number): void

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => { gridRef.current.goToPage(2); }}></Button> <Grid<DataItem> ref={gridRef} pageSettings={{ enabled: true }}></Grid> </div> );
Use useRef<GridRef<T>>. Remove <Inject services={[Page]}/>. No changes to name or behavior; navigates to specified page.

Methods: hideSpinner(): void

let grid; return ( <div> <Button onClick={() => { grid.hideSpinner(); }}></Button> <GridComponent ref={g => grid = g}></GridComponent> </div> );

Methods: hideSpinner(): void

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => { gridRef.current.hideSpinner(); }}></Button> <Grid<DataItem> ref={gridRef}></Grid> </div> );
Use useRef<GridRef<T>>. No changes to name or behavior; hides loading spinner.

Methods: refresh(): void

let grid; return ( <div> <Button onClick={() => { grid.refresh(); }}></Button> <GridComponent ref={g => grid = g}></GridComponent> </div> );

Methods: refresh(): void

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => { gridRef.current.refresh(); }}></Button> <Grid<DataItem> ref={gridRef}></Grid> </div> );
Use useRef<GridRef<T>>. No changes to name or behavior; refreshes grid data and view.

Methods: removeSortColumn(columnName: string): void Not applicable

Methods: removeSortColumn(columnName: string): void

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => { gridRef.current.removeSortColumn('OrderID'); }}></Button> <Grid<DataItem> ref={gridRef} sortSettings={{ enabled: true }}></Grid> </div> );
Use useRef<GridRef<T>>. Clears sorting for specified column.

Methods: endEdit(): void

let grid; return ( <div> <Button onClick={() => { grid.endEdit(); }}></Button> <GridComponent ref={g => grid = g} editSettings={{ allowEditing: true }}> <Inject services={[Edit]}/> </GridComponent> </div> );

Methods: saveDataChanges(): Promise<boolean>

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => { gridRef.current.saveDataChanges(); }}></Button> <Grid<DataItem> ref={gridRef} editSettings={{ allowEdit: true }}></Grid> </div> );
Replace endEdit with saveDataChanges. Use useRef<GridRef<T>>. Remove <Inject services={[Edit]}/>. Returns Promise<boolean> for save validation.

Methods: search(searchString: string): void

let grid; return ( <div> <Button onClick={() => { grid.search('123'); }}></Button> <GridComponent ref={g => grid = g} toolbar={['Search']}> <Inject services={[Search, Toolbar]}/> </GridComponent> </div> );

Methods: search(searchString?: string): void

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => { gridRef.current.search('123'); }}></Button> <Grid<DataItem> ref={gridRef} toolbar={['Search']} searchSettings={{ enabled: true }}></Grid> </div> );
Use useRef<GridRef<T>>. Remove <Inject services={[Search, Toolbar]}/>. No changes to name or behavior; applies search term.

Methods: selectRow(index: number, isToggle?: boolean): void

let grid; return ( <div> <Button onClick={() => { grid.selectRow(1); }}></Button> <GridComponent ref={g => grid = g} allowSelection={true}> <Inject services={[Selection]}/> </GridComponent> </div> );

Methods: selectRow(rowIndex: number, isToggle?: boolean): void

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => { gridRef.current.selectRow(1); }}></Button> <Grid<DataItem> ref={gridRef} selectionSettings={{ enabled: true }}></Grid> </div> );
Use useRef<GridRef<T>>. Remove <Inject services={[Selection]}/>. Rename index to rowIndex. Selects row by index.

Methods: selectRowsByRange(startIndex: number, endIndex?: number): void

let grid; return ( <div> <Button onClick={() => { grid.selectRowsByRange(1, 3); }}></Button> <GridComponent ref={g => grid = g} allowSelection={true}> <Inject services={[Selection]}/> </GridComponent> </div> );

Methods: selectRowByRange(startIndex: number, endIndex?: number): void

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => { gridRef.current.selectRowByRange(1, 3); }}></Button> <Grid<DataItem> ref={gridRef} selectionSettings={{ enabled: true }}></Grid> </div> );
Use useRef<GridRef<T>>. Remove <Inject services={[Selection]}/>. Rename selectRowsByRange to selectRowByRange. Selects row range.

Methods: selectRows(rowIndexes: number[]): void

let grid; return ( <div> <Button onClick={() => { grid.selectRows([1, 2]); }}></Button> <GridComponent ref={g => grid = g} allowSelection={true}> <Inject services={[Selection]}/> </GridComponent> </div> );

Methods: selectRows(rowIndexes: number[]): void

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => { gridRef.current.selectRows([1, 2]); }}></Button> <Grid<DataItem> ref={gridRef} selectionSettings={{ enabled: true }}></Grid> </div> );
Use useRef<GridRef<T>>. Remove <Inject services={[Selection]}/>. No changes to name or behavior; selects multiple rows by indexes.

Methods: setCellValue(key: string | number, field: string, value: string | number | boolean | Date | null): void

let grid; return ( <div> <Button onClick={() => { grid.setCellValue(1, 'OrderID', 100); }}></Button> <GridComponent ref={g => grid = g}> <ColumnsDirective> <ColumnDirective field='OrderID' isPrimaryKey={true}/> </ColumnsDirective> </GridComponent> </div> );

Methods: setCellValue(key: string | number, field: string, value: ValueType | null, isDataSourceChangeRequired?: boolean): void

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => { gridRef.current.setCellValue(1, 'OrderID', 100); }}></Button> <Grid<DataItem> ref={gridRef}> <Columns> <Column field='OrderID' isPrimaryKey={true}/> </Columns> </Grid> </div> );
Use useRef<GridRef<T>>. Use ValueType for value. No other changes; updates cell value by primary key.

Methods: updateExternalMessage(message: string): void

let grid; return ( <div> <Button onClick={() => { grid.updateExternalMessage('Loading...'); }}></Button> <GridComponent ref={g => grid = g}></GridComponent> </div> );

Methods: setPagerMessage(message?: string): void

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => { gridRef.current.setPagerMessage('Loading...'); }}></Button> <Grid<DataItem> ref={gridRef}></Grid> </div> );
Replace updateExternalMessage with setPagerMessage. Use useRef<GridRef<T>>. Message is optional; updates grid message.

Methods: setRowData(key: string | number, rowData?: Object): void

let grid; return ( <div> <Button onClick={() => { grid.setRowData(1, {OrderID: 1, Freight: 22}); }}></Button> <GridComponent ref={g => grid = g}> <ColumnsDirective> <ColumnDirective field='OrderID' isPrimaryKey={true}/> </ColumnsDirective> </GridComponent> </div> );

Methods: setRowData(key: string | number, data: T, isDataSourceChangeRequired?: boolean): void

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => { gridRef.current.setRowData(1, {OrderID: 1, Freight: 22}); }}></Button> <Grid<DataItem> ref={gridRef}> <Columns> <Column field='OrderID' isPrimaryKey={true}/> </Columns> </Grid> </div> );
Use useRef<GridRef<T>>. Use T for data. No other changes; updates row by primary key.

Methods: showSpinner(): void

let grid; return ( <div> <Button onClick={() => { grid.showSpinner(); }}></Button> <GridComponent ref={g => grid = g}></GridComponent> </div> );

Methods: showSpinner(): void

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => { gridRef.current.showSpinner(); }}></Button> <Grid<DataItem> ref={gridRef}></Grid> </div> );
Use useRef<GridRef<T>>. No changes to name or behavior; shows loading spinner.

Methods: sortColumn(columnName: string, direction: SortDirection, isMultiSort?: boolean): void

let grid; return ( <div> <Button onClick={() => { grid.sortColumn('OrderID', 'Ascending'); }}></Button> <GridComponent ref={g => grid = g} allowSorting={true}> <Inject services={[Sort]}/> </GridComponent> </div> );

Methods: sortByColumn(columnName: string, sortDirection: SortDirection | string, isMultiSort?: boolean): void

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => { gridRef.current.sortByColumn('OrderID', 'Ascending'); }}></Button> <Grid<DataItem> ref={gridRef} sortSettings={{ enabled: true }}></Grid> </div> );
Replace sortColumn with sortByColumn. Use useRef<GridRef<T>>. Remove <Inject services={[Sort]}/>. Sorts column with direction.

Methods: updateRow(index: number, data: Object): void

let grid; return ( <div> <Button onClick={() => { grid.updateRow(1, {OrderID: 1, Freight: 22}); }}></Button> <GridComponent ref={g => grid = g} editSettings={{ allowEditing: true }}> <Inject services={[Edit]}/> </GridComponent> </div> );

Methods: updateRecord(index: number, data: T): void

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => { gridRef.current.updateRecord(1, {OrderID: 1, Freight: 22}); }}></Button> <Grid<DataItem> ref={gridRef} editSettings={{ allowEdit: true }}></Grid> </div> );
Replace updateRow with updateRecord. Use useRef<GridRef<T>>. Remove <Inject services={[Edit]}/>. Updates row by index.

Methods: validateEditForm(): boolean Not applicable

Methods: validateEditForm(): boolean

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => console.log(gridRef.current?.validateEditForm())}></Button> <Grid<DataItem> ref={gridRef} editSettings={{ allowEdit: true, allowAdd: true }} ></Grid> </div> );
New method. Use useRef<GridRef<T>>. Validates all fields in edit/add form. Returns boolean.

Methods: validateField(field: string): boolean Not applicable

Methods: validateField(field: string): boolean

const gridRef = useRef<GridRef<DataItem>>(null); return ( <div> <Button onClick={() => console.log(gridRef.current?.validateField('OrderID'))}></Button> <Grid<DataItem> ref={gridRef} editSettings={{ allowEdit: true, allowAdd: true, allowDelete: true }} > <Columns> <Column field='OrderID' isPrimaryKey={true} validationRules={{ required: true }}/> </Columns> </Grid> </div> );
New method. Use useRef<GridRef<T>>. Validates specific field against column rules. Returns boolean.

Events

EJ2 ReactReactDescription

Event: recordClick: (event: RecordClickEventArgs) => void

const recordClick = (event: RecordClickEventArgs): void => { // Action code here } return ( <div> <GridComponent recordClick={recordClick}></GridComponent> </div> );

Event: onCellClick: (event: CellFocusEvent<T>) => void

const onCellClick = (event: CellFocusEvent<DataItem>): void => { // Action code here } return ( <div> <Grid<DataItem> onCellClick={onCellClick}></Grid> </div> );
Replace recordClick with onCellClick. Use CellFocusEvent<T> for type safety. Fires on cell click.

Event: onCellFocus: (event: CellFocusEvent<T>) => void Not applicable

Event: onCellFocus: (event: CellFocusEvent<T>) => void

const onCellFocus = (event: CellFocusEvent<DataItem>): void => { // Action code here } return ( <div> <Grid<DataItem> onCellFocus={onCellFocus}></Grid> </div> );
New event. Use CellFocusEvent<T>. Fires when a cell gains focus.

Event: onDataChangeCancel: (event: FormCancelEvent<T>) => void Not applicable

Event: onDataChangeCancel: (event: FormCancelEvent<T>) => void

const onDataChangeCancel = (event: FormCancelEvent<DataItem>): void => { // Action code here } return ( <div> <Grid<DataItem> onDataChangeCancel={onDataChangeCancel}></Grid> </div> );
New event. Use FormCancelEvent<T>. Fires when CRUD operation is canceled.

Event: onDataChangeComplete: (event: SaveEvent<T> | DeleteEvent<T>) => void Not applicable

Event: onDataChangeComplete: (event: SaveEvent<T> | DeleteEvent<T>) => void

const onDataChangeComplete = (event: SaveEvent<DataItem> | DeleteEvent<DataItem>): void => { // Action code here } return ( <div> <Grid<DataItem> onDataChangeComplete={onDataChangeComplete}></Grid> </div> );
New event. Use SaveEvent<T> | DeleteEvent<T>. Fires on CRUD completion, excluding paging/sorting.

Event: dataSourceChanged: (event: DataSourceChangedEventArgs) => void

const dataSourceChanged = (event: DataSourceChangedEventArgs): void => { // Action code here } return ( <div> <GridComponent dataSourceChanged={dataSourceChanged}></GridComponent> </div> );

Event: onDataChangeRequest: (event: DataChangeRequestEvent<T>) => void

const onDataChangeRequest = (event: DataChangeRequestEvent<DataItem>): void => { // Action code here } return ( <div> <Grid<DataItem> onDataChangeRequest={onDataChangeRequest}></Grid> </div> );
Replace dataSourceChanged with onDataChangeRequest. Use DataChangeRequestEvent<T>. Fires before data source mutation.

Event: onDataChangeStart: (event: SaveEvent<T> | DeleteEvent<T>) => void Not applicable

Event: onDataChangeStart: (event: SaveEvent<T> | DeleteEvent<T>) => void

const onDataChangeStart = (event: SaveEvent<DataItem> | DeleteEvent<DataItem>): void => { // Action code here } return ( <div> <Grid<DataItem> onDataChangeStart={onDataChangeStart}></Grid> </div> );
New event. Use SaveEvent<T> | DeleteEvent<T>. Fires when CRUD operation starts.

Event: dataBound: (event: Object) => void

const dataBound = (event: Object): void => { // Action code here } return ( <div> <GridComponent dataBound={dataBound}></GridComponent> </div> );

Event: onDataLoad: ( ) => void

const onDataLoad = (): void => { // Action code here } return ( <div> <Grid<DataItem> onDataLoad={onDataLoad}></Grid> </div> );
Replace dataBound with onDataLoad. No event args. Fires after data binding completes.

Event: dataStateChange: (event: DataStateChangeEventArgs) => void

const dataStateChange = (event: DataStateChangeEventArgs): void => { // Action code here } return ( <div> <GridComponent dataStateChange={dataStateChange}></GridComponent> </div> );

Event: onDataRequest: (event: DataRequestEvent) => void

const onDataRequest = (event: DataRequestEvent): void => { // Action code here } return ( <div> <Grid<DataItem> onDataRequest={onDataRequest}></Grid> </div> );
Replace dataStateChange with onDataRequest. Use DataRequestEvent. Fires on grid state changes (e.g., sorting, paging).

Event: actionFailure: (event: FailureEventArgs) => void

const actionFailure = (event: FailureEventArgs): void => { // Action code here } return ( <div> <GridComponent actionFailure={actionFailure}></GridComponent> </div> );

Event: onError: (event: Error) => void

const onError = (event: Error): void => { // Action code here } return ( <div> <Grid<DataItem> onError={onError}></Grid> </div> );
Replace actionFailure with onError. Use Error type. Fires on grid operation errors.

Event: onFilter: (event: FilterEvent) => void Not applicable

Event: onFilter: (event: FilterEvent) => void

const onFilter = (event: FilterEvent): void => { // Action code here } return ( <div> <Grid<DataItem> onFilter={onFilter}></Grid> </div> );
New event. Use FilterEvent. Fires after filtering completes.

Event: onFormRender: (event: FormRenderEvent<T>) => void Not applicable

Event: onFormRender: (event: FormRenderEvent<T>) => void

const onFormRender = (event: FormRenderEvent<DataItem>): void => { // Action code here } return ( <div> <Grid<DataItem> onFormRender={onFormRender}></Grid> </div> );
New event. Use FormRenderEvent<T>. Fires when edit/add form is rendered.

Event: created: (event: Object) => void

const created = (event: Object): void => { // Action code here } return ( <div> <GridComponent created={created}></GridComponent> </div> );

Event: onGridRenderComplete: ( ) => void

const onGridRenderComplete = (): void => { // Action code here } return ( <div> <Grid<DataItem> onGridRenderComplete={onGridRenderComplete}></Grid> </div> );
Replace created with onGridRenderComplete. No event args. Fires after grid rendering completes.

Event: load: (event: Object) => void

const load = (event: Object): void => { // Action code here } return ( <div> <GridComponent load={load}></GridComponent> </div> );

Event: onGridRenderStart: ( ) => void

const onGridRenderStart = (): void => { // Action code here } return ( <div> <Grid<DataItem> onGridRenderStart={onGridRenderStart}></Grid> </div> );
Replace load with onGridRenderStart. No event args. Fires before grid initialization.

Event: onPageChange: (event: PageEvent) => void Not applicable

Event: onPageChange: (event: PageEvent) => void

const onPageChange = (event: PageEvent): void => { // Action code here } return ( <div> <Grid<DataItem> onPageChange={onPageChange}></Grid> </div> );
New event. Use PageEvent. Fires after paging completes.

Event: onRefresh: ( ) => void Not applicable

Event: onRefresh: ( ) => void

const onRefresh = (): void => { // Action code here } return ( <div> <Grid<DataItem> onRefresh={onRefresh}></Grid> </div> );
New event. No args. Fires when grid data is refreshed.

Event: onRowAddStart: (event: RowAddEvent<T>) => void Not applicable

Event: onRowAddStart: (event: RowAddEvent<T>) => void

const onRowAddStart = (event: RowAddEvent<DataItem>): void => { // Action code here } return ( <div> <Grid<DataItem> onRowAddStart={onRowAddStart}></Grid> </div> );
New event. Use RowAddEvent<T>. Fires when row addition starts.

Event: rowDeselected: (event: RowDeselectEventArgs) => void

const rowDeselected = (event: RowDeselectEventArgs): void => { // Action code here } return ( <div> <GridComponent rowDeselected={rowDeselected}></GridComponent> </div> );

Event: onRowDeselect: (event: RowSelectEvent<T>) => void

const onRowDeselect = (event: RowSelectEvent<DataItem>): void => { // Action code here } return ( <div> <Grid<DataItem> onRowDeselect={onRowDeselect}></Grid> </div> );
Replace rowDeselected with onRowDeselect. Use RowSelectEvent<T>. Fires after row deselection.

Event: recordDoubleClick: (event: RecordDoubleClickEventArgs) => void

const recordDoubleClick = (event: RecordDoubleClickEventArgs): void => { // Action code here } return ( <div> <GridComponent recordDoubleClick={recordDoubleClick}></GridComponent> </div> );

Event: onRowDoubleClick: (event: RecordDoubleClickEvent<T>) => void

const onRowDoubleClick = (event: RecordDoubleClickEvent<DataItem>): void => { // Action code here } return ( <div> <Grid<DataItem> onRowDoubleClick={onRowDoubleClick}></Grid> </div> );
Replace recordDoubleClick with onRowDoubleClick. Use RecordDoubleClickEvent<T>. Fires on row double-click.

Event: onRowEditStart: (event: RowEditEvent<T>) => void Not applicable

Event: onRowEditStart: (event: RowEditEvent<T>) => void

const onRowEditStart = (event: RowEditEvent<DataItem>): void => { // Action code here } return ( <div> <Grid<DataItem> onRowEditStart={onRowEditStart}></Grid> </div> );
New event. Use RowEditEvent<T>. Fires when row editing starts.

Event: rowSelected: (event: RowSelectEventArgs) => void

const rowSelected = (event: RowSelectEventArgs): void => { // Action code here } return ( <div> <GridComponent rowSelected={rowSelected}></GridComponent> </div> );

Event: onRowSelect: (event: RowSelectEvent<T>) => void

const onRowSelect = (event: RowSelectEvent<DataItem>): void => { // Action code here } return ( <div> <Grid<DataItem> onRowSelect={onRowSelect}></Grid> </div> );
Replace rowSelected with onRowSelect. Use RowSelectEvent<T>. Fires after row selection.

Event: onSearch: (event: SearchEvent) => void Not applicable

Event: onSearch: (event: SearchEvent) => void

const onSearch = (event: SearchEvent): void => { // Action code here } return ( <div> <Grid<DataItem> onSearch={onSearch}></Grid> </div> );
New event. Use SearchEvent. Fires after search completion.

Event: onSort: (event: SortEvent) => void Not applicable

Event: onSort: (event: SortEvent) => void

const onSort = (event: SortEvent): void => { // Action code here } return ( <div> <Grid<DataItem> onSort={onSort}></Grid> </div> );
New event. Use SortEvent. Fires after sorting completes.

Event: toolbarClick: (event: ClickEventArgs) => void

const toolbarClick = (event: ClickEventArgs): void => { // Action code here } return ( <div> <GridComponent toolbarClick={toolbarClick}></GridComponent> </div> );

Event: onToolbarItemClick: (event: ToolbarClickEvent) => void

const onToolbarItemClick = (event: ToolbarClickEvent): void => { // Action code here } return ( <div> <Grid<DataItem> onToolbarItemClick={onToolbarItemClick}></Grid> </div> );
Replace toolbarClick with onToolbarItemClick. Use ToolbarClickEvent. Fires on toolbar item click.