Migration from Essential® JS 1

8 Dec 202424 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 id="Grid"
allow-sorting="true">
</ej-grid> 		Property: AllowSorting

<ejs-grid id="Grid" allowSorting="true">
</ejs-grid>
Clear the Sorted columns Method: clearSorting()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.clearSorting();
</script> 		Method: clearSorting()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.clearSorting();
</script>
Get the Sorted Columns by using the Fieldname Method: getsortColumnByField(field)

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getsortColumnByField("OrderID");
</script> 		Property: sortSettings.columns

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

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.removeSortedColumns("OrderID");
</script> 		Method: removeSortColumn(fieldName)

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document
.getElementById('Grid').ej2_instances[0];
gridObj.removeSortColumn("OrderID")
</script>
Sort a Column by using the method Method: sortColumn(columnName, [sortingDirection])

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.sortColumn("OrderID", "ascending");
</script> 		Method: sortColumn(columnName, Direction)

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.sortColumn("OrderID", "ascending");
</script>

Grouping

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

<ej-grid id="Grid"
allow-grouping="true">
</ej-grid> 		Property: AllowGrouping

<ejs-grid id="Grid" allowGrouping="true">
</ejs-grid>
Group Columns initially Property: AllowGrouping.GroupedColumns

<ej-grid id="Grid"
allow-grouping="true">
group-settings ="@(new GroupSettings{
GroupedColumns=new List<string>(){
"ShipCountry" } })"
</ej-grid> 		Property: AllowGrouping.Columns

<ejs-grid id="Grid" allowGrouping="true">
<e-grid-groupsettings
columns ="@(new string[] {"OrderDate"})">
</e-grid-groupsettings>
</ejs-grid>
Caption Template Property: GroupSettings.CaptionFormat

<ej-grid id="Grid"
allow-grouping="true">
group-settings ="@(new GroupSettings{
CaptionFormat="#template" })"
</ej-grid> 		Property: GroupSettings.CaptionTemplate

<ejs-grid id="Grid" allowGrouping="true">
<e-grid-groupsettings captionTemplate="#captiontemplate">
</e-grid-groupsettings>
</ejs-grid>
Show Drop Area Property: AllowGrouping.ShowDropArea

<ej-grid id="Grid"
allow-grouping="true">
group-settings ="@(new GroupSettings{
ShowDropArea=false })"
</ej-grid> 		Property: AllowGrouping.ShowDropArea

<ejs-grid id="Grid" allowGrouping="true">
<e-grid-groupsettings showDropArea="false">
</e-grid-groupsettings>
</ejs-grid>
Collapse all group caption rows Method: collapseAll()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.collapseAll();
</script> 		Method: collapseAll()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.groupModule.collapseAll()
</script>
Expand all group caption rows Method: expandAll()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.expandAll();
</script> 		Method: expandAll()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.groupModule.expandAll()
</script>
Expand or collapse the row based
on the row state in grid		 Method: expandCollapse($target)

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.expandCollapse($("tr td.recordplusexpand > div").first());
</script> 		Method: expandCollapseRows()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.groupModule.expandCollapseRows(
gridObj.getContent().querySelectorAll
('.e-recordplusexpand')[0])
</script>
Collapse the group drop area in grid Method: collapseGroupDropArea()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.collapseGroupDropArea();
</script> 		Not Applicable
Expand the group drop area in grid Method: expandGroupDropArea()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.expandGroupDropArea();
</script> 		Not Applicable
Group a column by using the method Method: groupColumn(fieldName)

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.groupColumn("OrderID");
</script> 		Method: groupColumn(fieldName)

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.groupColumn("OrderID")
</script>
Ungroup a grouped column by using the method Method: ungroupColumn(fieldName)

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.ungroupColumn("OrderID");
</script> 		Method: ungroupColumn(fieldName)

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.ungroupColumn("OrderID")
</script>

Filtering

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

<ej-grid id="Grid"
allow-filtering="true">
</ej-grid> 		Property: AllowFiltering

<ejs-grid id="Grid" allowFiltering="true">
</ejs-grid>
Menu Filtering Property: FilterSettings.FilterType

<ej-grid id="Grid"
allow-filtering="true">
<e-filter-settings filter-type="Menu"/>
</ej-grid> 		Property: FilterSettings.Type

<ejs-grid id="Grid" allowFiltering="true">
<e-grid-filterSettings type="Menu">
</e-grid-filterSettings>
</ejs-grid>
Excel Filtering Property: FilterSettings.FilterType

<ej-grid id="Grid"
allow-filtering="true">
<e-filter-settings filter-type="Excel"/>
</ej-grid> 		Property: FilterSettings.Type

<ejs-grid id="Grid" allowFiltering="true">
<e-grid-filterSettings type="Excel">
</e-grid-filterSettings>
</ejs-grid>
Clear the Filtered values Method: clearFiltering(field) - field is optional

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.clearFiltering();
<script> 		Method: clearFiltering()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.clearFiltering()
</script>
Filter a column by using the method Method: filterColumn(fieldName, filterOperator, filterValue,
predicate, [matchcase],[actualFilterValue])

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.filterColumn("OrderID",
"equal","10248","and", true);
</script> 		Method: filterByColumn(fieldName,
filterOperator, filterValue, predicate, matchCase,
ignoreAccent, actualFilterValue, actualOperator)

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.filterByColumn("OrderID",
equal",10248)
</script>
Filter columns by Collection Method: filterColumn(filterCollection)

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
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}])
</script> 		Property: filterSettings.columns

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.filterSettings = {columns: [{ field: 'ShipCity', matchCase: false, operator: 'startswith', predicate: 'and', value: 'reims' }]}
</script>
Get the Filtered Records Method: getFilteredRecords()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getFilteredRecords();
</script> 		Not Applicable

Searching

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: ToolbarSettings.ToolbarItems

<ej-grid id="Grid">
<e-toolbar-settings show-toolbar="true"
toolbar-items='@new List<string> {"search"}'/>
</ej-grid> 		Property: Toolbar

<ejs-grid id="Grid"
toolbar ="@(new List<string>() {"Search"})">
</ejs-grid>
Clear the Searched values Method: clearSearching()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.clearSearching();
</script> 		Method: searchModule.search()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.searchModule.search("");
</script>
Search a value Method: search(searchString)

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.search("France");
</script> 		Method: searchModule.search()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.searchModule.search("France");
</script>

Paging

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

<ej-grid id="Grid"
allow-paging="true">
</ej-grid> 		Property: AllowPaging

<ejs-grid id="Grid" allowPaging="true">
</ejs-grid>
Customize Paging Property: PageSettings.PageSize

<ej-grid id="Grid"
allow-paging="true">
<e-page-settings page-size="8">
</e-page-settings>
</ej-grid> 		Property: PageSettings.PageSize

