Ej1 api migration in React Grid component

17 Mar 202524 minutes to read

This article describes the API migration process of Grid component from Essential® JS 1 to Essential® JS 2.

Sorting

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: allowSorting

<EJ.Grid allowSorting={true}>
</EJ.Grid> 		Property: allowSorting

<GridComponent allowSorting={true}>
</GridComponent>
Clear the Sorted columns Method: clearSorting()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.clearSorting(); 		Method: clearSorting()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.clearSorting()
Get the Sorted Columns by using the Fieldname Method: getsortColumnByField(field)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.getsortColumnByField("OrderID"); 		Property: sortSettings.columns

You can get a sorted column by iterating sortSettings.columns with fieldname
Remove the Sorted Columns Method: removeSortedColumns(fieldName)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.removeSortedColumns("OrderID"); 		Method: removeSortColumn(fieldName)

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.removeSortColumn("OrderID")
Sort a Column by using the method Method: sortColumn(columnName, [sortingDirection])

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.sortColumn("OrderID", "ascending"); 		Method: sortColumn(columnName, Direction)

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.sortColumn("OrderID", "ascending");

Grouping

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: allowGrouping

<EJ.Grid allowGrouping={true}>
</EJ.Grid> 		Property: allowGrouping

<GridComponent allowGrouping={true}>
</GridComponent>
Group Columns initially Property: groupSettings.groupedColumns

var groupSettings = { groupedColumns:["CustomerID"] };
<EJ.Grid allowGrouping={true}
groupSettings={groupSettings}>
</EJ.Grid> 		Property: groupSettings.columns

public groupSettings : Object = { columns: ['CustomerID'] };
<GridComponent allowGrouping={true}
groupSettings={this.groupSettings}>
</GridComponent>
Caption Template Property: groupSettings.captionFormat

var groupSettings = { captionFormat: "#template" };
<EJ.Grid allowGrouping={true}
groupSettings={groupSettings}>
</EJ.Grid> 		Property: groupSettings.captionTemplate

public groupSettings : Object = { captionTemplate: "#template" };
<GridComponent allowGrouping={true}
groupSettings={this.groupSettings}>
</GridComponent>
Show Drop Area Property: groupSettings.showDropArea

var groupSettings = { showDropArea: false };
<EJ.Grid allowGrouping={true}
groupSettings={groupSettings}>
</EJ.Grid> 		Property: groupSettings.showDropArea

public groupSettings : Object = { showDropArea: false };
<GridComponent allowGrouping={true}
groupSettings={this.groupSettings}>
</GridComponent>
Collapse all group caption rows Method: collapseAll()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.collapseAll(); 		Method: collapseAll()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.groupModule.collapseAll()
Expand all group caption rows Method: expandAll()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.expandAll(); 		Method: expandAll()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.groupModule.expandAll()
Expand or collapse the row based
on the row state in grid		 Method: expandCollapse($target)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.expandCollapse($("tr td.recordplusexpand > div").first()); 		Method: expandCollapseRows()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.groupModule.expandCollapseRows(
this.gridInstance.getContent().querySelectorAll('.e-recordplusexpand')[0])
Collapse the group drop area in grid Method: collapseGroupDropArea()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.collapseGroupDropArea(); 		Not Applicable
Expand the group drop area in grid Method: expandGroupDropArea()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.expandGroupDropArea(); 		Not Applicable
Group a column by using the method Method: groupColumn(fieldName)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.groupColumn("OrderID"); 		Method: groupColumn(fieldName)

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.groupColumn("OrderID")
Ungroup a grouped column by using the method Method: ungroupColumn(fieldName)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.ungroupColumn("OrderID"); 		Method: ungroupColumn(fieldName)

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.ungroupColumn("OrderID")

Filtering

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: allowFiltering

<EJ.Grid allowFiltering={true}>
</EJ.Grid> 		Property: allowFiltering

<GridComponent allowFiltering={true}>
</GridComponent>
Menu Filtering Property: filterSettings.filterType

var filterSettings = { filterType : "menu" };
<EJ.Grid allowFiltering={true}
filterSettings={filterSettings}>
</EJ.Grid> 		Property: filterSettings.type

