JavaScript
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Migration from Essential JS 1 in JavaScript Grid control

08 May 2023 / 33 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

var gridObj = new ej.Grid($("#Grid"), {
  allowSorting: true
});		 Property: allowSorting

let grid: Grid = new Grid({  allowSorting: true
});
gridObj.appendTo('#Grid');
Clear the Sorted columns Method: clearSorting()

var gridObj = $("#Grid").data("ejGrid");
gridObj.clearSorting();		 Method: clearSorting()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.clearSorting()
Get the Sorted Columns by using the Fieldname Method: getsortColumnByField(field)

var gridObj = $("#Grid").data("ejGrid");
gridObj.getsortColumnByField("OrderID");		 Property: sortSettings.columns

Sorted Column for a particular field can be get by iterating the sortSettings.columns with the fieldname
Remove the Sorted Columns Method: removeSortedColumns(fieldName)

var gridObj = $("#Grid").data("ejGrid");
gridObj.removeSortedColumns("OrderID");		 Method: removeSortColumn()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.removeSortColumn("OrderID")
Sort a Column by using the method Method: sortColumn(columnName, [sortingDirection])

var gridObj = $("#Grid").data("ejGrid");
gridObj.sortColumn("OrderID", "ascending");		 Method: sortColumn(columnName, Direction)

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.sortColumn("OrderID", "ascending");

Grouping

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

var gridObj = new ej.Grid($("#Grid"), {
  allowGrouping: true
});		 Property: allowGrouping

let grid: Grid = new Grid({
 allowGrouping: true
});
gridObj.appendTo('#Grid');
Group Columns initially Property: groupSettings.groupedColumns

var gridObj = new ej.Grid($("#Grid"), {
  allowGrouping: true,
  groupSettings: {
  groupedColumns:[“OrderID”, “CustomerID”]
   }
});		 Property: groupSettings.columns

let grid: Grid = new Grid({
 allowGrouping: true,
 groupSettings: {
 columns: [“OrderID”, “CustomerID”]
  }
});
gridObj.appendTo('#Grid');
Caption Template Property: groupSettings.captionFormat

var gridObj = new ej.Grid($("#Grid"), {
  allowGrouping: true,
  groupSettings: {
  captionFormat: "#template"
   }
});		 Property: groupSettings.captionTemplate

let grid: Grid = new Grid({
 allowGrouping: true,
 groupSettings: {
 captionTemplate: '#template'
  }
});
gridObj.appendTo('#Grid');
Show Drop Area Property: groupSettings.showDropArea

var gridObj = new ej.Grid($("#Grid"), {
  allowGrouping: true,
  groupSettings: {
  showDropArea: false
   }
});		 Property: groupSettings.showDropArea

let grid: Grid = new Grid({
 allowGrouping: true,
 groupSettings: {
 showDropArea: false
  }
});
gridObj.appendTo('#Grid');
Collapse all group caption rows Method: collapseAll()

var gridObj = $("#Grid").data("ejGrid");
gridObj.collapseAll();		 Method: collapseAll()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.groupModule.collapseAll()
Expand all group caption rows Method: expandAll()

var gridObj = $("#Grid").data("ejGrid");
gridObj.expandAll();		 Method: expandAll()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.groupModule.expandAll()
Expand or collapse the row based
on the row state in grid		 Method: expandCollapse($target)

var gridObj = $("#Grid").data("ejGrid");
gridObj.expandCollapse($("tr td.recordplusexpand > div").first());		 Method: expandCollapseRows()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.groupModule.expandCollapseRows(
gridObj.getContent().querySelectorAll('.e-recordplusexpand')[0]))
Collapse the group drop area in grid Method: collapseGroupDropArea()

var gridObj = $("#Grid").data("ejGrid");
gridObj.collapseGroupDropArea();		 Not Applicable
Expand the group drop area in grid Method: expandGroupDropArea()

var gridObj = $("#Grid").data("ejGrid");
gridObj.expandGroupDropArea();		 Not Applicable
Group a column by using the method Method: groupColumn(fieldName)

var gridObj = $("#Grid").data("ejGrid");
gridObj.groupColumn("OrderID");		 Method: groupColumn(fieldName)

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.groupColumn("OrderID")
Ungroup a grouped column by using the method Method: ungroupColumn(fieldName)

var gridObj = $("#Grid").data("ejGrid");
gridObj.ungroupColumn("OrderID");		 Method: ungroupColumn(fieldName)

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.ungroupColumn("OrderID")

Filtering

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

var gridObj = new ej.Grid($("#Grid"), {
  allowFiltering: true
});		 Property: allowFiltering

let grid: Grid = new Grid({
 allowFiltering: true
});
gridObj.appendTo('#Grid');
Menu Filtering Property: filterSettings.filterType

var gridObj = new ej.Grid($("#Grid"), {
  allowFiltering: true,
  filterSettings: {
  filterType : "menu"
   }
});		 Property: filterSettings.type

let grid: Grid = new Grid({
 allowFiltering: true,
 filterSettings: {
 type:'Menu'
  }
});
gridObj.appendTo('#Grid');
Excel Filtering Property: filterSettings.filterType

var gridObj = new ej.Grid($("#Grid"), {
  allowFiltering: true,
 filterSettings: {
  filterType : "excel"
   }
});		 Property: filterSettings.type

let grid: Grid = new Grid({
 allowFiltering: true,
 filterSettings: {
 type:'Excel'
  }
});
gridObj.appendTo('#Grid');
Clear the Filtered values Method: clearFiltering(field) - field is optional

var gridObj = $("#Grid").data("ejGrid");
gridObj.clearFiltering();		 Method: clearFiltering()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.clearFiltering()
Filter a column by using the method Method: filterColumn(fieldName, filterOperator, filterValue,
predicate, [matchcase],[actualFilterValue])

var gridObj = $("#Grid").data("ejGrid");
gridObj.filterColumn("OrderID",
"equal","10248","and", true);		 Method: filterByColumn(fieldName, filterOperator, filterValue, predicate, matchCase, ignoreAccent, actualFilterValue, actualOperator)

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.filterByColumn("OrderID","equal",10248)
Filter columns by Collection Method: filterColumn(filterCollection)

var gridObj = $("#Grid").data("ejGrid");
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

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.filterSettings:{columns: [{ field: 'ShipCity', matchCase: false, operator: 'startswith', predicate: 'and', value: 'reims' }]}
Get the Filtered Records Method: getFilteredRecords()