<ejs-grid id="Grid" allowPaging="true">
<e-grid-pagesettings
pageSize="8" pageSizes ="@(new string[]
{ "5","10"})">
</ejs-grid>
Change Page Size Method: changePageSize(pageSize)

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.changePageSize(7);
</script> 		Property: pageSettings.pageSize

Pagesize can be modified dynamically by using the below code
<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
PageSettings.PageSize = 7;
</script>
Get Current Page Index Method: getCurrentIndex()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getCurrentIndex();
</script> 		Property: pageSettings.currentPage

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
var currentPage = gridObj.pageSettings.currentPage;
</script>
Get Pager Element Method: getPager()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getPager();
</script> 		Method: getPager()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getPager();
</script>
Send a paging request to specified Page Method: gotoPage(pageIndex)

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.gotoPage(3);
</script> 		Method: gotoPage(pageIndex)

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.gotoPage(3);
</script>
Calculate Pagesize of grid by using its Parent height(containerHeight) Method: calculatePageSizeBy
ParentHeight(containerHeight)

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.
calculatePageSizeByParentHeight(400);
</script> 		Not Applicable

Selection

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

<ej-grid id="Grid"
allow-selection="true">
</ej-grid> 		Property: allowSelection

<ejs-grid id="Grid" allowSelection="true">
</ejs-grid>
Single Selection Property: SelectionType

<ej-grid id="Grid"
allow-selection="true"
selection-type="Single">
</ej-grid> 		Property: SelectionSettings.Type

<ejs-grid id="Grid" allowSelection="true">
<e-grid-selectionsettings type=
"Single"></e-grid-selectionsettings>
</ejs-grid>
Multiple Selection Property: SelectionType

<ej-grid id="Grid"
allow-selection="true"
selection-type="Multiple">
</ej-grid> 		Property: SelectionSettings.Type

<ejs-grid id="Grid" allowSelection="true">
<e-grid-selectionsettings type=
"Multiple"></e-grid-selectionsettings>
</ejs-grid>
Row Selection Property: SelectionSettings.SelectionMode

<ej-grid id="Grid"
allow-selection="true"
selection-type="Multiple">
<e-selection-settings
selection-mode="@(new List<string>(){"row"})">
</e-selection-settings>
</ej-grid> 		Property: SelectionSettings.SelectionMode

<ejs-grid id="Grid" allowSelection="true">
<e-grid-selectionsettings
mode="Row">
</e-grid-selectionsettings>
</ejs-grid>
Cell Selection Property: SelectionSettings.SelectionMode

<ej-grid id="Grid"
allow-selection="true"
selection-type="Multiple">
<e-selection-settings
selection-mode="@(new List<string>(){"cell"})">
</e-selection-settings>
</ej-grid> 		Property: SelectionSettings.SelectionMode

<ejs-grid id="Grid" allowSelection="true">
<e-grid-selectionsettings
mode="Cell">
</e-grid-selectionsettings>
</ejs-grid>
Clear the selected Cells Method: clearCellSelection()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.clearCellSelection();
</script> 		Method: clearCellSelection()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.selectionModule
.clearCellSelection()
</script>
Clear the selected Columns Method: clearColumnSelection([index])-
index is optional

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.clearColumnSelection();
</script> 		Not Applicable
Get the selected Records Method: getSelectedRecords()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getSelectedRecords();
</script> 		Method: getSelectedRecords()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document
.getElementById('Grid')
.ej2_instances[0];
gridObj.getSelectedRecords();
</script>
Get the selected Rows Method: getSelectedRows()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getSelectedRows();
</script> 		Method: getSelectedRows()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document
.getElementById('Grid')
.ej2_instances[0];
gridObj.getSelectedRows();
</script>
Select Cells Method: selectCells(rowCellIndexes)

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.selectCells([[1, [4, 3, 2]]]);
</script> 		Method: selectionModule.selectCells();

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.selectionModule.selectCells
([{ rowIndex: 0, cellIndexes: [0] },
{ rowIndex: 1, cellIndexes: [1] }]);;
</script>
Select Rows Method: selectRows(fromIndex, toIndex)

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.selectRows(1, 4);
</script> 		Method: selectionModule.selectRows()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.selectionModule.
selectRows([0, 2])
</script>
Triggers when a
cell is selected		 Event: cellselected

<ej-grid id="Grid"
cell-selected="cellSelected">
</ej-grid>
Script:
<script>
function cellSelected(){}
</script> 		Event: cellselected

<ejs-grid id="Grid"
cellselected="cellselected">
</ejs-grid>
Script:
<script>
function cellselected(){}
</script>
Triggers before the cell is being selected Event: CellSelecting

<ej-grid id="Grid"
cell-selecting="cellSelecting">
</ej-grid>
Script:
<script>
function cellSelecting(){}
</script> 		Event: CellSelecting

<ejs-grid id="Grid"
CellSelecting="CellSelecting">
</ejs-grid>
Script:
<script>
function cellSelecting(){}
</script>
Triggers when a
cell is deselected		 Event: CellDeselected

<ej-grid id="Grid"
cell-deselected="cellDeselected">
</ej-grid>
Script:
<script>
function cellDeselected(){}
</script> 		Event: CellDeselected

<ejs-grid id="Grid"
CellDeselected="CellDeselected">
</ejs-grid>
Script:
<script>
function cellDeselected(){}
</script>
Triggers before the cell is being deselected Event: CellDeselecting

<ej-grid id="Grid"
cell-deselecting="cellDeselecting">
</ej-grid>
Script:
<script>
function cellDeselecting(){}
</script> 		Event: CellDeselecting

<ejs-grid id="Grid"
CellDeselecting="CellDeselecting">
</ejs-grid>
Script:
<script>
function cellDeselecting(){}
</script>
Triggers when the
row is selected		 Event: RowSelected

<ej-grid id="Grid"
row-selected="rowSelected">
</ej-grid>
Script:
<script>
function rowSelected(){}
</script> 		Event: RowSelected

<ejs-grid id="Grid"
rowSelected="rowSelected">
</ejs-grid>
Script:
<script>
function rowSelected(){}
</script>
Triggers before the row is being selected Event: RowSelecting

<ej-grid id="Grid"
row-selecting="rowSelecting">
</ej-grid>
Script:
<script>
function rowSelecting(){}
</script> 		Event: RowSelecting

<ejs-grid id="Grid"
rowSelecting="rowSelecting">
</ejs-grid>
Script:
<script>
function rowSelecting(){}
</script>
Triggers when the
row is deselected		 Event: RowDeselected

<ej-grid id="Grid"
row-deselected="rowDeselected">
</ej-grid>
Script:
<script>
function rowDeselected(){}
</script> 		Event: RowDeselected