public filterSettings : Object = { type:'Menu };
<GridComponent allowFiltering={true}
filterSettings={this.filterSettings}>
</GridComponent>
Excel Filtering Property: filterSettings.filterType

var filterSettings = { filterType : "excel" };
<EJ.Grid allowFiltering={true}
filterSettings={filterSettings}>
</EJ.Grid> 		Property: filterSettings.type

public filterSettings : Object = { type:'Excel };
<GridComponent allowFiltering={true}
filterSettings={this.filterSettings}>
</GridComponent>
Clear the Filtered values Method: clearFiltering(field) - field is optional

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.clearFiltering(); 		Method: clearFiltering()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.clearFiltering()
Filter a column by using the method Method: filterColumn(fieldName, filterOperator, filterValue,
predicate, [matchcase],[actualFilterValue])

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.filterColumn("OrderID",
"equal","10248","and", true); 		Method: filterByColumn(fieldName, filterOperator, filterValue, predicate, matchCase, ignoreAccent, actualFilterValue, actualOperator)

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.filterByColumn("OrderID","equal",10248)
Filter columns by Collection Method: filterColumn(filterCollection)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.filterColumn([{field:"OrderID",
 operator:"lessthan",value:"10266",
predicate:"and",matchcase:true},
 {field:"EmployeeID",operator:
 "equal",value:2,predicate:"and", matchcase:true}]) 		Property: filterSettings.columns

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.filterSettings:{columns: [{ field: 'ShipCity', matchCase: false, operator: 'startswith', predicate: 'and', value: 'reims' },
{ field: 'ShipCountry', matchCase: false, operator: 'startswith', predicate: 'and', value: 'France' }]}
Get the Filtered Records Method: getFilteredRecords()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.getFilteredRecords(); 		Not Applicable

Searching

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: toolbarSettings.toolbarItems

var toolbarSettings = { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Search] };
<EJ.Grid toolbarSettings={toolbarSettings}>
</EJ.Grid> 		Property: toolbar

public toolbar: Object = ['Search'];
<GridComponent toolbar={this.toolbar}
</GridComponent>
Clear the Searched values Method: clearSearching()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.clearSearching(); 		Method: searchModule.search()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.searchModule.search("");
Search a value Method: search(searchString)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.search("France"); 		Method: searchModule.search(searchString)

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.searchModule.search("France");

Paging

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: allowPaging

<EJ.Grid allowPaging={true}>
</EJ.Grid> 		Property: allowPaging

<GridComponent allowPaging={true}>
</GridComponent>
Customize Paging Property: pageSettings.pageSize

var pageSettings = { pageSize: 5 };
<EJ.Grid allowPaging={true}
pageSettings={pageSettings}>
</EJ.Grid> 		Property: pageSettings.pageSize

public pageSettings: Object = {pageSize = 5,pageSizes: [10,15]};
<GridComponent allowPaging={true}
pageSettings={this.pageSettings}>
</GridComponent>
Change Page Size Method: changePageSize(pageSize)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.changePageSize(7); 		Property: pageSettings.pageSize

Pagesize can be modified by using the below code
public pageSettings: Object = {pageSize = 7};
<GridComponent allowPaging={true}
pageSettings={this.pageSettings}>
</GridComponent>
Get Current Page Index Method: getCurrentIndex()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.getCurrentIndex(); 		Property: pageSettings.currentPage

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
var currentPage = this.gridInstance.pageSettings.currentPage;
Get Pager Element Method: getPager()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.getPager(); 		Method: getPager()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.getPager();
Send a paging request to specified Page Method: gotoPage(pageIndex)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.gotoPage(3); 		Method: gotoPage(pageIndex)

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.gotoPage(3);
Calculate Pagesize of grid by using its Parent height(containerHeight) Method: calculatePageSizeBy
ParentHeight(containerHeight)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.
calculatePageSizeByParentHeight(400); 		Not Applicable

Selection

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: allowSelection

<EJ.Grid allowSelection={true}>
</EJ.Grid> 		Property: allowSelection

<GridComponent allowSelection={true}>
</GridComponent>
Single Selection Property: selectionType

<EJ.Grid allowSelection={true}
selectionType="single">
</EJ.Grid> 		Property: selectionSettings.type

public selectionSettings : Object = { type : "Single" };
<GridComponent allowSelection={true}
selectionSettings={this.selectionSettings}>
</GridComponent>
Multiple Selection Property: selectionType

<EJ.Grid allowSelection={true}
selectionType="multiple">
</EJ.Grid> 		Property: selectionSettings.type

public selectionSettings : Object = { type : "Multiple" };
<GridComponent allowSelection={true}
selectionSettings={this.selectionSettings}>
</GridComponent>
Row Selection Property: selectionSettings.selectionMode

var selectionSettings = { selectionMode: ["row"] };
<EJ.Grid allowSelection={true}
selectionSettings={selectionSettings}>
</EJ.Grid> 		Property: selectionSettings.mode

public selectionSettings: Object = { mode: 'Row' };
<GridComponent allowSelection={true}
selectionSettings={this.selectionSettings}>
</GridComponent>
Cell Selection Property: selectionSettings.selectionMode

var selectionSettings = { selectionMode: ["cell"] };
<EJ.Grid allowSelection={true}
selectionSettings={selectionSettings}>
</EJ.Grid> 		Property: selectionSettings.mode

public selectionSettings: Object = { mode: 'Cell' };
<GridComponent allowSelection={true}
selectionSettings={this.selectionSettings}>
</GridComponent>
Clear the selected Cells Method: clearCellSelection()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.clearCellSelection(); 		Method: clearCellSelection()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.selectionModule.clearCellSelection()
Clear the selected Columns Method: clearColumnSelection([index]) - index is optional

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.clearColumnSelection(); 		Not Applicable
Get the selected Records Method: getSelectedRecords()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.getSelectedRecords(); 		Method: getSelectedRecords()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.getSelectedRecords();
Get the selected Rows Method: getSelectedRows()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.getSelectedRows(); 		Method: getSelectedRows()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.getSelectedRows();
Select Cells Method: selectCells(rowCellIndexes)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.selectCells([[1, [4, 3, 2]]]); 		Method: selectionModule.selectCells(rowCellIndexes);

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.selectionModule.selectCells([{ rowIndex: 0, cellIndexes: [0] }, { rowIndex: 1, cellIndexes: [1] }]);;
Select Rows Method: selectRows(fromIndex, toIndex)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.selectRows(1, 4); 		Method: selectionModule.selectRows(rowIndexes)

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.selectionModule.selectRows([0, 2])
Triggers when a
cell is selected		 Event: cellSelected

<EJ.Grid cellSelected={cellSelected}>
</EJ.Grid>
function cellSelected (args){} 		Event: cellSelected

<GridComponent cellSelected ={cellSelected}>
</GridComponent>
function cellSelected (args){}
Triggers before the cell is being selected Event: cellSelecting

<EJ.Grid cellSelecting={cellSelecting}>
</EJ.Grid>
function cellSelecting (args){} 		Event: cellSelecting

<GridComponent cellSelecting ={cellSelecting}>
</GridComponent>
function cellSelecting (args){}
Triggers when a
cell is deselected		 Event: cellDeselected

<EJ.Grid cellDeselected={cellDeselected}>
</EJ.Grid>
function cellDeselected (args){} 		Event: cellDeselected

<GridComponent cellDeselected ={cellDeselected}>
</GridComponent>
function cellDeselected (args){}
Triggers before the cell is being deselected Event: cellDeselecting

<EJ.Grid cellDeselecting={cellDeselecting}>
</EJ.Grid>
function cellDeselecting (args){} 		Event: cellDeselecting

<GridComponent cellDeselecting ={cellDeselecting}>
</GridComponent>
function cellDeselecting (args){}
Triggers when the
row is selected		 Event: rowSelected

<EJ.Grid rowSelected={rowSelected}>
</EJ.Grid>
function rowSelected (args){} 		Event: rowSelected

<GridComponent rowSelected ={rowSelected}>
</GridComponent>
function rowSelected (args){}
Triggers before the row is being selected Event: rowSelecting

<EJ.Grid rowSelecting={rowSelecting}>
</EJ.Grid>
function rowSelecting (args){} 		Event: rowSelecting

<GridComponent rowSelecting ={rowSelecting}>
</GridComponent>
function rowSelecting (args){}
Triggers when the
row is deselected		 Event: rowDeselected

<EJ.Grid rowDeselected={rowDeselected}>
</EJ.Grid>
function rowDeselected (args){} 		Event: rowDeselected

<GridComponent rowDeselected ={rowDeselected}>
</GridComponent>
function rowDeselected (args){}
Triggers before the row is being deselected Event: rowDeselecting

<EJ.Grid rowDeselecting={rowDeselecting}>
</EJ.Grid>
function rowDeselecting (args){} 		Event: rowDeselecting

<GridComponent rowDeselecting ={rowDeselecting}>
</GridComponent>
function rowDeselecting (args){}
Triggers when the column is selected Event: columnSelected

<EJ.Grid columnSelected={columnSelected}>
</EJ.Grid>
function columnSelected (args){} 		Not Applicable
Triggers before the column is being selected Event: columnSelecting

<EJ.Grid columnSelecting={columnSelecting}>
</EJ.Grid>
function columnSelecting (args){} 		Not Applicable
Triggers when the column is deselected Event: columnDeselected

<EJ.Grid columnDeselected={columnDeselected}>
</EJ.Grid>
function columnDeselected (args){} 		Not Applicable
Triggers before the column is being deselected Event: columnDeselecting

<EJ.Grid columnDeselecting={columnDeselecting}>
</EJ.Grid>
function columnDeselecting (args){} 		Not Applicable

Editing

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: editSettings

var editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
<EJ.Grid editSettings={editSettings}>
</EJ.Grid> 		Property: editSettings

public editSettings: Object = { allowEditing: true, allowAdding: true, allowDeleting: true };
<GridComponent allowSelection={true}
editSettings={this.editSettings}>
</GridComponent>
Inline Editing Property: editSettings.editMode

var editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, editMode : "normal" };
<EJ.Grid editSettings={editSettings}>
</EJ.Grid> 		Property: editSettings.mode