var gridObj = $("#Grid").data("ejGrid");
gridObj.getFilteredRecords();		 Not Applicable

Searching

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

var gridObj = new ej.Grid($("#Grid"), {
  showToolbar: true, toolbarItems : ["search"]
  allowSearching : true
});		 Property: toolbar

let grid: Grid = new Grid({
 toolbar: ['Search']
});
gridObj.appendTo('#Grid');
Clear the Searched values Method: clearSearching()

var gridObj = $("#Grid").data("ejGrid");
gridObj.clearSearching();		 Method: searchModule.search()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.searchModule.search("");
Search a value Method: search(searchString)

var gridObj = $("#Grid").data("ejGrid");
gridObj.search("France");		 Method: searchModule.search()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.searchModule.search("France");

Paging

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

var gridObj = new ej.Grid($("#Grid"), {
  allowPaging: true
});		 Property: allowPaging

let grid: Grid = new Grid({  allowPaging: true
});
gridObj.appendTo('#Grid');
Customize Paging Property: pageSettings.pageSize

var gridObj = new ej.Grid($("#Grid"), {
  allowPaging: true,
 pageSettings: {
  pageSize: 8,pageSizeList: [5, 10],pageCount:3
  }
});		 Property: pageSettings.pageSize

let grid: Grid = new Grid({
 allowPaging: true,
 pageSettings: {
 pageSize:8,pageSizes: [5, 10]
  }
});
gridObj.appendTo('#Grid');
Change Page Size Method: changePageSize(pageSize)

var gridObj = $("#Grid").data("ejGrid");
gridObj.changePageSize(7);		 Property: pageSettings.pageSize

Pagesize can be modified dynamically by using the below code
pageSettings.pageSize = 7;
Get Current Page Index Method: getCurrentIndex()

var gridObj = $("#Grid").data("ejGrid");
gridObj.getCurrentIndex();		 Property: pageSettings.currentPage

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.pageSettings.currentPage;
Get Pager Element Method: getPager()

var gridObj = $("#Grid").data("ejGrid");
gridObj.getPager();		 Method: getPager()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.getPager();
Send a paging request to specified Page Method: gotoPage(pageIndex)

var gridObj = $("#Grid").data("ejGrid");
gridObj.gotoPage(3);		 Method: gotoPage(pageIndex)

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.gotoPage(3);
Calculate Pagesize of grid by using its Parent height(containerHeight) Method: calculatePageSizeBy
ParentHeight(containerHeight)

var gridObj = $("#Grid").data("ejGrid");
gridObj.
calculatePageSizeByParentHeight(400);		 Not Applicable

Selection

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

var gridObj = new ej.Grid($("#Grid"), {
  allowSelection: true
});		 Property: allowSelection

let grid: Grid = new Grid({
allowSelection: true
});
gridObj.appendTo('#Grid');
Single Selection Property: selectionType

var gridObj = new ej.Grid($("#Grid"), {
  allowSelection: true,
 selectionType : "single"
  });		 Property: selectionSettings.type

let grid: Grid = new Grid({
 allowSelection: true,
 selectionSettings: {
 type : "Single"
  }
});
gridObj.appendTo('#Grid');
Multiple Selection Property: selectionType

var gridObj = new ej.Grid($("#Grid"), {
  allowSelection: true,
 selectionType : "multiple"
  });		 Property: selectionSettings.type

let grid: Grid = new Grid({
 allowSelection: true,
 selectionSettings: {
 type : "Multiple"
  }
});
gridObj.appendTo('#Grid');
Row Selection Property: selectionSettings.selectionMode

var gridObj = new ej.Grid($("#Grid"), {
  allowSelection: true,
  selectionSettings : {selectionMode: ["row"]}
  });		 Property: selectionSettings.mode

let grid: Grid = new Grid({
 allowSelection: true,
 selectionSettings: {
 mode: 'Row'
  }
});
gridObj.appendTo('#Grid');
Cell Selection Property: selectionSettings.selectionMode

var gridObj = new ej.Grid($("#Grid"), {
  allowSelection: true,
  selectionSettings : {selectionMode: ["cell"]}
  });		 Property: selectionSettings.mode

let grid: Grid = new Grid({
 allowSelection: true,
 selectionSettings: {
 mode: 'Cell'
  }
});
gridObj.appendTo('#Grid');
Clear the selected Cells Method: clearCellSelection()

var gridObj = $("#Grid").data("ejGrid");
gridObj.clearCellSelection();		 Method: clearCellSelection()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.selectionModule.clearCellSelection()
Clear the selected Columns Method: clearColumnSelection([index]) - index is optional

var gridObj = $("#Grid").data("ejGrid");
gridObj.clearColumnSelection();		 Not Applicable
Get the selected Records Method: getSelectedRecords()

var gridObj = $("#Grid").data("ejGrid");
gridObj.getSelectedRecords();		 Method: getSelectedRecords()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.getSelectedRecords();
Get the selected Rows Method: getSelectedRows()

var gridObj = $("#Grid").data("ejGrid");
gridObj.getSelectedRows();		 Method: getSelectedRows()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.getSelectedRows();
Select Cells Method: selectCells(rowCellIndexes)

var gridObj = $("#Grid").data("ejGrid");
gridObj.selectCells([[1, [4, 3, 2]]]);		 Method: selectionModule.selectCells();

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.selectionModule.selectCells([{ rowIndex: 0, cellIndexes: [0] }, { rowIndex: 1, cellIndexes: [1] }]);;
Select Rows Method: selectRows(fromIndex, toIndex)

var gridObj = $("#Grid").data("ejGrid");
gridObj.selectRows(1, 4);		 Method: selectionModule.selectRows()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.selectionModule.selectRows([0, 2])
Triggers when a
cell is selected		 Event: cellSelected

var gridObj = new ej.Grid($("#Grid"), {
  cellSelected: function (args){}
});		 Event: cellSelected

let grid: Grid = new Grid({
  cellSelected: function (args){}
});
Triggers before the cell is being selected Event: cellSelecting

var gridObj = new ej.Grid($("#Grid"), {
  cellSelecting: function (args){}
});		 Event: cellSelecting

let grid: Grid = new Grid({
  cellSelecting: function (args){}
});
Triggers when a
cell is deselected		 Event: cellDeselected