<ejs-grid id="Grid"
rowDeselected="rowDeselected">
</ejs-grid>
Script:
<script>
function rowDeselected(){}
</script>
Triggers before the row is being deselected Event: RowDeselecting

<ej-grid id="Grid"
row-deselecting="rowDeselecting">
</ej-grid>
Script:
<script>
function rowDeselecting(){}
</script> 		Event: RowDeselecting

<ejs-grid id="Grid"
rowDeselecting="rowDeselecting">
</ejs-grid>
Script:
<script>
function rowDeselecting(){}
</script>
Triggers when the column is selected Event: ColumnSelected

<ej-grid id="Grid"
column-selected="columnSelected">
</ej-grid>
Script:
<script>
function columnSelected(){}
</script> 		Not Applicable
Triggers before the column is being selected Event: ColumnSelecting

<ej-grid id="Grid"
column-selecting="columnSelecting">
</ej-grid>
Script:
<script>
function columnSelecting(){}
</script> 		Not Applicable
Triggers when the column is deselected Event: ColumnDeselected

<ej-grid id="Grid"
column-deselected="columnDeselected">
</ej-grid>
Script:
<script>
function columnDeselected(){}
</script> 		Not Applicable
Triggers before the column is being deselected Event: ColumnDeselecting

<ej-grid id="Grid"
column-deselecting="columnDeselecting">
</ej-grid>
Script:
<script>
function columnDeselecting(){}
</script> 		Not Applicable

Editing

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

<ej-grid id="Grid">
<e-edit-settings allow-adding="true"
allow-editing="true" allow-deleting="true">
</e-edit-settings>
</ej-grid> 		Property: EditSettings

<ejs-grid id="Grid">
<e-grid-editSettings allowAdding="true"
allowDeleting="true" allowEditing="true">
</e-grid-editSettings>
</ejs-grid>
Inline Editing Property: EditSettings.EditMode

<ej-grid id="Grid">
<e-edit-settings allow-adding="true"
allow-editing="true" allow-deleting="true"
edit-mode="Normal">
</e-edit-settings>
</ej-grid> 		Property: EditSettings.Mode

<ejs-grid id="Grid">
<e-grid-editSettings
mode="Normal" allowAdding="true"
allowDeleting="true" allowEditing="true" >
</e-grid-editSettings>
</ejs-grid>
Dialog Editing Property: EditSettings.EditMode

<ej-grid id="Grid">
<e-edit-settings allow-adding="true"
allow-editing="true" allow-deleting="true"
edit-mode="Dialog">
</e-edit-settings>
</ej-grid> 		Property: EditSettings.Mode

<ejs-grid id="Grid">
<e-grid-editSettings
mode="Dialog" allowAdding="true"
allowDeleting="true" allowEditing="true" >
</e-grid-editSettings>
</ejs-grid>
Batch Editing Property: EditSettings.EditMode

<ej-grid id="Grid">
<e-edit-settings allow-adding="true"
allow-editing="true" allow-deleting="true"
edit-mode="Batch">
</e-edit-settings>
</ej-grid> 		Property: EditSettings.Mode

<ejs-grid id="Grid">
<e-grid-editSettings
mode="Batch" allowAdding="true"
allowDeleting="true" allowEditing="true" >
</e-grid-editSettings>
</ejs-grid>
Add a new Record Method: addRecord([data,[serverChange]])

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.addRecord({"OrderID":12333});
</script> 		Method: addRecord(data(optional), index(optional))

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.addRecord();
</script>
Batch Cancel Method: batchCancel()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.batchCancel();
</script> 		Not Applicable
Batch Save Method: batchSave()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.batchSave();
</script> 		Method: batchSave()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.editModule.batchSave();
</script>
Save a Cell - If preventSaveEvent is true, then it
will prevent the client side cellSave event		 Method: saveCell([preventSaveEvent])

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.saveCell();
</script> 		Method: saveCell()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.editModule.saveCell();
</script>
End Edit Method: endEdit()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.endEdit();
</script> 		Method: endEdit()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.endEdit();
</script>
Cancel Edit Method: cancelEdit()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.cancelEdit();
</script> 		Method: closeEdit()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.closeEdit();
</script>
Delete Record Method: deleteRecord(fieldName, data)

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.deleteRecord("OrderID",
{ OrderID: 10249, EmployeeID: 3 });
</script> 		Method: deleteRecord(field, data)- Field and
* data are optional*

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.deleteRecord();
</script>
Delete Row Method: deleteRow($tr)

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.deleteRow($(".gridcontent tr").first());
</script> 		Method: deleteRow(tr)

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
grid.deleteRow(grid.getContentTable()
.querySelector("tbody").firstChild);
</script>
Edit a cell in Batch edit mode Method: editCell(index, fieldName)

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.editCell(2, "OrderID");
</script> 		Method: editModule.editCell(index, field)

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.editModule.editCell(0,gridObj
.columns[0].field);
</script>
Edit Form Validation Method: editFormValidate()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.editFormValidate();
</script> 		Method: editModule.formObj.validate()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.editModule.formObj.validate();
</script>
Get Batch Changes Method: getBatchChanges()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getBatchChanges();
</script> 		Method: editModule.getBatchChanges()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.editModule.getBatchChanges();
</script>
Refresh Batch Edit Changes Method: refreshBatchEditChanges()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.refreshBatchEditChanges();
</script> 		Not Applicable
Set Default Data for adding Method: setDefaultData(defaultData)

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
var defaultData = {OrderID:"10000"};
gridObj.setDefaultData(defaultData);
</script> 		Method: editModule.addRecord()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.editModule.addRecord({OrderID:10000});
</script>
Start Edit Method: startEdit($tr)

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.startEdit($(".gridcontent tr")
.first());
</script> 		Method: startEdit()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.startEdit(gridObj.selectRow(0));
</script>
Update Record Method: updateRecord(fieldName, data)

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.updateRecord("OrderID",
{ OrderID: 10249, EmployeeID: 3 });
</script> 		Not Applicable
Set Cell value Method: setCellText()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.setCellText(0, 1, "France");
</script> 		Method: setCellValue(key, field, value)

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.setCellValue(10248,"CustomerID","A")
</script>
Get Currently edited cell value Method: getCurrentEditCellData()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getCurrentEditCellData();
</script> 		Method: getCurrentEditCellData()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.
editModule.getCurrentEditCellData();
</script>
Triggers when adding a
record in batch editing		 Event: BatchAdd

<ej-grid id="Grid"
batch-add="batchAdd">
</ej-grid>
Script:
<script>
function batchAdd(){}
</script> 		Event: BatchAdd

<ejs-grid id="Grid"
batchAdd="batchAdd">
</ejs-grid>
Script:
<script>
function batchAdd(){}
</script>
Triggers when deleting a
record in batch editing		 Event: BatchDelete