public editSettings: Object = { allowEditing: true, allowAdding: true, allowDeleting: true, mode : "Normal" };
<GridComponent allowSelection={true}
editSettings={this.editSettings}>
</GridComponent>
Dialog Editing Property: editSettings.editMode

var editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, editMode : "dialog" };
<EJ.Grid editSettings={editSettings}>
</EJ.Grid> 		Property: editSettings.mode

public editSettings: Object = { allowEditing: true, allowAdding: true, allowDeleting: true, mode : "Dialog" };
<GridComponent allowSelection={true}
editSettings={this.editSettings}>
</GridComponent>
Batch Editing Property: editSettings.editMode

var editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, editMode : "batch" };
<EJ.Grid editSettings={editSettings}>
</EJ.Grid> 		Property: editSettings.mode

public editSettings: Object = { allowEditing: true, allowAdding: true, allowDeleting: true, mode : "Batch" };
<GridComponent allowSelection={true}
editSettings={this.editSettings}>
</GridComponent>
Add a new Record Method: addRecord([data,[serverChange]])

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.addRecord({"OrderID":12333}); 		Method: addRecord(data(optional), rowIndex(optional))

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.addRecord({OrderID:10000});
Batch Cancel Method: batchCancel()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.batchCancel(); 		Not Applicable
Batch Save Method: batchSave()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.batchSave(); 		Method: editModule.batchSave()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.editModule.batchSave()
Save a Cell - If preventSaveEvent is true, then it
will prevent the client side cellSave event		 Method: saveCell([preventSaveEvent])

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.saveCell(); 		Method: editModule.saveCell()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.editModule.saveCell()
End Edit Method: endEdit()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.endEdit(); 		Method: endEdit()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.endEdit()
Cancel Edit Method: cancelEdit()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.cancelEdit(); 		Method: closeEdit()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.closeEdit()
Delete Record Method: deleteRecord(fieldName, data)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.deleteRecord("OrderID", { OrderID: 10249, EmployeeID: 3 }); 		Method: deleteRecord(field, data)- Field and
* data are optional*

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.deleteRecord()
Delete Row Method: deleteRow($tr)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.deleteRow($(".gridcontent tr").first()); 		Method: deleteRow(tr)

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.deleteRow(this.gridInstance.getContentTable()
.querySelector("tbody").firstChild)
Edit a cell in Batch edit mode Method: editCell(index, fieldName)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.editCell(2, "OrderID"); 		Method: editModule.editCell()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.editModule.editCell(0,gridObj
.columns[0].field)
Edit Form Validation Method: editFormValidate()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.editFormValidate(); 		Method: editModule.formObj.validate()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.editModule.formObj.validate()
Get Batch Changes Method: getBatchChanges()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.getBatchChanges(); 		Method: editModule.getBatchChanges()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.editModule.getBatchChanges()
Refresh Batch Edit Changes Method: refreshBatchEditChanges()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.refreshBatchEditChanges(); 		Not Applicable
Set Default Data for adding Method: setDefaultData(defaultData)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
var defaultData = {OrderID:"10000"};
gridObj.setDefaultData(defaultData); 		Method: editModule.addRecord(data)-data is optional

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.editModule.addRecord({OrderID:10000})
Start Edit Method: startEdit($tr)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.startEdit($(".gridcontent tr").first()); 		Method: startEdit()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.startEdit(gridObj.selectRow(0))
Update Record Method: updateRecord(fieldName, data)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.updateRecord("OrderID", { OrderID: 10249, EmployeeID: 3 }); 		Not Applicable
Set Cell value Method: setCellText(rowIndex, cellIndex, value)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.setCellText(0, 1, "France"); 		Method: setCellValue(key, field, value)

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.setCellValue(10248,"CustomerID","A")
Get Currently edited cell value Method: getCurrentEditCellData()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.getCurrentEditCellData(); 		Method: editModule.getCurrentEditCellData()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.
editModule.getCurrentEditCellData();
Triggers when adding a
record in batch editing		 Event: batchAdd

<EJ.Grid batchAdd={batchAdd}>
</EJ.Grid>
function batchAdd (args){} 		Event: batchAdd

<GridComponent batchAdd ={batchAdd}>
</GridComponent>
function batchAdd (args){}
Triggers when deleting a
record in batch editing		 Event: batchDelete