var gridObj = new ej.Grid($("#Grid"), {
  cellDeselected: function (args){}
});		 Event: cellDeselected

let grid: Grid = new Grid({
  cellDeselected: function (args){}
});
Triggers before the cell is being deselected Event: cellDeselecting

var gridObj = new ej.Grid($("#Grid"), {
  cellDeselecting: function (args){}
});		 Event: cellDeselecting

let grid: Grid = new Grid({
  cellDeselecting: function (args){}
});
Triggers when the
row is selected		 Event: rowSelected

var gridObj = new ej.Grid($("#Grid"), {
  rowSelected: function (args){}
});		 Event: rowSelected

let grid: Grid = new Grid({
  rowSelected: function (args){}
});
Triggers before the row is being selected Event: rowSelecting

var gridObj = new ej.Grid($("#Grid"), {
  rowSelecting: function (args){}
});		 Event: rowSelecting

let grid: Grid = new Grid({
  rowSelecting: function (args){}
});
Triggers when the
row is deselected		 Event: rowDeselected

var gridObj = new ej.Grid($("#Grid"), {
  rowDeselected: function (args){}
});		 Event: rowDeselected

let grid: Grid = new Grid({
  rowDeselected: function (args){}
});
Triggers before the row is being deselected Event: rowDeselecting

var gridObj = new ej.Grid($("#Grid"), {
  rowDeselecting: function (args){}
});		 Event: rowDeselecting

let grid: Grid = new Grid({
  rowDeselecting: function (args){}
});
Triggers when the column is selected Event: columnSelected

var gridObj = new ej.Grid($("#Grid"), {
  columnSelected: function (args){}
});		 Not Applicable
Triggers before the column is being selected Event: columnSelecting

var gridObj = new ej.Grid($("#Grid"), {
  columnSelecting: function (args){}
});		 Not Applicable
Triggers when the column is deselected Event: columnDeselected

var gridObj = new ej.Grid($("#Grid"), {
  columnDeselected: function (args){}
});		 Not Applicable
Triggers before the column is being deselected Event: columnDeselecting

var gridObj = new ej.Grid($("#Grid"), {
  columnDeselecting: function (args){}
});		 Not Applicable

Editing

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

var gridObj = new ej.Grid($("#Grid"), {
  editSettings : { allowEditing: true,
  allowAdding: true, allowDeleting: true}
});		 Property: editSettings

let grid: Grid = new Grid({
  editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }
});
gridObj.appendTo('#Grid');
Inline Editing Property: editSettings.editMode

var gridObj = new ej.Grid($("#Grid"), {
  editSettings : { allowEditing: true,
  allowAdding: true, allowDeleting: true, editMode : "normal"}
});		 Property: editSettings.mode

let grid: Grid = new Grid({
  editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' }
});
gridObj.appendTo('#Grid');
Dialog Editing Property: editSettings.editMode

var gridObj = new ej.Grid($("#Grid"), {
  editSettings : { allowEditing: true,
  allowAdding: true, allowDeleting: true, editMode : "dialog"}
});		 Property: editSettings.mode

let grid: Grid = new Grid({
  editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' }
});
gridObj.appendTo('#Grid');
Batch Editing Property: editSettings.editMode

var gridObj = new ej.Grid($("#Grid"), {
  editSettings : { allowEditing: true,
  allowAdding: true, allowDeleting: true, editMode : "batch"}
});		 Property: editSettings.mode

let grid: Grid = new Grid({
  editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' }
});
gridObj.appendTo('#Grid');
Add a new Record Method: addRecord([data,[serverChange]])

var gridObj = $("#Grid").data("ejGrid");
gridObj.addRecord({"OrderID":12333});		 Method: addRecord(data(optional), index(optional))

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.addRecord();
Batch Cancel Method: batchCancel()

var gridObj = $("#Grid").data("ejGrid");
gridObj.batchCancel();		 Not Applicable
Batch Save Method: batchSave()

var gridObj = $("#Grid").data("ejGrid");
gridObj.batchSave();		 Method: batchSave()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.editModule.batchSave()
Save a Cell - If preventSaveEvent is true, then it
will prevent the client side cellSave event		 Method: saveCell([preventSaveEvent])

var gridObj = $("#Grid").data("ejGrid");
gridObj.saveCell();		 Method: saveCell()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.editModule.saveCell()
End Edit Method: endEdit()

var gridObj = $("#Grid").data("ejGrid");
gridObj.endEdit();		 Method: endEdit()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.endEdit()
Cancel Edit Method: cancelEdit()

var gridObj = $("#Grid").data("ejGrid");
gridObj.cancelEdit();		 Method: closeEdit()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.closeEdit()
Delete Record Method: deleteRecord(fieldName, data)

var gridObj = $("#Grid").data("ejGrid");
gridObj.deleteRecord("OrderID", { OrderID: 10249, EmployeeID: 3 });		 Method: deleteRecord(field, data)- Field and
* data are optional*

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.deleteRecord()
Delete Row Method: deleteRow($tr)

var gridObj = $("#Grid").data("ejGrid");
gridObj.deleteRow($(".gridcontent tr").first());		 Method: deleteRow(tr)

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
grid.deleteRow(grid.getContentTable()
.querySelector("tbody").firstChild)
Edit a cell in Batch edit mode Method: editCell(index, fieldName)

var gridObj = $("#Grid").data("ejGrid");
gridObj.editCell(2, "OrderID");		 Method: editCell(index, field)

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.editModule.editCell(0, "CustomerID")
Edit Form Validation Method: editFormValidate()

var gridObj = $("#Grid").data("ejGrid");
gridObj.editFormValidate();		 Method: editModule.formObj.validate()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.editModule.formObj.validate()
Get Batch Changes Method: getBatchChanges()

var gridObj = $("#Grid").data("ejGrid");
gridObj.getBatchChanges();		 Method: editModule.getBatchChanges()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.editModule.getBatchChanges()
Refresh Batch Edit Changes Method: refreshBatchEditChanges()

var gridObj = $("#Grid").data("ejGrid");
gridObj.refreshBatchEditChanges();		 Not Applicable
Set Default Data for adding Method: setDefaultData(defaultData)

var gridObj = $("#Grid").data("ejGrid");
var defaultData = {OrderID:"10000"};
gridObj.setDefaultData(defaultData);		 Method: editModule.addRecord()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.editModule.addRecord({OrderID:10000})
Start Edit Method: startEdit($tr)