<ej-grid id="Grid"
batch-delete="batchDelete">
</ej-grid>
Script:
<script>
function batchDelete(){}
</script> 		Event: BatchDelete

<ejs-grid id="Grid"
batchDelete="batchDelete">
</ejs-grid>
Script:
<script>
function batchDelete(){}
</script>
Triggers before adding a record in batch editing Event: BeforeBatchAdd

<ej-grid id="Grid"
before-batch-add="beforeBatchAdd">
</ej-grid>
Script:
<script>
function beforeBatchAdd(){}
</script> 		Event: BeforeBatchAdd

<ejs-grid id="Grid"
beforeBatchAdd="beforeBatchAdd">
</ejs-grid>
Script:
<script>
function beforeBatchAdd(){}
</script>
Triggers before deleting a record in batch editing Event: BeforeBatchDelete

<ej-grid id="Grid"
before-batch-delete="beforeBatchDelete">
</ej-grid>
Script:
<script>
function beforeBatchDelete(){}
</script> 		Event: BeforeBatchDelete

<ejs-grid id="Grid"
beforeBatchDelete="beforeBatchDelete">
</ejs-grid>
Script:
<script>
function beforeBatchDelete(){}
</script>
Triggers before saving a record in batch editing Event: BeforeBatchSave

<ej-grid id="Grid"
before-batch-save="beforeBatchSave">
</ej-grid>
Script:
<script>
function beforeBatchSave(){}
</script> 		Event: BeforeBatchSave

<ejs-grid id="Grid"
beforeBatchSave="beforeBatchSave">
</ejs-grid>
Script:
<script>
function beforeBatchSave(){}
</script>
Triggers before the
record in being edited		 Event: BeginEdit

<ej-grid id="Grid"
begin-edit="beginEdit">
</ej-grid>
Script:
<script>
function beginEdit(){}
</script> 		Event: BeginEdit

<ejs-grid id="Grid"
beginEdit="beginEdit">
</ejs-grid>
Script:
<script>
function beginEdit(){}
</script>
Triggers when the
cell is being edited		 Event: CellEdit

<ej-grid id="Grid"
cell-edit="cellEdit">
</ej-grid>
Script:
<script>
function cellEdit(){}
</script> 		Event: CellEdit

<ejs-grid id="Grid"
cellEdit="cellEdit">
</ejs-grid>
Script:
<script>
function cellEdit(){}
</script>
Triggers when the
cell is saved		 Event: CellSave

<ej-grid id="Grid"
cell-save="cellSave">
</ej-grid>
Script:
<script>
function cellSave(){}
</script> 		Event: CellSave

<ejs-grid id="Grid"
cellSave="cellSave">
</ejs-grid>
Script:
<script>
function cellSave(){}
</script>
Triggers when the record is added Event: EndAdd

<ej-grid id="Grid"
end-add="endAdd">
</ej-grid>
Script:
<script>
function endAdd(){}
</script> 		Event: ActionComplete

<ejs-grid id="Grid"
actionComplete="actionComplete">
</ejs-grid>
Script:
<script>
function actionComplete(){}
</script>
Triggers when the record is deleted Event: EndDelete

<ej-grid id="Grid"
end-delete="endDelete">
</ej-grid>
Script:
<script>
function endDelete(){}
</script> 		Event: ActionComplete

<ejs-grid id="Grid"
actionComplete="actionComplete">
</ejs-grid>
Script:
<script>
function actionComplete(){}
</script>
Triggers after the record is edited Event: EndEdit

<ej-grid id="Grid"
action-complete="actionComplete">
</ej-grid>
Script:
<script>
function endEdit(){}
</script> 		Event: ActionComplete

<ejs-grid id="Grid"
actionComplete="actionComplete">
</ejs-grid>
Script:
<script>
function actionComplete(){}
</script>

Resizing

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

<ej-grid id="Grid"
allow-resizing="true">
</ej-grid> 		Property: AllowResizing

<ejs-grid id="Grid" allowResizing="true">
</ejs-grid>
Resize a column by using the method Method: resizeColumns(column,width)

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.resizeColumns("OrderID",width);
</script> 		Property: columns.width

To resize a column, set width to that particular column and then refresh the grid by using the refresh method.<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.columns[1].width = 100;
gridObj.refresh();
</script>
Triggers when a column resize starts Event: ResizeStart

<ej-grid id="Grid"
resize-start="resizeStart">
</ej-grid>
Script:
<script>
function resizeStart(){}
</script> 		Event: ResizeStart

<ejs-grid id="Grid"
resizeStart="resizeStart">
</ejs-grid>
Script:
<script>
function resizeStart(){}
</script>
Triggers when a column is resized Event: Resized

<ej-grid id="Grid"
resized="resized">
</ej-grid>
Script:
<script>
function resized(){}
</script> 		Event: ResizeStop

<ejs-grid id="Grid"
resizeStop="resizeStop">
</ejs-grid>
Script:
<script>
function resizeStop(){}
</script>
Triggers when a column resize stops Event: ResizeEnd

<ej-grid id="Grid"
resize-end="resizeEnd">
</ej-grid>
Script:
<script>
function resizeEnd(){}
</script> 		Not Applicable

Reordering

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

<ej-grid id="Grid"
allow-reordering="true">
</ej-grid> 		Property: AllowReordering

<ejs-grid id="Grid" allowReordering="true">
</ejs-grid>
Reorder Columns Method: reorderColumns(fromFieldName, toFieldName)

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.reorderColumns("OrderID", "CustomerID");
</script> 		Method: reorderColumns(fromFieldName, toFieldName)

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.reorderColumns("OrderID", "CustomerID");
</script>
Reorder Rows Method: reorderRows(indexes, toIndex)

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.reorderRows([0,1],3);
</script> 		Not Applicable

Context Menu

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: ContextMenuSettings.EnableContextMenu

<ej-grid id="Grid">
<e-context-menu-settings
enable-context-menu="true">
</e-context-menu-settings>
</ej-grid> 		Property: ContextMenuItems

@{
List<object> ContextMenuitems =
new List<object>();
ContextMenuitems.Add(new{
text = "Copy with headers",
target= ".e-content",
id = "copywithheader"});
’}’
<ejs-grid id="Grid" contextMenuItems="contextMenuitems">
</ejs-grid>
Triggers when context menu item is clicked Event: ContextClick

<ej-grid id="Grid"
context-click="contextClick">
</ej-grid>
Script:
<script>
function contextClick(){}
</script> 		Event: ContextMenuClick

<ejs-grid id="Grid"
contextMenuClick="contextMenuClick">
</ejs-grid>
Script:
<script>
function contextMenuClick(){}
</script>
Triggers when context menu opens Event: ContextOpen

<ej-grid id="Grid"
context-open="contextOpen">
</ej-grid>
Script:
<script>
function contextOpen(){}
</script> 		Event: ContextMenuOpen