<EJ.Grid batchDelete={batchDelete}>
</EJ.Grid>
function batchDelete (args){} 		Event: batchDelete

<GridComponent batchDelete ={batchDelete}>
</GridComponent>
function batchDelete (args){}
Triggers before adding a record in batch editing Event: beforeBatchAdd

<EJ.Grid beforeBatchAdd={beforeBatchAdd}>
</EJ.Grid>
function beforeBatchAdd (args){} 		Event: beforeBatchAdd

<GridComponent beforeBatchAdd ={beforeBatchAdd}>
</GridComponent>
function beforeBatchAdd (args){}
Triggers before deleting a record in batch editing Event: beforeBatchDelete

<EJ.Grid beforeBatchDelete={beforeBatchDelete}>
</EJ.Grid>
function beforeBatchDelete (args){} 		Event: beforeBatchDelete

<GridComponent beforeBatchDelete ={beforeBatchDelete}>
</GridComponent>
function beforeBatchDelete (args){}
Triggers before saving a record in batch editing Event: beforeBatchSave

<EJ.Grid beforeBatchSave={beforeBatchSave}>
</EJ.Grid>
function beforeBatchSave (args){} 		Event: beforeBatchSave

<GridComponent beforeBatchSave ={beforeBatchSave}>
</GridComponent>
function beforeBatchSave (args){}
Triggers before the
record in being edited		 Event: beginEdit

<EJ.Grid beginEdit={beginEdit}>
</EJ.Grid>
function beginEdit (args){} 		Event: beginEdit

<GridComponent beginEdit ={beginEdit}>
</GridComponent>
function beginEdit (args){}
Triggers when the
cell is being edited		 Event: cellEdit

<EJ.Grid cellEdit={cellEdit}>
</EJ.Grid>
function cellEdit (args){} 		Event: cellEdit

<GridComponent cellEdit ={cellEdit}>
</GridComponent>
function cellEdit (args){}
Triggers when the
cell is saved		 Event: cellSave

<EJ.Grid cellSave={cellSave}>
</EJ.Grid>
function cellSave (args){} 		Event: cellSave

<GridComponent cellSave ={cellSave}>
</GridComponent>
function cellSave (args){}
Triggers when the record is added Event: endAdd

<EJ.Grid endAdd={endAdd}>
</EJ.Grid>
function endAdd (args){} 		Event: actionComplete

<GridComponent actionComplete ={actionComplete}>
</GridComponent>
function actionComplete (args){}
Triggers when the record is deleted Event: endDelete

<EJ.Grid endDelete={endDelete}>
</EJ.Grid>
function endDelete (args){} 		Event: actionComplete

<GridComponent actionComplete ={actionComplete}>
</GridComponent>
function actionComplete (args){}
Triggers when the record is edited Event: endEdit

<EJ.Grid endEdit={endEdit}>
</EJ.Grid>
function endEdit (args){} 		Event: actionComplete

<GridComponent actionComplete ={actionComplete}>
</GridComponent>
function actionComplete (args){}

Resizing

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: allowResizing

<EJ.Grid allowResizing={true}>
</EJ.Grid> 		Property: allowResizing

<GridComponent allowResizing={true}>
</GridComponent>
Resize a column by using the method Method: resizeColumns(column,width)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.resizeColumns("OrderID",'150'); 		Property: columns.width

To resize a column, set width to that particular column and then refresh the grid by using the refresh method.
<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.columns[1].width = 100;
this.gridInstance.refresh();
Triggers when a column resize starts Event: resizeStart

<EJ.Grid resizeStart={resizeStart}>
</EJ.Grid>
function resizeStart (args){} 		Event: resizeStart

<GridComponent resizeStart ={resizeStart}>
</GridComponent>
function resizeStart (args){}
Triggers when a column is resized Event: resized

<EJ.Grid resized={resized}>
</EJ.Grid>
function resized (args){} 		Event: resizeStop

<GridComponent resizeStop ={resizeStop}>
</GridComponent>
function resizeStop (args){}
Triggers when a column resize stops Event: resizeEnd

<EJ.Grid resizeEnd={resizeEnd}>
</EJ.Grid>
function resizeEnd (args){} 		Not Applicable

Reordering

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: allowReordering

<EJ.Grid allowReordering={true}>
</EJ.Grid> 		Property: allowReordering

<GridComponent allowReordering={true}>
</GridComponent>
Reorder Columns Method: reorderColumns(fromFieldName, toFieldName)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.reorderColumns("OrderID", "CustomerID"); 		Method: reorderColumns(fromFieldName, toFieldName)

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.reorderColumns("OrderID", "CustomerID");
Reorder Rows Method: reorderRows(indexes, toIndex)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.reorderRows([0,1],3); 		Not Applicable

Context Menu

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: contextMenuSettings.enableContextMenu

var contextMenuSettings = { enableContextMenu : true };
<EJ.Grid
contextMenuSettings={contextMenuSettings}>
</EJ.Grid> 		Property: contextMenuItems

public contextMenuItems : Object = {'AutoFit', 'AutoFitAll'};
<GridComponent
contextMenuItems={this.contextMenuItems}>
</GridComponent>
Triggers when context menu item is clicked Event: contextClick

<EJ.Grid contextClick={contextClick}>
</EJ.Grid>
function contextClick (args){} 		Event: contextMenuClick

<GridComponent contextMenuClick ={contextMenuClick}>
</GridComponent>
function contextMenuClick (args){}
Triggers when context menu opens Event: contextOpen

<EJ.Grid contextOpen={contextOpen}>
</EJ.Grid>
function contextOpen (args){} 		Event: contextMenuOpen

<GridComponent contextMenuOpen ={contextMenuOpen}>
</GridComponent>
function contextMenuOpen (args){}

Toolbar

Behavior API in Essential® JS 1 API in Essential® JS 2
Print Property: toolbarSettings.toolbarItems

var toolbarSettings = { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Print] };
<EJ.Grid toolbarSettings={toolbarSettings}>
</EJ.Grid> 		Property: toolbar

public toolbar: Object = ['Print'];
<GridComponent toolbar={this.toolbar}
</GridComponent>
Add Property: toolbarSettings.toolbarItems