var gridObj = $("#Grid").data("ejGrid");
gridObj.startEdit($(".gridcontent tr").first());		 Method: startEdit()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.startEdit(gridObj.selectRow(0))
Update Record Method: updateRecord(fieldName, data)

var gridObj = $("#Grid").data("ejGrid");
gridObj.updateRecord("OrderID", { OrderID: 10249, EmployeeID: 3 });		 Not Applicable
Get Currently edited cell value Method: getCurrentEditCellData()

var gridObj = $("#Grid").data("ejGrid");
gridObj.getCurrentEditCellData();		 Method: getCurrentEditCellData()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.
editModule.getCurrentEditCellData();
Set Cell value Method: setCellText()

var gridObj = $("#Grid").data("ejGrid");
gridObj.setCellText(0, 1, "France");		 Method: setCellValue(key, field, value)

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.setCellValue(10248,"CustomerID","A")
Triggers when adding a
record in batch editing		 Event: batchAdd

var gridObj = new ej.Grid($("#Grid"), {
  batchAdd: function (args){}
});		 Event: batchAdd

let grid: Grid = new Grid({
  batchAdd: function (args){}
});
Triggers when deleting a
record in batch editing		 Event: batchDelete

var gridObj = new ej.Grid($("#Grid"), {
  batchDelete: function (args){}
});		 Event: batchDelete

let grid: Grid = new Grid({
  batchDelete: function (args){}
});
Triggers before adding a record in batch editing Event: beforeBatchAdd

var gridObj = new ej.Grid($("#Grid"), {
  beforeBatchAdd: function (args){}
});		 Event: beforeBatchAdd

let grid: Grid = new Grid({
  beforeBatchAdd: function (args){}
});
Triggers before deleting a record in batch editing Event: beforeBatchDelete

var gridObj = new ej.Grid($("#Grid"), {
  beforeBatchDelete: function (args){}
});		 Event: beforeBatchDelete

let grid: Grid = new Grid({
  beforeBatchDelete: function (args){}
});
Triggers before saving a record in batch editing Event: beforeBatchSave

var gridObj = new ej.Grid($("#Grid"), {
  beforeBatchSave: function (args){}
});		 Event: beforeBatchSave

let grid: Grid = new Grid({
  beforeBatchSave: function (args){}
});
Triggers before the
record in being edited		 Event: beginEdit

var gridObj = new ej.Grid($("#Grid"), {
  beginEdit: function (args){}
});		 Event: beginEdit

let grid: Grid = new Grid({
  beginEdit: function (args){}
});
Triggers when the
cell is being edited		 Event: cellEdit

var gridObj = new ej.Grid($("#Grid"), {
  cellEdit: function (args){}
});		 Event: cellEdit

let grid: Grid = new Grid({
  cellEdit: function (args){}
});
Triggers when the
cell is saved		 Event: cellSave

var gridObj = new ej.Grid($("#Grid"), {
  cellSave: function (args){}
});		 Event: cellSave

let grid: Grid = new Grid({
  cellSave: function (args){}
});
Triggers when the record is added Event: endAdd

var gridObj = new ej.Grid($("#Grid"), {
  endAdd: function (args){}
});		 Event: actionComplete

let grid: Grid = new Grid({
  actionComplete: function (args){}
});
Triggers when the record is deleted Event: endDelete

var gridObj = new ej.Grid($("#Grid"), {
  endDelete: function (args){}
});		 Event: actionComplete

let grid: Grid = new Grid({
  actionComplete: function (args){}
});
Triggers after the record is edited Event: endEdit

var gridObj = new ej.Grid($("#Grid"), {
  endEdit: function (args){}
});		 Event: actionComplete

let grid: Grid = new Grid({
  actionComplete: function (args){}
});

Resizing

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

var gridObj = new ej.Grid($("#Grid"), {
  allowResizing: true
});		 Property: allowResizing

let grid: Grid = new Grid({  allowResizing: true
});
gridObj.appendTo('#Grid');
Resize a column by using the method Method: resizeColumns(column,width)

var gridObj = $("#Grid").data("ejGrid");
gridObj.resizeColumns("OrderID",width);		 Property:
columns.width

To resize a column, set width to that particular column and then refresh the grid by using the refresh method.
var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.columns[1].width = 100;
gridObj.refresh();
Triggers when a column resize starts Event: resizeStart

var gridObj = new ej.Grid($("#Grid"), {
  resizeStart: function (args){}
});		 Event: resizeStart

let grid: Grid = new Grid({
  resizeStart: function (args){}
});
Triggers when a column is resized Event: resized

var gridObj = new ej.Grid($("#Grid"), {
  resized: function (args){}
});		 Event: resizeStop

let grid: Grid = new Grid({
  resizeStop: function (args){}
});
Triggers when a column resize stops Event: resizeEnd

var gridObj = new ej.Grid($("#Grid"), {
  resizeEnd: function (args){}
});		 Not Applicable

Reordering

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

var gridObj = new ej.Grid($("#Grid"), {
  allowReordering: true
});		 Property: allowReordering

let grid: Grid = new Grid({  allowReordering: true
});
gridObj.appendTo('#Grid');
Reorder Columns Method: reorderColumns(fromFieldName, toFieldName)

var gridObj = $("#Grid").data("ejGrid");
gridObj.reorderColumns("OrderID", "CustomerID");		 Method: reorderColumns(fromFieldName, toFieldName)

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.reorderColumns("OrderID", "CustomerID");
Reorder Rows Method: reorderRows(indexes, toIndex)

var gridObj = $("#Grid").data("ejGrid");
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 gridObj = new ej.Grid($("#Grid"), {
  contextMenuSettings: { enableContextMenu: true }
});		 Property: contextMenuItems

let grid: Grid = new Grid({
  contextMenuItems: ['AutoFit', 'AutoFitAll']
});
gridObj.appendTo('#Grid');
Triggers when context menu item is clicked Event: contextClick

var gridObj = new ej.Grid($("#Grid"), {
  contextClick: function (args){}
});		 Event: contextMenuClick

let grid: Grid = new Grid({
  contextMenuClick: function (args){}
});
Triggers when context menu opens Event: contextOpen

var gridObj = new ej.Grid($("#Grid"), {
  contextOpen: function (args){}
});		 Event: contextMenuOpen