<ejs-grid id="Grid"
contextMenuOpen="contextMenuOpen">
</ejs-grid>
Script:
<script>
function contextMenuOpen(){}
</script>

Toolbar

Behavior API in Essential® JS 1 API in Essential® JS 2
Print Property: ToolbarSettings.ToolbarItems

<ej-grid id="Grid">
<e-toolbar-settings show-toolbar="true"
toolbar-items='@new List<string> {"print"}'/>
</ej-grid> 		Property: Toolbar

<ejs-grid id="Grid"
toolbar ="@(new List<string>() { "Print"})">
</ejs-grid>
Add Property: ToolbarSettings.ToolbarItems

<ej-grid id="Grid">
<e-toolbar-settings show-toolbar="true"
toolbar-items='@new List<string> {"add"}'/>
</ej-grid> 		Property: Toolbar

<ejs-grid id="Grid"
toolbar ="@(new List<string>() { "Add"})">
</ejs-grid>
Edit Property: ToolbarSettings.ToolbarItems

<ej-grid id="Grid">
<e-toolbar-settings show-toolbar="true"
toolbar-items='@new List<string> {"edit"}'/>
</ej-grid> 		Property: Toolbar

<ejs-grid id="Grid"
toolbar ="@(new List<string>() { "Edit"})">
</ejs-grid>
Delete Property: ToolbarSettings.ToolbarItems

<ej-grid id="Grid">
<e-toolbar-settings show-toolbar="true"
toolbar-items='@new List<string> {"delete"}'/>
</ej-grid> 		Property: Toolbar

<ejs-grid id="Grid"
toolbar ="@(new List<string>() { "Delete"})">
</ejs-grid>
Update Property: ToolbarSettings.ToolbarItems

<ej-grid id="Grid">
<e-toolbar-settings show-toolbar="true"
toolbar-items='@new List<string> {"update"}'/>
</ej-grid> 		Property: Toolbar

<ejs-grid id="Grid"
toolbar ="@(new List<string>() { "Update"})">
</ejs-grid>
Cancel Property: ToolbarSettings.ToolbarItems

<ej-grid id="Grid">
<e-toolbar-settings show-toolbar="true"
toolbar-items='@new List<string> {"cancel"}'/>
</ej-grid> 		Property: Toolbar

<ejs-grid id="Grid"
toolbar ="@(new List<string>() { "Cancel"})">
</ejs-grid>
ExcelExport Property: ToolbarSettings.ToolbarItems

<ej-grid id="Grid">
<e-toolbar-settings show-toolbar="true"
toolbar-items='@new List<string> {"excelExport"}'/>
</ej-grid> 		Property: Toolbar

<ejs-grid id="Grid"
toolbar ="@(new List<string>() { "ExcelExport"})">
</ejs-grid>
WordExport Property: ToolbarSettings.ToolbarItems

<ej-grid id="Grid">
<e-toolbar-settings show-toolbar="true"
toolbar-items='@new List<string> {"wordExport"}'/>
</ej-grid> 		Not Applicable
PdfExport Property: ToolbarSettings.ToolbarItems

<ej-grid id="Grid">
<e-toolbar-settings show-toolbar="true"
toolbar-items='@new List<string> {"pdfExport"}'/>
</ej-grid> 		Property: Toolbar

<ejs-grid id="Grid"
toolbar ="@(new List<string>() { "PdfExport"})">
</ejs-grid>
Refresh Toolbar Method: refreshToolbar()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.refreshToolbar();
</script> 		Not Applicable
Triggers when toolbar item is clicked Event: ToolbarClick

<ej-grid id="Grid"
toolbar-click="toolbarClick">
</ej-grid>
Script:
<script>
function toolbarClick(){}
</script> 		Event: ToolbarClick

<ejs-grid id="Grid"
toolbarClick="toolbarClick">
</ejs-grid>
Script:
<script>
function toolbarClick(){}
</script>

GridLines

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

<ej-grid id="Grid"
grid-lines="Vertical">
</ej-grid> 		Property: GridLines

<ejs-grid id="Grid" gridLines="Vertical">
</ejs-grid>

Templates

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

<ej-grid id="Grid"
details-template="#detailsTemplate">
</ej-grid>
Script:
<script id="detailsTemplate" type="text/x-jsrender">
You can add template elements here
</script> 		Property: DetailTemplate

<ejs-grid id="Grid"
detailTemplate="#detailtemplate">
</ejs-grid>
Script:
<script type="text/x-template" id="detailtemplate">
You can add template elements here
</script>
Default Property: RowTemplate

<ej-grid id="Grid"
row-template="#rowtemplate">
</ej-grid>
Script:
<script id="rowtemplate" type="text/x-jsrender">
You can add template elements here
</script> 		Property: RowTemplate

<ejs-grid id="Grid"
rowTemplate="#rowtemplate">
</ejs-grid>
Script:
<script type="text/x-template" id="rowtemplate">
You can add template elements here
</script>
Refresh Template Method: refreshTemplate()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.refreshTemplate();
</script> 		Not Applicable
Triggers when detail template row is clicked to collapse Event: DetailsCollapse

<ej-grid id="Grid"
details-collapse="detailsCollapse">
</ej-grid>
Script:
<script>
function detailsCollapse(){}
</script> 		Not Applicable
Triggers when detail template row is initialized Event: DetailsDataBound

<ej-grid id="Grid"
details-data-bound="detailsDataBound">
</ej-grid>
Script:
<script>
function detailsDataBound(){}
</script> 		Not Applicable
Triggers when detail template
row is clicked to expand		 Event: DetailsExpand

<ej-grid id="Grid"
details-expand="detailsExpand">
</ej-grid>
Script:
<script>
function detailsExpand(){}
</script> 		Event: DetailDataBound

<ejs-grid id="Grid"
detailDataBound="detailDataBound">
</ejs-grid>
Script:
<script>
function detailDataBound(){}
</script>
Triggers when refresh the template column elements in the Grid Event: TemplateRefresh

<ej-grid id="Grid"
template-refresh="templateRefresh">
</ej-grid>
Script:
<script>
function templateRefresh(){}
</script> 		Not Applicable

Row/Column Drag and Drop

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

<ej-grid id="Grid"
allow-row-drag-and-drop="true"
row-drop-settings="@(new RowDropSettings()
{DropTargetID="#destGrid"})">
</ej-grid> 		Property: AllowRowDragAndDrop

<ejs-grid id="Grid" allowRowDragAndDrop="true">
<e-grid-rowdropsettings
targetID="DestGrid">
</e-grid-rowdropsettings>
</ejs-grid>
Triggers when the row is
being dragged		 Event: RowDrag

<ej-grid id="Grid"
row-drag="rowDrag">
</ej-grid>
Script:
<script>
function rowDrag(){}
</script> 		Event: RowDrag