var toolbarSettings = { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add] };
<EJ.Grid toolbarSettings={toolbarSettings}>
</EJ.Grid> 		Property: toolbar

public toolbar: Object = ['Add'];
<GridComponent toolbar={this.toolbar}
</GridComponent>
Edit Property: toolbarSettings.toolbarItems

var toolbarSettings = { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Edit] };
<EJ.Grid toolbarSettings={toolbarSettings}>
</EJ.Grid> 		Property: toolbar

public toolbar: Object = ['Edit'];
<GridComponent toolbar={this.toolbar}
</GridComponent>
Delete Property: toolbarSettings.toolbarItems

var toolbarSettings = { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Delete] };
<EJ.Grid toolbarSettings={toolbarSettings}>
</EJ.Grid> 		Property: toolbar

public toolbar: Object = ['Delete'];
<GridComponent toolbar={this.toolbar}
</GridComponent>
Update Property: toolbarSettings.toolbarItems

var toolbarSettings = { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Update] };
<EJ.Grid toolbarSettings={toolbarSettings}>
</EJ.Grid> 		Property: toolbar

public toolbar: Object = ['Update'];
<GridComponent toolbar={this.toolbar}
</GridComponent>
Cancel Property: toolbarSettings.toolbarItems

var toolbarSettings = { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Cancel] };
<EJ.Grid toolbarSettings={toolbarSettings}>
</EJ.Grid> 		Property: toolbar

public toolbar: Object = ['Cancel'];
<GridComponent toolbar={this.toolbar}
</GridComponent>
ExcelExport Property: toolbarSettings.toolbarItems

var toolbarSettings = { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.ExcelExport] };
<EJ.Grid toolbarSettings={toolbarSettings}>
</EJ.Grid> 		Property: toolbar

public toolbar: Object = ['ExcelExport'];
<GridComponent toolbar={this.toolbar}
</GridComponent>
WordExport Property: toolbarSettings.toolbarItems

var toolbarSettings = { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.WordExport] };
<EJ.Grid toolbarSettings={toolbarSettings}>
</EJ.Grid> 		Not Applicable
PdfExport Property: toolbarSettings.toolbarItems

var toolbarSettings = { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.PdfExport] };
<EJ.Grid toolbarSettings={toolbarSettings}>
</EJ.Grid> 		Property: toolbar

public toolbar: Object = ['PdfExport'];
<GridComponent toolbar={this.toolbar}
</GridComponent>
Refresh Toolbar Method: refreshToolbar()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.refreshToolbar(); 		Not Applicable
Triggers when toolbar item is clicked Event: toolbarClick

<EJ.Grid toolbarClick={toolbarClick}>
</EJ.Grid>
function toolbarClick (args){} 		Event: toolbarClick

<GridComponent toolbarClick ={toolbarClick}>
</GridComponent>
function toolbarClick (args){}

GridLines

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: gridLines

<EJ.Grid gridLines='Default'>
</EJ.Grid> 		Property: gridLines

<GridComponent gridLines='Default'>
</GridComponent>

Templates

Behavior API in Essential® JS 1 API in Essential® JS 2
Detail Template Property: detailsTemplate

<EJ.Grid detailsTemplate : "#detailsTemplate">
</EJ.Grid> 		Property: detailTemplate

<GridComponent detailTemplate: '#detailTemplate'>
</GridComponent>
Row Template Property: rowTemplate

<EJ.Grid rowTemplate : "#rowTemplate">
</EJ.Grid> 		Property: rowTemplate

<GridComponent rowTemplate: '#rowtemplate'>
</GridComponent>
Refresh Template Method: refreshTemplate()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.refreshTemplate(); 		Not Applicable
Triggers when detail template row is clicked to collapse Event: detailsCollapse

<EJ.Grid detailsCollapse={detailsCollapse}>
</EJ.Grid>
function detailsCollapse (args){} 		Not Applicable
Triggers when detail template row is initialized Event: detailsDataBound

<EJ.Grid detailsDataBound={detailsDataBound}>
</EJ.Grid>
function detailsDataBound (args){} 		Not Applicable
Triggers when detail template
row is clicked to expand		 Event: detailsExpand

<EJ.Grid detailsExpand={detailsExpand}>
</EJ.Grid>
function detailsExpand (args){} 		Event: detailDataBound

<GridComponent detailDataBound ={detailDataBound}>
</GridComponent>
function detailDataBound (args){}
Triggers when refresh the template column elements in the Grid Event: templateRefresh

<EJ.Grid templateRefresh={templateRefresh}>
</EJ.Grid>
function templateRefresh (args){} 		Not Applicable

Row/Column Drag and Drop

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: allowRowDragAndDrop

<EJ.Grid allowRowDragAndDrop={true}>
</EJ.Grid> 		Property: allowRowDragAndDrop

<GridComponent allowRowDragAndDrop={true}
</GridComponent>
Triggers when the row is
being dragged		 Event: rowDrag

<EJ.Grid rowDrag={rowDrag}>
</EJ.Grid>
function rowDrag (args){} 		Event: rowDrag

<GridComponent rowDrag ={rowDrag}>
</GridComponent>
function rowDrag (args){}
Triggers when the row drag begins Event: rowDragStart

<EJ.Grid rowDragStart={rowDragStart}>
</EJ.Grid>
function rowDragStart (args){} 		Event: rowDragStart

<GridComponent rowDragStart ={rowDragStart}>
</GridComponent>
function rowDragStart (args){}
Triggers when the row is dropped Event: rowDrop

<EJ.Grid rowDrop={rowDrop}>
</EJ.Grid>
function rowDrop (args){} 		Event: rowDrop

<GridComponent rowDrop ={rowDrop}>
</GridComponent>
function rowDrop (args){}
Triggers before the row is being dropped Event: beforeRowDrop

<EJ.Grid beforeRowDrop={beforeRowDrop}>
</EJ.Grid>
function beforeRowDrop (args){} 		Not Applicable
Triggers when the
column is being dragged		 Event: columnDrag

<EJ.Grid columnDrag={columnDrag}>
</EJ.Grid>
function columnDrag (args){} 		Not Applicable
Triggers when the
column drag begins		 Event: columnDragStart

<EJ.Grid columnDragStart={columnDragStart}>
</EJ.Grid>
function columnDragStart (args){} 		Not Applicable
Triggers when the
column is dropped		 Event: columnDrop