let grid: Grid = new Grid({
  contextMenuOpen: function (args){}
});

Toolbar

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

var gridObj = new ej.Grid($("#Grid"), {
  showToolbar: true,
  toolbarItems: [ej.Grid.ToolBarItems.PrintGrid]
});		 Property: toolbar

let grid: Grid = new Grid({
 toolbar: ['Print']
});
gridObj.appendTo('#Grid');
Add Property: toolbarSettings.toolbarItems

var gridObj = new ej.Grid($("#Grid"), {
  showToolbar: true,
  toolbarItems: [ej.Grid.ToolBarItems.Add]
});		 Property: toolbar

let grid: Grid = new Grid({
 toolbar: ['Add']
});
gridObj.appendTo('#Grid');
Edit Property: toolbarSettings.toolbarItems

var gridObj = new ej.Grid($("#Grid"), {
  showToolbar: true,
  toolbarItems: [ej.Grid.ToolBarItems.Edit]
});		 Property: toolbar

let grid: Grid = new Grid({
 toolbar: ['Edit']
});
gridObj.appendTo('#Grid');
Delete Property: toolbarSettings.toolbarItems

var gridObj = new ej.Grid($("#Grid"), {
  showToolbar: true,
  toolbarItems: [ej.Grid.ToolBarItems.Delete]
});		 Property: toolbar

let grid: Grid = new Grid({
 toolbar: ['Delete']
});
gridObj.appendTo('#Grid');
Update Property: toolbarSettings.toolbarItems

var gridObj = new ej.Grid($("#Grid"), {
  showToolbar: true,
  toolbarItems: [ej.Grid.ToolBarItems.Update]
});		 Property: toolbar

let grid: Grid = new Grid({
 toolbar: ['Update']
});
gridObj.appendTo('#Grid');
Cancel Property: toolbarSettings.toolbarItems

var gridObj = new ej.Grid($("#Grid"), {
  showToolbar: true,
  toolbarItems: [ej.Grid.ToolBarItems.Cancel]
});		 Property: toolbar

let grid: Grid = new Grid({
 toolbar: ['Cancel']
});
gridObj.appendTo('#Grid');
ExcelExport Property: toolbarSettings.toolbarItems

var gridObj = new ej.Grid($("#Grid"), {
  showToolbar: true,
  toolbarItems: [ej.Grid.ToolBarItems.ExcelExport]
});		 Property: toolbar

let grid: Grid = new Grid({
 toolbar: ['ExcelExport']
});
gridObj.appendTo('#Grid');
WordExport Property: toolbarSettings.toolbarItems

var gridObj = new ej.Grid($("#Grid"), {
  showToolbar: true,
  toolbarItems: [ej.Grid.ToolBarItems.WordExport]
});		 Not Applicable
PdfExport Property: toolbarSettings.toolbarItems

var gridObj = new ej.Grid($("#Grid"), {
  showToolbar: true,
  toolbarItems: [ej.Grid.ToolBarItems.PdfExport]
});		 Property: toolbar

let grid: Grid = new Grid({
 toolbar: ['PdfExport']
});
gridObj.appendTo('#Grid');
Refresh Toolbar Method: refreshToolbar()

var gridObj = $("#Grid").data("ejGrid");
gridObj.refreshToolbar();		 Not Applicable
Triggers when toolbar item is clicked Event: toolbarClick

var gridObj = new ej.Grid($("#Grid"), {
  toolbarClick: function (args){}
});		 Event: toolbarClick

let grid: Grid = new Grid({
  toolbarClick: function (args){}
});

GridLines

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

var gridObj = new ej.Grid($("#Grid"), {
  gridLines: ej.Grid.GridLines.Both
});		 Property: gridLines

let grid: Grid = new Grid({
gridLines: 'Default'
});
gridObj.appendTo('#Grid');

Templates

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

var gridObj = new ej.Grid($("#Grid"), {
  detailsTemplate : "#detailsTemplate"
});		 Property: detailTemplate

let grid: Grid = new Grid({
 detailTemplate: '#detailtemplate',
});
gridObj.appendTo('#Grid');
Row Template Property: rowTemplate

var gridObj = new ej.Grid($("#Grid"), {
  rowTemplate : "#rowTemplate"
});		 Property: rowTemplate

let grid: Grid = new Grid({
 rowTemplate: '#rowtemplate'',
});
gridObj.appendTo('#Grid');
Refresh Template Method: refreshTemplate()

var gridObj = $("#Grid").data("ejGrid");
gridObj.refreshTemplate();		 Not Applicable
Triggers when detail template row is clicked to collapse Event: detailsCollapse

var gridObj = new ej.Grid($("#Grid"), {
  detailsCollapse: function (args){}
});		 Not Applicable
Triggers when detail template row is initialized Event: detailsDataBound

var gridObj = new ej.Grid($("#Grid"), {
  detailsDataBound: function (args){}
});		 Not Applicable
Triggers when detail template
row is clicked to expand		 Event: detailsExpand

var gridObj = new ej.Grid($("#Grid"), {
  detailsExpand: function (args){}
});		 Event: detailDataBound

let grid: Grid = new Grid({
  detailDataBound: function (args){}
});
Triggers when refresh the template column elements in the Grid Event: templateRefresh

var gridObj = new ej.Grid($("#Grid"), {
  templateRefresh: function (args){}
});		 Not Applicable

Row/Column Drag and Drop

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

var gridObj = new ej.Grid($("#Grid"), {
  allowRowDragAndDrop: true
});		 Property: allowRowDragAndDrop

let grid: Grid = new Grid({
 allowRowDragAndDrop: true,
 rowDropSettings: { targetID: 'DestGrid' }
});
gridObj.appendTo('#Grid');
Triggers when the row is
being dragged		 Event: rowDrag

var gridObj = new ej.Grid($("#Grid"), {
  rowDrag: function (args){}
});		 Event: rowDrag

let grid: Grid = new Grid({
  rowDrag: function (args){}
});
Triggers when the row drag begins Event: rowDragStart

var gridObj = new ej.Grid($("#Grid"), {
  rowDragStart: function (args){}
});		 Event: rowDragStart

let grid: Grid = new Grid({
  rowDragStart: function (args){}
});
Triggers when the row is dropped Event: rowDrop

var gridObj = new ej.Grid($("#Grid"), {
  rowDrop: function (args){}
});		 Event: rowDrop