<ejs-grid id="Grid"
rowDrag="rowDrag">
</ejs-grid>
Script:
<script>
function rowDrag(){}
</script>
Triggers when the row drag begins Event: RowDragStart

<ej-grid id="Grid"
row-drag-start="rowDragStart">
</ej-grid>
Script:
<script>
function rowDragStart(){}
</script> 		Event: RowDragStart

<ejs-grid id="Grid"
rowDragStart="rowDragStart">
</ejs-grid>
Script:
<script>
function rowDragStart(){}
</script>
Triggers when the row is dropped Event: RowDrop

<ej-grid id="Grid"
row-drop="rowDrop">
</ej-grid>
Script:
<script>
function rowDrop(){}
</script> 		Event: RowDrop

<ejs-grid id="Grid"
rowDrop="rowDrop">
</ejs-grid>
Script:
<script>
function rowDrop(){}
</script>
Triggers before the row is being dropped Event: BeforeRowDrop

<ej-grid id="Grid"
before-row-drop="beforeRowDrop">
</ej-grid>
Script:
<script>
function beforeRowDrop(){}
</script> 		Not Applicable
Triggers when the
column is being dragged		 Event: columnDrag

<ej-grid id="Grid"
column-drag="columnDrag">
</ej-grid>
Script:
<script>
function columnDrag(){}
</script> 		Not Applicable
Triggers when the
column drag begins		 Event: columnDragStart

<ej-grid id="Grid"
column-drag-start="columnDragStart">
</ej-grid>
Script:
<script>
function columnDragStart(){}
</script> 		Not Applicable
Triggers when the
column is dropped		 Event: ColumnDrop

<ej-grid id="Grid"
column-drop="columnDrop">
</ej-grid>
Script:
<script>
function columnDrop(){}
</script> 		Not Applicable

Frozen Rows and Columns

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: ScrollSettings.FrozenRows

<ej-grid id="Grid"
allow-scrolling="true">
<e-scroll-settings frozen-columns="2"
frozen-rows="2">
</ej-grid> 		Property: FrozenRows

<ejs-grid id="Grid"
frozenColumns="1" frozenRows="2">
</ejs-grid>
isFrozen Property: Columns.IsFrozen

<ej-grid id="Grid">
<e-columns>
<e-column field="OrderID"
is-frozen="true" ></e-column>
</e-columns>
</ej-grid> 		Property: Columns.IsFrozen

<ejs-grid id="Grid">
<e-grid-columns>
<e-grid-column field="OrderID"
isFrozen="true"></e-grid-column>
</e-grid-columns>
</ejs-grid>

ForeignKey

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: Columns.ForeignKeyValue

<ej-grid id="Grid">
<e-columns>
<e-column field="CustomerID"
foreign-key-field="CustomerID"
foreign-key-value="FirstName">
</e-column></e-columns>
</ej-grid> 		Property: Columns.ForeignKeyValue

<ejs-grid id="Grid">
<e-grid-columns>
<e-grid-column field="CustomerID"
foreignKeyField="CustomerID"
foreignKeyValue="FirstName"></e-grid-column>
</e-grid-columns>
</ejs-grid>

Auto Wrap

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

<ej-grid id="Grid"
allow-text-wrap="true">
</ej-grid> 		Property: AllowTextWrap

<ejs-grid id="Grid"
allowTextWrap="true">
</ejs-grid>
Both Property: AllowTextWrap

<ej-grid id="Grid"
allow-text-wrap="true">
<e-text-wrap-settings wrap-mode="Both">
</e-text-wrap-settings>
</ej-grid> 		Property: AllowTextWrap

<ejs-grid id="Grid"
allowTextWrap="true">
<e-grid-textwrapsettings
wrapMode="Both">
</e-grid-textwrapsettings>
</ejs-grid>
Header Property: AllowTextWrap

<ej-grid id="Grid"
allow-text-wrap="true">
<e-text-wrap-settings wrap-mode="Header">
</e-text-wrap-settings>
</ej-grid> 		Property: AllowTextWrap

<ejs-grid id="Grid"
allowTextWrap="true">
<e-grid-textwrapsettings
wrapMode="Header">
</e-grid-textwrapsettings>
</ejs-grid>
Content Property: AllowTextWrap

<ej-grid id="Grid"
allow-text-wrap="true">
<e-text-wrap-settings wrap-mode="Content">
</e-text-wrap-settings>
</ej-grid> 		Property: AllowTextWrap

<ejs-grid id="Grid"
allowTextWrap="true">
<e-grid-textwrapsettings
wrapMode="Content">
</e-grid-textwrapsettings>
</ejs-grid>

Responsive

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

<ej-grid id="Grid"
is-responsive="true"
enable-responsive-row="true">
</ej-grid> 		Not Applicable

State Persistence

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

<ej-grid id="Grid"
enable-persistence="true">
</ej-grid> 		Property: EnablePersistence

<ejs-grid id="Grid"
enablePersistence="true">
</ejs-grid>

Right to Left - RTL

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

<ej-grid id="Grid"
enable-rtl="true">
</ej-grid> 		Property: EnableRtl

<ejs-grid id="Grid"
enableRtl="true">
</ejs-grid>

ToolTip

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

<ej-grid id="Grid">
<e-columns>
<e-column field="OrderID"
clip-mode="Clip"></e-column>
<e-column field="ShipCountry"
clip-mode="Ellipsis"></e-column>
<e-column field="ShipName"
clip-mode="EllipsisWithTooltip">
</e-column></e-columns>
</ej-grid> 		Property: ClipMode

<ejs-grid id="Grid">
<e-grid-columns>
<e-grid-column field="OrderID"
clipMode="Clip">
</e-grid-column>
<e-grid-column field="ShipCountry"
clipMode="Ellipsis">
</e-grid-column>
<e-grid-column field="ShipName"
clipMode="EllipsisWithTooltip">
</e-grid-column></e-grid-columns>
</ejs-grid>

Aggregate/Summary

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

<ej-grid id="Grid"
show-summary="true">
<e-summary-rows>
<e-summary-row title="Sum">
<e-summary-columns>
<e-summary-column summary-type="Sum"
format="{0:C}" display-column=
"Freight" datamember="Freight"/>
</e-summary-columns>
</e-summary-row>
</e-summary-rows>
</ej-grid> 		Property: Aggregates

<ejs-grid id="Grid">
<e-grid-aggregates>
<e-grid-aggregate>
<e-aggregate-columns>
<e-aggregate-column field="Freight"
type="Sum" footerTemplate="Sum:${Sum}">
</e-aggregate-column>
</e-aggregate-columns>
</e-grid-aggregate>
</e-grid-aggregates>
</ejs-grid>
Caption Aggregate Property: ShowSummary