<EJ.Grid columnDrop={columnDrop}>
</EJ.Grid>
function columnDrop (args){} 		Not Applicable

Frozen Rows and Columns

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: scrollSettings.frozenRows

var scrollSettings = {frozenRows:2,frozenColumns: 2}
<EJ.Grid allowScrolling={true}
scrollSettings={scrollSettings}>
</EJ.Grid> 		Property: frozenRows

<GridComponent frozenRows={2}
frozenColumns={2}>
</GridComponent>
isFrozen Property: columns.isFrozen

<EJ.Grid>
<columns>
<column field="CustomerID" isFrozen={true}/>
</columns>
</EJ.Grid> 		Property: columns.isFrozen

<GridComponent>
<ColumnsDirective>
<ColumnDirective field='CustomerID' isFrozen= {true}/>
</ColumnsDirective>
</GridComponent>

ForeignKey

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: columns.foreignKeyValue

<EJ.Grid>
<columns>
<column field="EmployeeID" foreignKeyField="EmployeeID", foreignKeyValue="FirstName",dataSource=window.employeeView/>
</columns>
</EJ.Grid> 		Property: columns.foreignKeyValue

<GridComponent>
<ColumnsDirective>
<ColumnDirective field='EmployeeID' foreignKeyValue= 'FirstName', dataSource= employeeData/>
</ColumnsDirective>
</GridComponent>

Auto Wrap

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: allowTextWrap

<EJ.Grid allowTextWrap={true}>
</EJ.Grid> 		Property: allowTextWrap

<GridComponent allowTextWrap={true}>
</GridComponent>
Both Property: textWrapSettings.wrapMode

var textWrapSettings= {wrapMode:"both"};
<EJ.Grid allowTextWrap={true}
textWrapSettings=textWrapSettings>
</EJ.Grid> 		Property: textWrapSettings.wrapMode

public textWrapSettings: Object = { wrapMode: 'Both' };
<GridComponent allowTextWrap={true} textWrapSettings={this.textWrapSettings}>
</GridComponent>
Header Property: textWrapSettings.wrapMode

var textWrapSettings= {wrapMode:"header"};
<EJ.Grid allowTextWrap={true}
textWrapSettings=textWrapSettings>
</EJ.Grid> 		Property: textWrapSettings.wrapMode

public textWrapSettings: Object = { wrapMode: 'Header' };
<GridComponent allowTextWrap={true} textWrapSettings={this.textWrapSettings}>
</GridComponent>
Content Property: textWrapSettings.wrapMode

var textWrapSettings= {wrapMode:"content"};
<EJ.Grid allowTextWrap={true}
textWrapSettings=textWrapSettings>
</EJ.Grid> 		Property: textWrapSettings.wrapMode

public textWrapSettings: Object = { wrapMode: 'Content' };
<GridComponent allowTextWrap={true} textWrapSettings={this.textWrapSettings}>
</GridComponent>

Responsive

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: isResponsive

<EJ.Grid isResponsive={true}>
</EJ.Grid> 		Not Applicable

State Persistence

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: enablepersistence

<EJ.Grid enablepersistence={true}>
</EJ.Grid> 		Property: enablepersistence

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

Right to Left - RTL

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: enableRTl

<EJ.Grid enableRTl={true}>
</EJ.Grid> 		Property: enableRTl

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

ToolTip

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: clipMode

var columns = [
{ field: "ShipCity",clipMode:
ej.Grid.ClipMode.EllipsisWithTooltip}
{ field: "ShipCountry",clipMode:
ej.Grid.ClipMode.Ellipsis}
{ field: "ShipName",clipMode:
ej.Grid.ClipMode.Clip}];
<EJ.Grid columns={columns}>
</EJ.Grid> 		Property: clipMode

<GridComponent>
<ColumnsDirective>
<ColumnDirective field='ShipCity' clipMode='EllipsisWithTooltip'/>
<ColumnDirective field='ShipCountry' clipMode='Ellipsis'/>
<ColumnDirective field='ShipName' clipMode='Clip'/>
</ColumnsDirective>
</GridComponent>

Aggregate/Summary

Behavior API in Essential® JS 1 API in Essential® JS 2
Footer Aggregate Property: showSummary

var summaryRows = [{
summaryColumns:[ { summaryType:
ej.Grid.SummaryType.Average,
displayColumn: "Freight",
dataMember: "Freight",
format: "{0:c2}",
prefix: "Average = "}]}];
<EJ.Grid showSummary={true} summaryRows={summaryRows}>
</EJ.Grid> 		Property: aggregates

<GridComponent>
<AggregatesDirective>
<AggregateDirective>
<AggregateColumnsDirective>
field='Freight'
type='Sum'
format='C2'
footerTemplate={this.footerSum}>
</AggregateColumnDirective>
</AggregateDirective>
</AggregatesDirective>
</GridComponent>
Caption Aggregate Property: showSummary

var summaryRows = [{
showCaptionSummary:true,
summaryColumns:[ { summaryType:
ej.Grid.SummaryType.Average,
displayColumn: "Freight",
dataMember: "Freight",
format: "{0:c2}",
prefix: "Average = "}],
showTotalSummary: false }];
<EJ.Grid showSummary={true} summaryRows={summaryRows}>
</EJ.Grid> 		Property: aggregates

<GridComponent>
<AggregatesDirective>
<AggregateDirective>
<AggregateColumnsDirective>
field='Freight'
type='Sum'
format='C2'
groupCaptionTemplate={this.groupcFootertMax}>
</AggregateColumnDirective>
</AggregateDirective>
</AggregatesDirective>
</GridComponent>
Get Summary values Method: getSummaryValues(summaryCol, summaryData)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.getSummaryValues(summaryCol, window.gridData); 		Not Applicable

Grid Export

Behavior API in Essential® JS 1 API in Essential® JS 2
Adds a grid model property which is
to be ignored on exporting grid		 Method: addIgnoreOnExport(propertyNames)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.addIgnoreOnExport("filterSettings"); 		Not Applicable

Columns

Behavior API in Essential® JS 1 API in Essential® JS 2
Add or Remove Columns Method: columns(columnDetails, [action])()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.columns("OrderID", "remove");
gridObj.columns("CustomerID", "add"); 		Property: columns

