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: clearCellSelection(): void
let grid;
const clearCellSelection = () => {
grid.clearCellSelection();
}
return (
<div>
<Button onClick={clearCellSelection}></Button>
<GridComponent ref={g => grid = g} selectionSettings={{ type: 'Cell' }}>
<Inject services={[Selection]}/>
</GridComponent>
</div>
);
| Methods: clearCellSelection(cells?: RowCellInfo[]): void const gridRef = useRef<GridRef<DataItem>>(null);
const clearCellSelection = () => {
gridRef.current?.clearCellSelection([
{ rowKey: 10248, fieldNames: ['OrderID'] },
{ rowKey: 10249, fieldNames: ['CustomerName'] }
]);
}
return (
<div>
<Button onClick={clearCellSelection}></Button>
<Grid<DataItem> ref={gridRef} selectionSettings={{ type: 'Cell' }}></Grid>
</div>
);
| Use useRef<GridRef<T>>. Remove <Inject services={[Selection]}/>. Method name and behavior unchanged; clears all cell 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: clearGrouping(): void let grid;
const clearGroup = () => {
grid.clearGrouping();
}
return (
<div>
<Button onClick={clearGroup}></Button>
<GridComponent ref={g => grid = g} allowGrouping={true} groupSettings={{ columns: ['CustomerID'] }}>
<Inject services={[Group]}/>
</GridComponent>
</div>
);
| Methods: clearGrouping(): void const gridRef = useRef<GridRef<DataItem>>(null);
const clearGroup = () => {
gridRef.current?.clearGrouping();
}
return (
<div>
<Button onClick={clearGroup}></Button>
<Grid<DataItem> ref={gridRef} groupSettings={{ enabled:true, columns: ['CustomerID'] }}></Grid>
</div>
);
| Use useRef<GridRef<T>>. Remove <Inject services={[Group]}/>.
No changes to name or behavior; clears all grouped 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: selectCell(cellIndex: IIndex, isToggle?: boolean): void let grid;
return (
<div>
<Button onClick={() => { grid.selectCell({ rowIndex: 1, cellIndex: 2 }); }}></Button>
<GridComponent ref={g => grid = g} selectionSettings={{ type: 'Cell' }}>
<Inject services={[Selection]}/>
</GridComponent>
</div>
);
| Methods: selectCell(rowKey: string | number, fieldName: string): void const gridRef = useRef<GridRef<DataItem>>(null);
return (
<div>
<Button onClick={() => { gridRef.current?.selectCell(10248, 'OrderID'); }}>Select Cell</Button>
<Grid<DataItem> ref={gridRef} selectionSettings={{ type: 'Cell' }}></Grid>
</div>
);
| Use useRef<GridRef<T>>. Remove <Inject services={[Selection]}/>.
Rename cellIndex to rowKey and fieldName. EJ2 uses row/column index; React uses row primary key and field name. |
Methods: selectCells(rowCellIndexes: ISelectedCell[]): void let grid;
return (
<div>
<Button onClick={() => { grid.selectCells([{ rowIndex: 1, cellIndex: 2 }, { rowIndex: 2, cellIndex: 1 }]); }}></Button>
<GridComponent ref={g => grid = g} selectionSettings={{ type: 'Cell' }}>
<Inject services={[Selection]}/>
</GridComponent>
</div>
);
| Methods: selectCells(cells: RowCellInfo[]): void const gridRef = useRef<GridRef<DataItem>>(null);
return (
<div>
<Button onClick={() => { gridRef.current?.selectCells([
{ rowKey: 10248, fieldNames: ['OrderID', 'CustomerName'] },
{ rowKey: 10249, fieldNames: ['Freight'] }
]); }}>Select Cells</Button>
<Grid<DataItem> ref={gridRef} selectionSettings={{ type: 'Cell' }}></Grid>
</div>
);
| Use useRef<GridRef<T>>. Remove <Inject services={[Selection]}/>.
Rename rowCellIndexes to cells. EJ2 uses row/column indexes; React uses row primary key and field names. |
Methods: selectCellsByRange(startIndex: IIndex, endIndex?: IIndex): void let grid;
return (
<div>
<Button onClick={() => { grid.selectCellsByRange({ rowIndex: 1, cellIndex: 1 }, { rowIndex: 3, cellIndex: 2 }); }}></Button>
<GridComponent ref={g => grid = g} selectionSettings={{ type: 'Cell' }}>
<Inject services={[Selection]}/>
</GridComponent>
</div>
);
| Methods: selectCellsByRange(start: CellIdentifier, end: CellIdentifier): void const gridRef = useRef<GridRef<DataItem>>(null);
return (
<div>
<Button onClick={() => { gridRef.current?.selectCellsByRange(
{ rowKey: 10248, fieldName: 'OrderID' },
{ rowKey: 10250, fieldName: 'Freight' }
); }}>Select Range</Button>
<Grid<DataItem> ref={gridRef} selectionSettings={{ type: 'Cell' }}></Grid>
</div>
);
| Use useRef<GridRef<T>>. Remove <Inject services={[Selection]}/>.
Rename startIndex/endIndex to start/end. EJ2 uses row/column indexes; React uses row primary key and field name. |
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. |
Methods: editCell(index: number, field: string): void let grid;
return (
<div>
<Button onClick={() => { grid.editCell(2, 'Freight'); }}></Button>
<GridComponent ref={g => grid = g} editSettings={{ mode: 'Batch' }}>
<Inject services={[Edit]}/>
</GridComponent>
</div>
);
| Methods: editCell(primaryKeyValue: string | number, field: string): void const gridRef = useRef<GridRef<DataItem>>(null);
return (
<div>
<Button onClick={() => { gridRef.current?.editCell(10248, 'Freight'); }}>Edit Cell</Button>
<Grid<DataItem> ref={gridRef} editSettings={{ mode: 'Cell' }}></Grid>
</div>
);
| Use useRef<GridRef<T>> for grid reference. Remove <Inject services={[Edit]}/>.
Ensure edit mode editSettings.mode='Cell'. |
Methods: groupColumn(columnName: string): void let grid;
return (
<div>
<Button onClick={() => { grid.groupColumn('CustomerName'); }}></Button>
<GridComponent ref={g => grid = g} allowGrouping={true}>
<Inject services={[Group]}/>
</GridComponent>
</div>
);
| Methods: groupColumn(fields: string[], isResetRequired?: boolean): void const gridRef = useRef<GridRef<DataItem>>(null);
return (
<div>
<Button onClick={() => { gridRef.current?.groupColumn(['CustomerName']); }}>Group Column</Button>
<Grid<DataItem> ref={gridRef} groupSettings={{ enabled:true }}></Grid>
</div>
);
| Use useRef<GridRef<T>>. Remove <Inject services={[Group]}/>. Rename columnName to fields (array). Behavior unchanged. |
Methods: ungroupColumn(columnName: string): void let grid;
return (
<div>
<Button onClick={() => { grid.ungroupColumn('CustomerID'); }}></Button>
<GridComponent ref={g => grid = g} allowGrouping={true} groupSettings={{ columns: ['CustomerID'] }}>
<Inject services={[Group]}/>
</GridComponent>
</div>
);
| Methods: ungroupColumn(fields: string[]): void const gridRef = useRef<GridRef<DataItem>>(null);
return (
<div>
<Button onClick={() => { gridRef.current?.ungroupColumn(['CustomerID']); }}>Ungroup Column</Button>
<Grid<DataItem> ref={gridRef} groupSettings={{ enabled:true, columns: ['CustomerID'] }}></Grid>
</div>
);
| Use useRef<GridRef<T>>. Remove <Inject services={[Group]}/>. Rename columnName to fields (array). Behavior unchanged. |
Methods: onExpandStateChange(rowIndex: number, rowData?: T): void Not applicable | Methods: onExpandStateChange(rowIndex: number, rowData?: T): void const gridRef = useRef<GridRef<DataItem>>(null);
const toggleExpand = () => {
gridRef.current?.onExpandStateChange(2, { OrderID: 10248, CustomerName: 'Nancy' });
}
return (
<div>
<Button onClick={toggleExpand}>Toggle Expand</Button>
<Grid<DataItem> ref={gridRef} isMasterDetail={true}></Grid>
</div>
);
| New method. Use useRef<GridRef<T>>. Remove <Inject services={[DetailRow]}/>. Toggles expansion state for a master row by rowIndex and optional rowData. |
Methods: openColumnChooser(x?: number, y?: number): void let grid;
return (
<div>
<Button onClick={() => { grid.openColumnChooser(100, 40); }}></Button>
<GridComponent ref={g => grid = g} showColumnChooser={true}>
<Inject services={[ColumnChooser]}/>
</GridComponent>
</div>
);
| Methods: openColumnChooser(x?: number, y?: number): void const gridRef = useRef<GridRef<DataItem>>(null);
const handleOpen = () => {
gridRef.current?.openColumnChooser(100, 40);
}
return (
<div>
<Button onClick={handleOpen}></Button>
<Grid<DataItem> ref={gridRef} showColumnChooser={true}></Grid>
</div>
);
| Use useRef<GridRef<T>>. Remove <Inject services={[ColumnChooser]}/>.
No changes to name or behavior. |