<ej-grid id="Grid"
show-summary="true">
<e-summary-rows>
<e-summary-row show-total-summary="false"
show-caption-summary="true">
<e-summary-columns>
<e-summary-column summary-type="Sum"
prefix=@("Sum=") format="{0:C}"
display-column="Freight" datamember="Freight"/>
</e-summary-columns>
</e-summary-row>
</e-summary-rows>
</ej-grid> 		Property: Aggregates

<ejs-grid id="Grid">
<e-grid-aggregates>
<e-grid-aggregate>
<e-aggregate-columns>
<e-aggregate-column field="Freight"
type="Sum" groupCaptionTemplate="Sum:${Sum}">
</e-aggregate-column>
</e-aggregate-columns>
</e-grid-aggregate>
</e-grid-aggregates>
</ejs-grid>
Get Summary values Method: getSummaryValues(summaryCol, summaryData)

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getSummaryValues(summaryCol, window.gridData);
</script> 		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 id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.addIgnoreOnExport
("filterSettings");
</script> 		Not Applicable

Columns

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

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.columns("OrderID", "remove");
gridObj.columns("CustomerID", "add");
</script> 		Property: columns

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

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getColumnByField("OrderID");
</script> 		Method: getColumnByField(fieldName)

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getColumnByField("OrderID");
</script>
Get Column By HeaderText Method:
getColumnByHeaderText(headerText)

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getColumnByHeaderText
("Order ID");
</script> 		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)

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getColumnByIndex(1);
</script> 		Method: getColumnByIndex(columnIndex)

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getColumnByIndex(1);
</script>
Get Column Fieldnames Method: getColumnFieldNames()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getColumnFieldNames();
</script> 		Method: getColumnFieldNames()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getColumnFieldNames();
</script>
Get Column Index By Field Method:
getColumnIndexByField(fieldName)

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getColumnIndexByField("OrderID");
</script> 		Method:
getColumnIndexByField(fieldName)

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getColumnIndexByField("OrderID");
</script>
Get Column Index By headerText Method: getColumnIndexByHeaderText(headerText, [field])

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

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.setWidthToColumns();
</script> 		Method:
widthService.setWidthToColumns()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.widthService.setWidthToColumns()
</script>
Get HeaderText By FieldName Method: getHeaderTextByFieldName()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getHeaderTextByFieldName("OrderID");
</script> 		Not Applicable
Get Hidden Columnname Method: getHiddenColumnNames()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getHiddenColumnNames();
</script> 		Not Applicable
Get Visible Columns/Names Method: getVisibleColumnNames()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getVisibleColumnNames();
</script> 		Method: getVisibleColumns()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getVisibleColumns();
</script>
Select Columns Method: selectColumns(fromIndex)

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.selectColumns(1,4);
</script> 		Not Applicable
Select Specific Columns based on Index Method:
selectColumns(columnIndex,[toIndex])

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.selectColumns(1,4);
</script> 		Not Applicable

Row

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

<ej-grid id="Grid"
enable-row-hover="true">
</ej-grid> 		Property: EnableHover

<ejs-grid id="Grid"
enableHover="true">
</ejs-grid>
Get Row Height Method: getRowHeight()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getRowHeight();
</script> 		Method: getRowHeight()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getRowHeight();
</script>
Refresh Row Height Method: rowHeightRefresh()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.rowHeightRefresh();
</script> 		Not Applicable
Get index by Row Element Method: getIndexByRow($tr)

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getIndexByRow($(".gridcontent tr").first());
</script> 		Not Applicable
Get Row by its Index Method: getRowByIndex(from, to)

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getRowByIndex(3, 6);
</script> 		Method: getRowByIndex(index)

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getRowByIndex(1);
</script>
Get rendered rows Method: getRows()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getRows();
</script> 		Method: getRows()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getRows();
</script>
Triggers while hover the grid row Event: RowHover

<ej-grid id="Grid"
row-hover="rowHover">
</ej-grid>
Script:
<script>
function rowHover(){}
</script> 		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 id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.hideColumns("Order ID");
</script> 		Method: hideColumns(headerText)

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.hideColumns("Order ID");
</script>
Show Columns by using method Method: showColumns(headerText)

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.showColumns("Order ID");
</script> 		Method: showColumns(headerText)

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.showColumns("Order ID");
</script>

Column Chooser

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

<ej-grid id="Grid"
show-column-chooser=”true”>
<e-columns>
<e-column field="EmployeeID"
show-in-column-chooser="false">
</e-column>
<e-column field="OrderID">
</e-column></e-columns>
</ej-grid> 		Property: ShowColumnChooser

<ejs-grid id="Grid"
showColumnChooser="true" >
<e-grid-columns>
<e-grid-column field="EmployeeID"
showInColumnChooser="false"></e-grid-column>
<e-grid-column field="OrderID">
</e-grid-column>
</e-grid-columns>
</ejs-grid>
Behavior API in Essential® JS 1 API in Essential® JS 2
Refresh Header Method: refreshHeader()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.refreshHeader();
</script> 		Method: refreshHeader()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.refreshHeader();
</script>
Triggers every time a request is made to access particular header cell information, element and data. Event: MergeHeaderCellInfo

<ej-grid id="Grid"
merge-header-cell-info="mergeHeaderCellInfo">
</ej-grid>
Script:
<script>
function mergeHeaderCellInfo(){}
</script> 		Not Applicable
Triggers every time a request is made to access particular cell information, element and data Event: MergeCellInfo

<ej-grid id="Grid"
merge-cell-info="mergeCellInfo">
</ej-grid>
Script:
<script>
function mergeCellInfo(){}
</script> 		Not Applicable

DataSource

Behavior API in Essential® JS 1 API in Essential® JS 2
To set a new DataSource Dynamically by using the method Method: dataSource(datasource,[templateRefresh])

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.dataSource(newdataSource);
</script> 		Property: dataSource

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.datasource = newdataSource
</script>

Print

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

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.print();
</script> 		Method: print()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.print();
</script>
Triggers before printing the grid Event: BeforePrint

<ej-grid id="Grid"
before-print="beforePrint">
</ej-grid>
Script:
<script>
function beforePrint(){}
</script> 		Event: BeforePrint

<ejs-grid id="Grid"
beforePrint="beforePrint">
</ejs-grid>
Script:
<script>
function beforePrint(){}
</script>

Scrolling

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

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getScrollObject();
</script> 		Property: grid.scrollModule

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
var scrollObj = gridObj.scrollModule;
</script>

PrimaryKey

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: Columns.IsPrimaryKey

<ej-grid id="Grid">
<e-columns>
<e-column field="EmployeeID"
is-primary-key="true">
</e-column></e-columns>
</ej-grid> 		Property: Columns.IsPrimaryKey