Grid is initially rendered with OrderID and CustomerId columns.Then if you want to add ShipAddress column, you have to reset the value for column property as gridObj.columns = [{field:"OrderID"}, {field:"CustomerId"}, {field:"ShipAddress"}]; Then to remove the CustomerId column, reset the column property as, gridObj.columns = [{field:"OrderID"}, {field:"ShipAddress"}];
Get Column By Field Method: getColumnByField(fieldName)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.getColumnByField("OrderID"); 		Method: getColumnByField(fieldName)

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.getColumnByField("OrderID")
Get Column By HeaderText Method: getColumnByHeaderText(headerText)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.getColumnByHeaderText("Order ID"); 		You can get the column object by iterating the gridObj.columns with the corresponding headerText
Get Column By Index Method: getColumnByIndex(columnIndex)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.getColumnByIndex(1); 		Method: getColumnByIndex(columnIndex)

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.getColumnByIndex(1)
Get Column Fieldnames Method: getColumnFieldNames()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.getColumnFieldNames(); 		Method: getColumnFieldNames()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.getColumnFieldNames()
Get Column Index By Field Method: getColumnIndexByField(fieldName)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.getColumnIndexByField("OrderID"); 		Method: getColumnIndexByField(fieldName)

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.getColumnIndexByField("OrderID");
Get Column Index By headerText Method: getColumnIndexByHeaderText(headerText, [field])

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.getColumnIndexByHeaderText("Order ID"); 		You can get the Column object with the index value by iterating the gridObj.columns with headerText
Set Width to columns Method: setWidthToColumns()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.setWidthToColumns(); 		Method: widthService.setWidthToColumns()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.widthService.setWidthToColumns()
Get HeaderText By FieldName Method: getHeaderTextByFieldName()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.getHeaderTextByFieldName("OrderID"); 		Not Applicable
Get Hidden Columnname Method: getHiddenColumnNames()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.getHiddenColumnNames(); 		Not Applicable
Get Visible Columnsname Method: getVisibleColumnNames()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.getVisibleColumnNames(); 		Method: getVisibleColumns()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.getVisibleColumns();
Select Columns Method: selectColumns(fromIndex)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.selectColumns(1); 		Not Applicable
Select the Specified Columns based on the index provided Method: selectColumns(columnIndex,[toIndex])

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.selectColumns(1,4); 		Not Applicable

Row

Behavior API in Essential® JS 1 API in Essential® JS 2
EnableHover Property: enableRowHover

<EJ.Grid enableRowHover={true}>
</EJ.Grid> 		Property: enableHover

<GridComponent enableHover={true}>
</GridComponent>
Get Row Height Method: getRowHeight()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.getRowHeight(); 		Method: getRowHeight()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.getRowHeight();
Refresh Row Height Method: rowHeightRefresh()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.rowHeightRefresh(); 		Not Applicable
Get index by Row Element Method: getIndexByRow($tr)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.getIndexByRow($(".gridcontent tr").first()); 		Not Applicable
Get Row by its Index Method: getRowByIndex(from, to)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.getRowByIndex(3, 6); 		Method: getRowByIndex(index)

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.getRowByIndex(1);
Get rendered rows Method: getRows()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.getRows(); 		Method: getRows()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.getRows();
Triggers while hover the grid row Event: rowHover

<EJ.Grid rowHover={rowHover}>
</EJ.Grid>
function rowHover (args){} 		Not Applicable

Show/Hide Columns

Behavior API in Essential® JS 1 API in Essential® JS 2
Hide Columns by using method Method: hideColumns(headerText)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.hideColumns("Order ID"); 		Method: hideColumns(headerText)

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.hideColumns("Order ID");
Show Columns by using method Method: showColumns(headerText)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.showColumns("Order ID"); 		Method: showColumns(headerText)

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.showColumns("Order ID");

Column Chooser

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: showColumnChooser