let grid: Grid = new Grid({
  rowDrop: function (args){}
});
Triggers before the row is being dropped Event: beforeRowDrop

var gridObj = new ej.Grid($("#Grid"), {
  beforeRowDrop: function (args){}
});		 Not Applicable
Triggers when the
column is being dragged		 Event: columnDrag

var gridObj = new ej.Grid($("#Grid"), {
  columnDrag: function (args){}
});		 Not Applicable
Triggers when the
column drag begins		 Event: columnDragStart

var gridObj = new ej.Grid($("#Grid"), {
  columnDragStart: function (args){}
});		 Not Applicable
Triggers when the
column is dropped		 Event: columnDrop

var gridObj = new ej.Grid($("#Grid"), {
  columnDrop: function (args){}
});		 Not Applicable

Frozen Rows and Columns

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

var gridObj = new ej.Grid($("#Grid"), {
  allowScrolling: true,
  scrollSettings:{frozenRows:2,
frozenColumns: 2 }
});		 Property: frozenColumns

let grid: Grid = new Grid({
 frozenColumns : 2,
 frozenRows:2
});
gridObj.appendTo('#Grid');
isFrozen Property: columns.isFrozen

var gridObj = new ej.Grid($("#Grid"), {
  columns : [{ field: "ShipCity", isFrozen:true}
});		 Property: columns.isFrozen

let grid: Grid = new Grid({
 columns : [{ field: "ShipCity", isFrozen: true}
});
gridObj.appendTo('#Grid');

ForeignKey

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

var gridObj = new ej.Grid($("#Grid"), {
  columns : [{ field: "EmployeeID", foreignKeyField: "EmployeeID", foreignKeyValue: "FirstName", dataSource: window.employeeView, headerText: "First Name"}
});		 Property: columns.foreignKeyValue

let grid: Grid = new Grid({
 columns : [{ field: 'EmployeeID', headerText: 'Employee Name', width: 150, foreignKeyValue: 'FirstName', dataSource: employeeData}
});
gridObj.appendTo('#Grid');

Auto Wrap

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

var gridObj = new ej.Grid($("#Grid"), {
  allowTextWrap : true
});		 Property: allowTextWrap

let grid: Grid = new Grid({
 allowTextWrap: true,
});
gridObj.appendTo('#Grid');
Both Property: allowTextWrap

var gridObj = new ej.Grid($("#Grid"), {
  allowTextWrap : true
 textWrapSettings: {wrapMode: "both"},
});		 Property: allowTextWrap

let grid: Grid = new Grid({
 allowTextWrap: true,
 textWrapSettings: { wrapMode: 'Both' }
});
gridObj.appendTo('#Grid');
Header Property: allowTextWrap

var gridObj = new ej.Grid($("#Grid"), {
  allowTextWrap : true
 textWrapSettings: {wrapMode: "header"},
});		 Property: allowTextWrap

let grid: Grid = new Grid({
 allowTextWrap: true,
 textWrapSettings: { wrapMode: 'Header' }
});
gridObj.appendTo('#Grid');
Content Property: allowTextWrap

var gridObj = new ej.Grid($("#Grid"), {
  allowTextWrap : true
 textWrapSettings: {wrapMode: "content"},
});		 Property: allowTextWrap

let grid: Grid = new Grid({
 allowTextWrap: true,
 textWrapSettings: { wrapMode: 'Content' }
});
gridObj.appendTo('#Grid');

Responsive

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

var gridObj = new ej.Grid($("#Grid"), {
  isResponsive: true,enableResponsiveRow: true
});		 Not Applicable

State Persistence

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

var gridObj = new ej.Grid($("#Grid"), {
  enablepersistence: true
});		 Property: enablepersistence

let grid: Grid = new Grid({
 enablepersistence: true
});
gridObj.appendTo('#Grid');

Right to Left - RTL

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

var gridObj = new ej.Grid($("#Grid"), {
  enableRTl: true
});		 Property: enableRtl

let grid: Grid = new Grid({
 enableRtl: true
});
gridObj.appendTo('#Grid');

ToolTip

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

var gridObj = new ej.Grid($("#Grid"), {
  columns : [{ field: "ShipCity", clipMode: ej.Grid.ClipMode.EllipsisWithTooltip}
 { field: "ShipCountry", clipMode: ej.Grid.ClipMode.Ellipsis}
 { field: "ShipName", clipMode: ej.Grid.ClipMode.Clip}]
});		 Property: clipMode

let grid: Grid = new Grid({
 columns : [{ field: "ShipCity", clipMode: 'EllipsisWithTooltip'},
 { field: "ShipCountry", clipMode: 'Ellipsis'},
 { field: "ShipName", clipMode: 'Clip'}
});
gridObj.appendTo('#Grid');

Aggregate/Summary

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

var gridObj = new ej.Grid($("#Grid"), {
  showSummary: true
  summaryRows: [{
   title: "Sum",
   summaryColumns: [{
   summaryType: ej.Grid.SummaryType.Sum,
   displayColumn: "Freight",
   dataMember: "Freight",
   format: "{0:C2}"}]}]
});		 Property: aggregates

let grid: Grid = new Grid({
 aggregates: [{
  columns: [{
  type: 'Sum',
  field: 'Freight',
  footerTemplate: 'Sum: ${Sum}'}]}
});
gridObj.appendTo('#Grid');
Caption Aggregate Property: showSummary

var gridObj = new ej.Grid($("#Grid"), {
  showSummary: true
  summaryRows: [{
  showCaptionSummary: true,
   title: "Sum",
   summaryColumns: [{
   summaryType: ej.Grid.SummaryType.Sum,
   displayColumn: "Freight",
   dataMember: "Freight",
   format: "{0:C2}"}]}]
});		 Property: aggregates

let grid: Grid = new Grid({
 aggregates: [{
  columns: [{
  type: 'Sum',
  field: 'Freight',
  groupCaptionTemplate: 'Max: ${Max}'}]}
});
gridObj.appendTo('#Grid');
Get Summary values Method: getSummaryValues(summaryCol, summaryData)

var gridObj = $("#Grid").data("ejGrid");
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)

var gridObj = $("#Grid").data("ejGrid");
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])()

var gridObj = $("#Grid").data("ejGrid");
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)

var gridObj = $("#Grid").data("ejGrid");
gridObj.getColumnByField("OrderID");		 Method: getColumnByField(fieldName)

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.getColumnByField("OrderID")
Get Column By HeaderText Method: getColumnByHeaderText(headerText)

var gridObj = $("#Grid").data("ejGrid");
gridObj.getColumnByHeaderText("Order ID");		 Column object for a corresponding headerText can able to get by iterating the gridObj.columns with the headerText
Get Column By Index Method: getColumnByIndex(columnIndex)

var gridObj = $("#Grid").data("ejGrid");
gridObj.getColumnByIndex(1);		 Method: getColumnByIndex(columnIndex)

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.getColumnByIndex(1)
Get Column Fieldnames Method: getColumnFieldNames()

var gridObj = $("#Grid").data("ejGrid");
gridObj.getColumnFieldNames();		 Method: getColumnFieldNames()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.getColumnFieldNames()
Get Column Index By Field Method: getColumnIndexByField(fieldName)

var gridObj = $("#Grid").data("ejGrid");
gridObj.getColumnIndexByField("OrderID");		 Method: getColumnIndexByField(fieldName)

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.getColumnIndexByField("OrderID");
Get Column Index By headerText Method: getColumnIndexByHeaderText(headerText, [field])

var gridObj = $("#Grid").data("ejGrid");
gridObj.getColumnIndexByHeaderText("Order ID");		 The Column Index for a corresponding headerText can be get by iterating the gridObj.columns with the headerText
Set Width to columns Method: setWidthToColumns()

var gridObj = $("#Grid").data("ejGrid");
gridObj.setWidthToColumns();		 Method: widthService.setWidthToColumns()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.widthService.setWidthToColumns()
Get HeaderText By FieldName Method: getHeaderTextByFieldName()

var gridObj = $("#Grid").data("ejGrid");
gridObj.getHeaderTextByFieldName("OrderID");		 Not Applicable
Get Hidden Columnname Method: getHiddenColumnNames()

var gridObj = $("#Grid").data("ejGrid");
gridObj.getHiddenColumnNames();		 Not Applicable
Get Visible Columns/Names Method: getVisibleColumnNames()

var gridObj = $("#Grid").data("ejGrid");
gridObj.getVisibleColumnNames();		 Method: getVisibleColumns()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.getVisibleColumns();
Select Columns Method: selectColumns(fromIndex)

var gridObj = $("#Grid").data("ejGrid");
gridObj.selectColumns(1,4);		 Not Applicable
Select Specific Columns based on Index Method: selectColumns(columnIndex,[toIndex])

var gridObj = $("#Grid").data("ejGrid");
gridObj.selectColumns(1,4);		 Not Applicable

Row

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

var gridObj = new ej.Grid($("#Grid"), {
  enableRowHover : false
});		 Property: enableHover

let grid: Grid = new Grid({
 enableHover: false,
});
gridObj.appendTo('#Grid');
Get Row Height Method: getRowHeight()

var gridObj = $("#Grid").data("ejGrid");
gridObj.getRowHeight();		 Method: getRowHeight()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.getRowHeight();
Refresh Row Height Method: rowHeightRefresh()

var gridObj = $("#Grid").data("ejGrid");
gridObj.rowHeightRefresh();		 Not Applicable
Get index by Row Element Method: getIndexByRow($tr)

var gridObj = $("#Grid").data("ejGrid");
gridObj.getIndexByRow($(".gridcontent tr").first());		 Not Applicable
Get Row by its Index Method: getRowByIndex(from, to)

var gridObj = $("#Grid").data("ejGrid");
gridObj.getRowByIndex(3, 6);		 Method: getRowByIndex()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.getRowByIndex(1);
Get rendered rows Method: getRows()

var gridObj = $("#Grid").data("ejGrid");
gridObj.getRows();		 Method: getRows()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.getRows();
Triggers while hover the grid row Event: rowHover

var gridObj = new ej.Grid($("#Grid"), {
  rowHover: function (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)

var gridObj = $("#Grid").data("ejGrid");
gridObj.hideColumns("Order ID");		 Method: hideColumns(headerText)

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.hideColumns("Order ID");
Show Columns by using method Method: showColumns(headerText)

var gridObj = $("#Grid").data("ejGrid");
gridObj.showColumns("Order ID");		 Method: showColumns(headerText)

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.showColumns("Order ID");

Column Chooser

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

var gridObj = new ej.Grid($("#Grid"), {
  showColumnChooser : true
columns: [{
  { field: 'CustomerID', showInColumnChooser: false },
  { field: 'Name', showInColumnChooser: true }
]});		 Property: showColumnChooser

let grid: Grid = new Grid({
 showColumnChooser: true,
 toolbar: ['ColumnChooser'],
columns: [{
  { field: 'CustomerID', showInColumnChooser: false },
  { field: 'Name', showInColumnChooser: true }
]});
gridObj.appendTo('#Grid');
Behavior API in Essential JS 1 API in Essential JS 2
Refresh Header Method: refreshHeader()

var gridObj = $("#Grid").data("ejGrid");
gridObj.refreshHeader();		 Method: refreshHeader()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.refreshHeader();
Triggers every time a request is made to access particular header cell information, element and data. Event: mergeHeaderCellInfo

var gridObj = new ej.Grid($("#Grid"), {
  mergeHeaderCellInfo: function (args){}
})		 Not Applicable
Triggers every time a request is made to access particular cell information, element and data Event: mergeCellInfo

var gridObj = new ej.Grid($("#Grid"), {
  mergeCellInfo: function (args){}
})		 Not Applicable

DataSource

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

var gridObj = $("#Grid").data("ejGrid");
gridObj.dataSource(newdataSource);		 Property: dataSource

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.datasource = newdataSource

Print

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

var gridObj = $("#Grid").data("ejGrid");
gridObj.print();		 Method: print()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.print();
Triggers before printing the grid Event: beforePrint

var gridObj = new ej.Grid($("#Grid"), {
  beforePrint: function (args){}
});		 Event: beforePrint

let grid: Grid = new Grid({
  beforePrint: function (args){}
});

Scrolling

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

var gridObj = $("#Grid").data("ejGrid");
gridObj.getScrollObject();		 Property: grid.scrollModule

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
var scrollObj = gridObj.scrollModule;

PrimaryKey

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

var gridObj = new ej.Grid($("#Grid"), {
columns: [
{ field: "OrderID", isPrimaryKey: true}] });		 Property: columns.isPrimaryKey

let grid: Grid = new Grid({
columns: [
{ field: "OrderID", isPrimaryKey: true}]
});
Get the PrimaryKey fieldnames Method: getPrimaryKeyFieldNames()

var gridObj = $("#Grid").data("ejGrid");
gridObj.getPrimaryKeyFieldNames();		 Method:
getPrimaryKeyFieldNames()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.getPrimaryKeyFieldNames();

Grid

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

var gridObj = $("#Grid").data("ejGrid");
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)

var gridObj = $("#Grid").data("ejGrid");
gridObj.setDimension(300,400);		 Not Applicable
set maximum width for mobile Method: setPhoneModeMaxWidth(value)

var gridObj = $("#Grid").data("ejGrid");
gridObj.setPhoneModeMaxWidth(500);		 Not Applicable
Render the grid Method: render()

var gridObj = $("#Grid").data("ejGrid");
gridObj.render();		 Method: render()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.render();
Reset the model collections like pageSettings,
groupSettings, filterSettings, sortSettings and summaryRows.		 Method: resetModelCollections()

var gridObj = $("#Grid").data("ejGrid");
gridObj.resetModelCollections();		 Not Applicable
Destroy the grid Method: destroy()

var gridObj = $("#Grid").data("ejGrid");
gridObj.destroy();		 Method: destroy()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.destroy()
Get Content Element Method: getContent()

var gridObj = $("#Grid").data("ejGrid");
gridObj.getContent();		 Method: getContent()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.getContent();
Get Content Table Method: getContentTable()

var gridObj = $("#Grid").data("ejGrid");
gridObj.getContentTable();		 Method: getContentTable()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.getContentTable();
Get Current View Data Method: getCurrentViewData()

var gridObj = $("#Grid").data("ejGrid");
gridObj.getCurrentViewData();		 Method: getCurrentViewRecords()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.getCurrentViewRecords();
Get Data Row Method: getDataByIndex(rowIndex)

var gridObj = $("#Grid").data("ejGrid");
gridObj.getDataByIndex(0);		 Method: getDataRows()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.getDataRows();
Get Fieldname by using the headertext Method: getFieldNameByHeaderText(headerText)

var gridObj = $("#Grid").data("ejGrid");
gridObj.getFieldNameByHeaderText("Order ID");		 Not Applicable
Get FooterContent Method: getFooterContent()

var gridObj = $("#Grid").data("ejGrid");
gridObj.getFooterContent();		 Method: getFooterContent()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.getFooterContent();
Get FooterContent Table Method: getFooterTable()

var gridObj = $("#Grid").data("ejGrid");
gridObj.getFooterTable();		 Method: getFooterContentTable()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.getFooterContentTable();
Get HeaderContent Method: getHeaderContent()

var gridObj = $("#Grid").data("ejGrid");
gridObj.getHeaderContent();		 Method: getHeaderContent()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.getHeaderContent();
Get HeaderContent Table Method: getHeaderTable()

var gridObj = $("#Grid").data("ejGrid");
gridObj.getHeaderTable();		 Method: getHeaderTable()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.getHeaderTable();
Refresh Content Method: refreshContent()

var gridObj = $("#Grid").data("ejGrid");
gridObj.refreshContent();		 Method:
contentModule.refreshContentRows()

var gridObj = document.getElementById('Grid')
.ej2_instances[0]
gridObj.
contentModule.refreshContentRows();
Refresh Data Method: refreshData()

var gridObj = $("#Grid").data("ejGrid");
gridObj.refreshData();		 Not Applicable
Triggers every time a request is
made to access particular cell
information, element and data		 Event: queryCellInfo

var gridObj = new ej.Grid($("#Grid"), {
  queryCellInfo: function (args){}
});		 Event: queryCellInfo

let grid: Grid = new Grid({
  queryCellInfo: function (args){}
});
Triggers every time a request is
made to access row information,
element and data		 Event: rowDataBound

var gridObj = new ej.Grid($("#Grid"), {
  rowDataBound: function (args){}
});		 Event: rowDataBound

let grid: Grid = new Grid({
  rowDataBound: function (args){}
});
Triggers for every grid
action before it get started		 Event: actionBegin

var gridObj = new ej.Grid($("#Grid"), {
  actionBegin: function (args){}
});		 Event: actionBegin

let grid: Grid = new Grid({
  actionBegin: function (args){}
});
Triggers for every grid
action success event		 Event: actionComplete

var gridObj = new ej.Grid($("#Grid"), {
  actionComplete: function (args){}
});		 Event: actionComplete

let grid: Grid = new Grid({
  actionComplete: function (args){}
});
Triggers for every grid
server failure event		 Event: actionFailure

var gridObj = new ej.Grid($("#Grid"), {
  actionFailure: function (args){}
});		 Event: actionFailure

let grid: Grid = new Grid({
  actionFailure: function (args){}
});
Triggers when the grid is bound
with data during rendering		 Event: dataBound

var gridObj = new ej.Grid($("#Grid"), {
  dataBound: function (args){}
});		 Event: dataBound

let grid: Grid = new Grid({
  dataBound: function (args){}
});
Triggers when the grid is
going to destroy		 Event: destroy

var gridObj = new ej.Grid($("#Grid"), {
  destroy: function (args){}
});		 Event: destroyed

let grid: Grid = new Grid({
  destroyed: function (args){}
});
Triggers when initial load of the grid Event: load

var gridObj = new ej.Grid($("#Grid"), {
  load: function (args){}
});		 Event: load

let grid: Grid = new Grid({
  load: function (args){}
});
Triggers when the grid is rendered completely Event: create

var gridObj = new ej.Grid($("#Grid"), {
  create: function (args){}
});		 Event: created

let grid: Grid = new Grid({
  created: function (args){}
});
Triggers when the record is clicked Event: recordClick

var gridObj = new ej.Grid($("#Grid"), {
  recordClick: function (args){}
});		 Not Applicable
Triggers when right clicked on grid element Event: rightClick

var gridObj = new ej.Grid($("#Grid"), {
  rightClick: function (args){}
});		 Not Applicable
Triggers when the
record is double clicked		 Event: recordDoubleClick

var gridObj = new ej.Grid($("#Grid"), {
  recordDoubleClick: function (args){}
});		 Event: recordDoubleClick
let grid: Grid = new Grid({
  recordDoubleClick: function (args){}
});
Previous
Next