<ejs-grid id="Grid">
<e-grid-columns>
<e-grid-column field="EmployeeID"
isPrimaryKey="true">
</e-grid-column></e-grid-columns>
</ejs-grid>
Get the PrimaryKey fieldnames Method: getPrimaryKeyFieldNames()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getPrimaryKeyFieldNames();
</script> 		Method:
getPrimaryKeyFieldNames()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getPrimaryKeyFieldNames();
</script>

Grid

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

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getBrowserDetails();
</script> 		In Essential® JS 2, it can be
achieved by using Browserclass of ej2-base
Set dimension for the grid Method: setDimension(height, width)

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.setDimension(300,400);
</script> 		Not Applicable
set maximum width for mobile Method: setPhoneModeMaxWidth(value)

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.setPhoneModeMaxWidth(500);
</script> 		Not Applicable
Render the grid Method: render()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.render();
</script> 		Method: render()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.render();
</script>
Reset the model collections like pageSettings,
groupSettings, filterSettings, sortSettings and summaryRows.		 Method: resetModelCollections()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.resetModelCollections();
</script> 		Not Applicable
Destroy the grid Method: destroy()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.destroy();
</script> 		Method: destroy()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.destroy()
</script>
Get Content Element Method: getContent()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getContent();
</script> 		Method: getContent()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getContent();
</script>
Get Content Table Method: getContentTable()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getContentTable();
</script> 		Method: getContentTable()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getContentTable();
</script>
Get Current View Data Method: getCurrentViewData()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getCurrentViewData();
</script> 		Method: getCurrentViewRecords()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getCurrentViewRecords();
</script>
Get Data Row Method: getDataByIndex(rowIndex)

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getDataByIndex(0);
</script> 		Method: getDataRows()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getDataRows();
</script>
Get Fieldname by using the headertext Method:
getFieldNameByHeaderText(headerText)

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getFieldNameByHeaderText
("Order ID");
</script> 		Not Applicable
Get FooterContent Method: getFooterContent()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getFooterContent();
</script> 		Method: getFooterContent()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getFooterContent();
</script>
Get FooterContent Table Method: getFooterTable()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getFooterTable();
</script> 		Method: getFooterContentTable()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getFooterContentTable();
</script>
Get HeaderContent Method: getHeaderContent()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getHeaderContent();
</script> 		Method: getHeaderContent()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getHeaderContent();
</script>
Get HeaderContent Table Method: getHeaderTable()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getHeaderTable();
</script> 		Method: getHeaderTable()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getHeaderTable();
</script>
Refresh Content Method: refreshContent()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.refreshContent();
</script> 		Method:
contentModule.refreshContentRows()

<ejs-grid id="Grid">
</ejs-grid>
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.
contentModule.refreshContentRows();
</script>
Refresh Data Method: refreshData()

<ej-grid id="Grid">
</ej-grid>
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.refreshData();
</script> 		Not Applicable
Triggers every time a request is
made to access particular cell
information, element and data		 Event: QueryCellInfo

<ej-grid id="Grid"
query-cell-info="queryCellInfo">
</ej-grid>
Script:
<script>
function queryCellInfo(){}
</script> 		Event: QueryCellInfo

<ejs-grid id="Grid"
queryCellInfo="queryCellInfo">
</ejs-grid>
Script:
<script>
function queryCellInfo(){}
</script>
Triggers every time a request is
made to access row information,
element and data		 Event: RowDataBound

<ej-grid id="Grid"
row-data-bound="rowDataBound">
</ej-grid>
Script:
<script>
function rowDataBound(){}
</script> 		Event: RowDataBound

<ejs-grid id="Grid"
rowDataBound="rowDataBound">
</ejs-grid>
Script:
<script>
function rowDataBound(){}
</script>
Triggers for every grid
action before it get started		 Event: ActionBegin

<ej-grid id="Grid"
action-begin="actionBegin">
</ej-grid>
Script:
<script>
function actionBegin(){}
</script> 		Event: ActionBegin

<ejs-grid id="Grid"
actionBegin="actionBegin">
</ejs-grid>
Script:
<script>
function actionBegin(){}
</script>
Triggers for every grid
action success event		 Event: ActionComplete

<ej-grid id="Grid"
action-complete="actionComplete">
</ej-grid>
Script:
<script>
function actionComplete(){}
</script> 		Event: ActionComplete

<ejs-grid id="Grid"
actionComplete="actionComplete">
</ejs-grid>
Script:
<script>
function actionComplete(){}
</script>
Triggers for every grid
server failure event		 Event: ActionFailure

<ej-grid id="Grid"
action-failure="actionFailure">
</ej-grid>
Script:
<script>
function actionFailure(){}
</script> 		Event: ActionFailure

<ejs-grid id="Grid"
actionFailure="actionFailure">
</ejs-grid>
Script:
<script>
function actionFailure(){}
</script>
Triggers when the grid is bound
with data during rendering		 Event: DataBound

<ej-grid id="Grid"
data-bound="dataBound">
</ej-grid>
Script:
<script>
function dataBound(){}
</script> 		Event: DataBound

<ejs-grid id="Grid"
dataBound="dataBound">
</ejs-grid>
Script:
<script>
function dataBound(){}
</script>
Triggers when the grid is
going to destroy		 Event: Destroy

<ej-grid id="Grid"
destroy="destroy">
</ej-grid>
Script:
<script>
function destroy(){}
</script> 		Event: Destroyed

<ejs-grid id="Grid"
destroyed="destroyed">
</ejs-grid>
Script:
<script>
function destroyed(){}
</script>
Triggers when initial load of the grid Event: Load

<ej-grid id="Grid"
load="load">
</ej-grid>
Script:
<script>
function load(){}
</script> 		Event: Load

<ejs-grid id="Grid"
load="load">
</ejs-grid>
Script:
<script>
function load(){}
</script>
Triggers when the grid is rendered completely Event: Create

<ej-grid id="Grid"
create="create">
</ej-grid>
Script:
<script>
function create(){}
</script> 		Event: Created

<ejs-grid id="Grid"
created="created">
</ejs-grid>
Script:
<script>
function created(){}
</script>
Triggers when the record is clicked Event: RecordClick

<ej-grid id="Grid"
record-click="recordClick">
</ej-grid>
Script:
<script>
function recordClick(){}
</script> 		Not Applicable
Triggers when right clicked on grid element Event: RightClick

<ej-grid id="Grid"
right-click="rightClick">
</ej-grid>
Script:
<script>
function rightClick(){}
</script> 		Not Applicable
Triggers when the
record is double clicked		 Event: RecordDoubleClick

<ej-grid id="Grid"
record-double-click="recordDoubleClick">
</ej-grid>
Script:
<script>
function recordDoubleClick(){}
</script> 		Event: RecordDoubleClick

<ejs-grid id="Grid"
recordDoubleClick="recordDoubleClick">
</ejs-grid>
Script:
<script>
function recordDoubleClick(){}
</script>