var columns = [
{ field: "ShipCity",
showInColumnChooser={false}}
{ field: "ShipCountry"}
<EJ.Grid showColumnChooser={true} columns={columns}>
</EJ.Grid> 		Property: showColumnChooser

<GridComponent showColumnChooser={true}>
<ColumnsDirective>
<ColumnDirective field='ShipCity' showInColumnChooser={false}/>
<ColumnDirective field='ShipCountry' showInColumnChooser={true}/>
</ColumnsDirective>
</GridComponent>
Behavior API in Essential® JS 1 API in Essential® JS 2
Refresh Header Method: refreshHeader()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.refreshHeader(); 		Method: refreshHeader()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.refreshHeader();
Triggers every time a request is made to access particular header cell information, element and data. Event: mergeHeaderCellInfo

<EJ.Grid mergeHeaderCellInfo={mergeHeaderCellInfo}>
</EJ.Grid>
function mergeHeaderCellInfo (args){} 		Not Applicable
Triggers every time a request is made to access particular cell information, element and data Event: mergeCellInfo

<EJ.Grid mergeCellInfo={mergeCellInfo}>
</EJ.Grid>
function mergeCellInfo (args){} 		Not Applicable

DataSource

Behavior API in Essential® JS 1 API in Essential® JS 2
DataSource Method: dataSource(newdatasource,[templateRefresh])

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.dataSource(newdataSource); 		Property: dataSource

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.datasource = newdataSource

Print

Behavior API in Essential® JS 1 API in Essential® JS 2
Print the grid Method: print()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.print(); 		Method: print()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.print();
Triggers before printing the grid Event: beforePrint

<EJ.Grid beforePrint={beforePrint}>
</EJ.Grid>
function beforePrint (args){} 		Event: beforePrint

<GridComponent beforePrint ={beforePrint}>
</GridComponent>
function beforePrint (args){}

Scrolling

Behavior API in Essential® JS 1 API in Essential® JS 2
Get ScrollObject Method: getScrollObject()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.getScrollObject(); 		Property: grid.scrollModule

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
var scrollObj = this.gridInstance.scrollModule;

PrimaryKey

Behavior API in Essential® JS 1 API in Essential® JS 2
Set PrimaryKey Column Property: columns.isPrimaryKey

var columns = [
{ field: "OrderID",
isPrimaryKey={true}}]
<EJ.Grid columns={columns}>
</EJ.Grid> 		Property: columns.isPrimaryKey

<GridComponent>
<ColumnsDirective>
<ColumnDirective field='OrderID' isPrimaryKey={true}/>
<ColumnDirective field='ShipCountry' />
</ColumnsDirective>
</GridComponent>
Get the PrimaryKey fieldnames Method: getPrimaryKeyFieldNames()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.getPrimaryKeyFieldNames(); 		Method:
getPrimaryKeyFieldNames()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.getPrimaryKeyFieldNames();

Grid

Behavior API in Essential® JS 1 API in Essential® JS 2
Get the Browser Details Method: getBrowserDetails()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.getBrowserDetails(); 		In Essential® JS 2, it can be
achieved by using Browser class of ej2-base
Set dimension for the grid Method: setDimension(height, width)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.setDimension(300,400); 		Not Applicable
set maximum width for mobile Method: setPhoneModeMaxWidth(value)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.setPhoneModeMaxWidth(500); 		Not Applicable
Render the grid Method: render()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.render(); 		Method: render()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.render();
Reset the model collections like pageSettings,
groupSettings, filterSettings, sortSettings and summaryRows.		 Method: resetModelCollections()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.resetModelCollections(); 		Not Applicable
Destroy the grid Method: destroy()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.destroy(); 		Method: destroy()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.destroy()
Get Content Element Method: getContent()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.getContent(); 		Method: getContent()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.getContent();
Get Content Table Method: getContentTable()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.getContentTable(); 		Method: getContentTable()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.getContentTable();
Get Current View Data Method: getCurrentViewData()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.getCurrentViewData(); 		Method: getCurrentViewRecords()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.getCurrentViewRecords();
Get Data Row Method: getDataByIndex(rowIndex)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.getDataByIndex(0); 		Method: getDataRows()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.getDataRows();
Get Fieldname by using the headertext Method: getFieldNameByHeaderText(headerText)

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.getFieldNameByHeaderText("Order ID"); 		Not Applicable
Get FooterContent Method: getFooterContent()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.getFooterContent(); 		Method: getFooterContent()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.getFooterContent();
Get FooterContent Table Method: getFooterTable()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.getFooterTable(); 		Method: getFooterContentTable()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.getFooterContentTable();
Get HeaderContent Method: getHeaderContent()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.getHeaderContent(); 		Method: getHeaderContent()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.getHeaderContent();
Get HeaderContent Table Method: getHeaderTable()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.getHeaderTable(); 		Method: getHeaderTable()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.getHeaderTable();
Refresh Content Method: refreshContent()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.refreshContent(); 		Method:
contentModule.refreshContentRows()

<GridComponent ref={ grid =>
this.gridInstance = grid}>
</GridComponent>
this.gridInstance.
contentModule.refreshContentRows();
Refresh Data Method: refreshData()

<EJ.Grid dataSource={window.gridData}>
</EJ.Grid>
var gridObj = $(".e-grid")
.ejGrid("instance");
gridObj.refreshData(); 		Not Applicable
Triggers every time a request is
made to access particular cell
information, element and data		 Event: queryCellInfo

<EJ.Grid queryCellInfo={queryCellInfo}>
</EJ.Grid>
function queryCellInfo (args){} 		Event: queryCellInfo

<GridComponent queryCellInfo ={queryCellInfo}>
</GridComponent>
function queryCellInfo (args){}
Triggers every time a request is
made to access row information,
element and data		 Event: rowDataBound

<EJ.Grid rowDataBound={rowDataBound}>
</EJ.Grid>
function rowDataBound (args){} 		Event: rowDataBound

<GridComponent rowDataBound ={rowDataBound}>
</GridComponent>
function rowDataBound (args){}
Triggers for every grid
action before it get started		 Event: actionBegin

<EJ.Grid actionBegin={actionBegin}>
</EJ.Grid>
function actionBegin (args){} 		Event: actionBegin

<GridComponent actionBegin ={actionBegin}>
</GridComponent>
function actionBegin (args){}
Triggers for every grid
action success event		 Event: actionComplete

<EJ.Grid actionComplete={actionComplete}>
</EJ.Grid>
function actionComplete (args){} 		Event: actionComplete

<GridComponent actionComplete ={actionComplete}>
</GridComponent>
function actionComplete (args){}
Triggers for every grid
server failure event		 Event: actionFailure

<EJ.Grid actionFailure={actionFailure}>
</EJ.Grid>
function actionFailure (args){} 		Event: actionFailure

<GridComponent actionFailure ={actionFailure}>
</GridComponent>
function actionFailure (args){}
Triggers when the grid is bound
with data during rendering		 Event: dataBound

<EJ.Grid dataBound={dataBound}>
</EJ.Grid>
function dataBound (args){} 		Event: dataBound

<GridComponent dataBound ={dataBound}>
</GridComponent>
function dataBound (args){}
Triggers when the grid is
going to destroy		 Event: destroy

<EJ.Grid destroy={destroy}>
</EJ.Grid>
function destroy (args){} 		Event: destroyed

<GridComponent destroyed ={destroyed}>
</GridComponent>
function destroyed (args){}
Triggers when initial load of the grid Event: load

<EJ.Grid load={load}>
</EJ.Grid>
function load (args){} 		Event: load

<GridComponent load ={load}>
</GridComponent>
function load (args){}
Triggers when the grid is rendered completely Event: create

<EJ.Grid create={create}>
</EJ.Grid>
function create (args){} 		Event: created

<GridComponent created ={created}>
</GridComponent>
function created (args){}
Triggers when the record is clicked Event: recordClick

<EJ.Grid recordClick={recordClick}>
</EJ.Grid>
function recordClick (args){} 		Not Applicable
Triggers when right clicked on grid element Event: rightClick

<EJ.Grid rightClick={rightClick}>
</EJ.Grid>
function rightClick (args){} 		Not Applicable
Triggers when the
record is double clicked		 Event: recordDoubleClick

<EJ.Grid recordDoubleClick={recordDoubleClick}>
</EJ.Grid>
function recordDoubleClick (args){} 		Event: recordDoubleClick

<GridComponent recordDoubleClick ={recordDoubleClick}>
</GridComponent>
function recordDoubleClick (args){}