EJ1 API Migration in Angular Grid Component

17 Sep 202524 minutes to read

This article provides comprehensive guidance for migrating Grid component APIs from Essential JS 1 to Essential JS 2. The migration involves changes in component architecture, property names, method signatures, and event handling patterns to align with modern Angular development practices.

Key Migration Benefits

  • Improved Performance: Enhanced rendering engine with optimized data binding
  • Modern Architecture: Built with TypeScript and modern JavaScript features
  • Better Angular Integration: Native Angular component with proper lifecycle management
  • Enhanced Accessibility: WCAG 2.1 compliance and improved screen reader support
  • Simplified API: Streamlined property names and consistent method signatures

Sorting

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

<ej-grid [allowSorting]="true">
</ej-grid> 		Property: allowSorting

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

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.clearSorting();
 }
} 		Method: clearSorting()

@ViewChild('grid') Grid: GridComponent;
this.Grid.clearSorting()
Get the Sorted Columns by using the Fieldname Method: getSortColumnByField(field)

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.getSortColumnByField("OrderID");
 }
} 		Property: sortSettings.columns

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

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.removeSortedColumns("OrderID");
 }
} 		Method: removeSortColumn(fieldName)

@ViewChild('grid') Grid: GridComponent;
this.Grid.removeSortColumn("OrderID")
Sort a Column by using the method Method: sortColumn(columnName, [sortingDirection])

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.sortColumn("OrderID", "ascending");
 }
} 		Method: sortColumn(columnName, Direction)

@ViewChild('grid') Grid: GridComponent;
this.Grid.sortColumn("OrderID", "ascending")

Grouping

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

<ej-grid [allowGrouping]="true">
</ej-grid> 		Property: allowGrouping

<ejs-grid [allowGrouping]="true">
</ejs-grid>
Group Columns initially Property: groupSettings.groupedColumns

<ej-grid [allowGrouping]="true" [groupSettings]="groupOptions">
</ej-grid>
TS
this.groupOptions = {groupedColumns:["OrderID"]}; 		Property: groupSettings.columns

<ejs-grid [allowGrouping]="true" [groupSettings]="groupOptions">
</ejs-grid>
TS
this.groupOptions = {columns:["OrderID"]};
Caption Template Property: groupSettings.captionFormat

<ej-grid [allowGrouping]="true" [groupSettings]="groupOptions">
</ej-grid>
TS
this.groupOptions = {captionFormat: "#template"}; 		Property: groupSettings.captionTemplate

<ejs-grid [allowGrouping]="true" [groupSettings]="groupOptions">
</ejs-grid>
TS
this.groupOptions = {captionTemplate: "#template"};
Show Drop Area Property: groupSettings.showDropArea

<ej-grid [allowGrouping]="true" [groupSettings]="groupOptions">
</ej-grid>
TS
this.groupOptions = {showDropArea:false}; 		Property: groupSettings.showDropArea

<ejs-grid [allowGrouping]="true" [groupSettings]="groupOptions">
</ejs-grid>
TS
this.groupOptions = {showDropArea:false};
Collapse all group caption rows Method: collapseAll()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.collapseAll();
 }
} 		Method: collapseAll()

@ViewChild('grid') Grid: GridComponent;
this.Grid.collapseAll()
Expand all group caption rows Method: expandAll()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.expandAll();
 }
} 		Method: expandAll()

@ViewChild('grid') Grid: GridComponent;
this.Grid.expandAll()
Expand or collapse the row based on the row state in grid Method: expandCollapse($target)

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.expandCollapse($("tr td.e-recordplusexpand > div").first());
 }
} 		Method: expandCollapseRows()

@ViewChild('grid') Grid: GridComponent;
this.Grid.groupModule.expandCollapseRows(
gridObj.getContent().querySelectorAll('.e-recordplusexpand')[0]))
Collapse the group drop area in grid Method: collapseGroupDropArea()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.collapseGroupDropArea();
 }
} 		Not Applicable
Expand the group drop area in grid Method: expandGroupDropArea()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.expandGroupDropArea();
 }
} 		Not Applicable
Group a column by using the method Method: groupColumn(fieldName)

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.groupColumn("OrderID");
 }
} 		Method: groupColumn(fieldName)

@ViewChild('grid') Grid: GridComponent;
this.Grid.groupColumn("OrderID")
Ungroup a grouped column by using the method Method: ungroupColumn(fieldName)

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.ungroupColumn("OrderID");
 }
} 		Method: ungroupColumn(fieldName)

@ViewChild('grid') Grid: GridComponent;
this.Grid.ungroupColumn("OrderID")

Filtering

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

<ej-grid [allowFiltering]="true">
</ej-grid> 		Property: allowFiltering

<ejs-grid [allowFiltering]="true">
</ejs-grid>
Menu Filtering Property: filterSettings.filterType

<ej-grid [allowFiltering]="true" [filterSettings]="filterOptions">
</ej-grid>
TS
this.filterOptions = { filterType : "menu" }; 		Property: filterSettings.type

<ejs-grid [allowFiltering]="true" [filterSettings]="filterOptions">
</ejs-grid>
TS
this.filterOptions = { type:'Menu' };
Excel Filtering Property: filterSettings.filterType

<ej-grid [allowFiltering]="true" [filterSettings]="filterOptions">
</ej-grid>
TS
this.filterOptions = { filterType : "excel" }; 		Property: filterSettings.type

<ejs-grid [allowFiltering]="true" [filterSettings]="filterOptions">
</ejs-grid>
TS
this.filterOptions = { type:'Excel' };
Clear the Filtered values Method: clearFiltering(field) - field is optional

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.clearFiltering();
 }
} 		Method: clearFiltering()

@ViewChild('grid') Grid: GridComponent;
this.Grid.clearFiltering()
Filter a column by using the method Method: filterColumn(fieldName, filterOperator, filterValue, predicate, [matchcase],[actualFilterValue])

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.filterColumn("OrderID",
"equal","10248","and", true);
 }
} 		Method: filterByColumn(fieldName, filterOperator, filterValue, predicate, matchCase, ignoreAccent, actualFilterValue, actualOperator)

@ViewChild('grid') Grid: GridComponent;
this.Grid.filterByColumn("OrderID","equal",10248)
Filter columns by Collection Method: filterColumn(filterCollection)

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.filterColumn([{field:"OrderID",
 operator:"lessthan",value:"10266",
predicate:"and",matchcase:true},
 {field:"EmployeeID",operator:
 "equal",value:2,predicate:"and", matchcase:true}]);
 }
} 		Property: filterSettings.columns

<ejs-grid allowFiltering="true" [filterSettings]="filterOptions">
</ejs-grid>
TS
this.filterOptions = { columns: [{ field: 'ShipCity', matchCase: false, operator: 'startswith', predicate: 'and', value: 'reims' },
{ field: 'ShipCountry', matchCase: false, operator: 'startswith', predicate: 'and', value: 'France' }] };
Get the Filtered Records Method: getFilteredRecords()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.getFilteredRecords();
 }
} 		Not Applicable

Searching

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

<ej-grid [allowSearching]="true" [toolbarSettings]="toolbarOptions">
</ej-grid>
TS
this.toolbarOptions = {showToolbar:true,toolbarItems:["search"]}; 		Property: toolbar

<ejs-grid [toolbar]="toolbar">
</ejs-grid>
TS
this.toolbar = ['Search'];
Clear the Searched values Method: clearSearching()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.clearSearching();
 }
} 		Method: searchModule.search()

@ViewChild('grid') Grid: GridComponent;
this.Grid.searchModule.search("");
Search a value Method: search(searchString)

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.search("France");
 }
} 		Method: searchModule.search()

@ViewChild('grid') Grid: GridComponent;
this.Grid.searchModule.search("France");

Paging

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

<ej-grid [allowPaging]="true">
</ej-grid> 		Property: allowPaging

<ejs-grid [allowPaging]="true">
</ejs-grid>
Customize Paging Property: pageSettings.pageSize

<ej-grid [allowPaging]="true" [pageSettings]="pageOptions">
</ej-grid>
TS
this.pageOptions = {pageSize: 5}; 		Property: pageSettings.pageSize

<ejs-grid [allowPaging]="true" [pageSettings]="pageOptions">
</ejs-grid>
TS
this.pageOptions = {pageSize: 5,pageSizes:["10, 15"]}
Change Page Size Method: changePageSize(pageSize)

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.changePageSize(7);
 }
} 		Property: pageSettings.pageSize

Pagesize can be modified by using the below code
<ejs-grid [allowPaging]="true" [pageSettings]="pageOptions">
</ejs-grid>
TS
this.pageOptions = {pageSize: 7;}
Get Current Page Index Method: getCurrentIndex()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.getCurrentIndex();
 }
} 		Property: pageSettings.currentPage

<ejs-grid [allowPaging]="true">
</ejs-grid>
TS
var currentPage: any = this.pageSettings.currentPage;
Get Pager Element Method: getPager()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.getPager();
 }
} 		Method: getPager()

@ViewChild('grid') Grid: GridComponent;
this.Grid.getPager();
Send a paging request to the specified Page Method: gotoPage(pageIndex)

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.gotoPage(3);
 }
} 		Method: gotoPage(pageIndex)

@ViewChild('grid') Grid: GridComponent;
this.Grid.gotoPage(3);
Calculate Pagesize of grid by using its Parent height(containerHeight) Method: calculatePageSizeByParentHeight(containerHeight)

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget
.calculatePageSizeByParentHeight(400);
 }
} 		Not Applicable

Selection

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

<ej-grid [allowSelection]="true">
</ej-grid> 		Property: allowSelection

<ejs-grid [allowSelection]="true">
</ejs-grid>
Single Selection Property: selectionType

<ej-grid [allowSelection]="true" selectionType="single"
</ej-grid> 		Property: selectionSettings.type

<ejs-grid [allowSelection]="true" [selectionSettings]="selectOptions">
</ejs-grid>
TS
this.selectOptions = { type: 'Single' };
Multiple Selection Property: selectionType

<ej-grid [allowSelection]="true" selectionType="multiple"
</ej-grid> 		Property: selectionSettings.type

<ejs-grid [allowSelection]="true" [selectionSettings]="selectOptions">
</ejs-grid>
TS
this.selectOptions = { type: 'Multiple' };
Row Selection Property: selectionSettings.selectionMode

<ej-grid [allowSelection]="true" [selectionSettings]="selectionMode"
</ej-grid>
TS
this.selectionMode = {selectionMode :["row"]}; 		Property: selectionSettings.mode

<ejs-grid [allowSelection]="true" [selectionSettings]="selectOptions">
</ejs-grid>
TS
this.selectOptions = { mode: 'Row' };
Cell Selection Property: selectionSettings.selectionMode

<ej-grid [allowSelection]="true" [selectionSettings]="selectionMode"
</ej-grid>
TS
this.selectionMode = {selectionMode :["cell"]}; 		Property: selectionSettings.mode

<ejs-grid [allowSelection]="true" [selectionSettings]="selectOptions">
</ejs-grid>
TS
this.selectOptions = { mode: 'Cell' };
Clear the selected Cells Method: clearCellSelection()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.clearCellSelection();
 }
} 		Method: clearCellSelection()

@ViewChild('grid') Grid: GridComponent;
this.Grid.selectionModule.clearCellSelection()
Clear the selected Columns Method: clearColumnSelection([index]) - index is optional

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.clearColumnSelection();
 }
} 		Not Applicable
Get the selected Records Method: getSelectedRecords()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.getSelectedRecords();
 }
} 		Method: getSelectedRecords()

@ViewChild('grid') Grid: GridComponent;
this.Grid.getSelectedRecords()
Get the selected Rows Method: getSelectedRows()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.getSelectedRows();
 }
} 		Method: getSelectedRows()

@ViewChild('grid') Grid: GridComponent;
this.Grid.getSelectedRows()
Select Cells Method: selectCells(rowCellIndexes)

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.selectCells([[1, [4, 3, 2]]]);
 }
} 		Method: selectionModule.selectCells()

@ViewChild('grid') Grid: GridComponent;
this.Grid.selectionModule.selectCells([{ rowIndex: 0, cellIndexes: [0] }, { rowIndex: 1, cellIndexes: [1] }]);
Select Rows Method: selectRows(fromIndex, toIndex)

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.selectRows(1, 4);
 }
} 		Method: selectionModule.selectRows(rowIndexes)

@ViewChild('grid') Grid: GridComponent;
this.Grid.selectionModule.selectRows([0, 2])
Triggers when a cell is selected Event: cellSelected

<ej-grid #grid (cellSelected) = "cellSelected($event)">
</ej-grid>
TS
cellSelected(e: any){} 		Event: cellSelected

<ejs-grid (cellSelected)='cellSelected($event)'>
</ejs-grid>
TS
cellSelected(args: any): void{}
Triggers before the cell is being selected Event: cellSelecting

<ej-grid #grid (cellSelecting) = "cellSelecting($event)">
</ej-grid>
TS
cellSelecting(e: any){} 		Event: cellSelecting

<ejs-grid (cellSelecting)='cellSelecting($event)'>
</ejs-grid>
TS
cellSelecting(args: any): void{}
Triggers when a cell is deselected Event: cellDeselected

<ej-grid #grid (cellDeselected) = "cellDeselected($event)">
</ej-grid>
TS
cellDeselected(e: any){} 		Event: cellDeselected

<ejs-grid (cellDeselected)='cellDeselected($event)'>
</ejs-grid>
TS
cellDeselected(args: any): void{}
Triggers before the cell is being deselected Event: cellDeselecting

<ej-grid #grid (cellDeselecting) = "cellDeselecting($event)">
</ej-grid>
TS
cellDeselecting(e: any){} 		Event: cellDeselecting

<ejs-grid (cellDeselecting)='cellDeselecting($event)'>
</ejs-grid>
TS
cellDeselecting(args: any): void{}
Triggers when the row is selected Event: rowSelected

<ej-grid #grid (rowSelected) = "rowSelected($event)">
</ej-grid>
TS
rowSelected(e: any){} 		Event: rowSelected

<ejs-grid (rowSelected)='rowSelected($event)'>
</ejs-grid>
TS
rowSelected(args: any): void{}
Triggers before the row is being selected Event: rowSelecting

<ej-grid #grid (rowSelecting) = "rowSelecting($event)">
</ej-grid>
TS
rowSelecting(e: any){} 		Event: rowSelecting

<ejs-grid (rowSelecting)='rowSelecting($event)'>
</ejs-grid>
TS
rowSelecting(args: any): void{}
Triggers when the row is deselected Event: rowDeselected

<ej-grid #grid (rowDeselected) = "rowDeselected($event)">
</ej-grid>
TS
rowDeselected(e: any){} 		Event: rowDeselected

<ejs-grid (rowDeselected)='rowDeselected($event)'>
</ejs-grid>
TS
rowDeselected(args: any): void{}
Triggers before the row is being deselected Event: rowDeselecting

<ej-grid #grid (rowDeselecting) = "rowDeselecting($event)">
</ej-grid>
TS
rowDeselecting(e: any){} 		Event: rowDeselecting

<ejs-grid (rowDeselecting)='rowDeselecting($event)'>
</ejs-grid>
TS
rowDeselecting(args: any): void{}
Triggers when the column is selected Event: columnSelected

<ej-grid #grid (columnSelected) = "columnSelected($event)">
</ej-grid>
TS
columnSelected(e: any){} 		Not Applicable
Triggers before the column is being selected Event: columnSelecting

<ej-grid #grid (columnSelecting) = "columnSelecting($event)">
</ej-grid>
TS
columnSelecting(e: any){} 		Not Applicable
Triggers when the column is deselected Event: columnDeselected

<ej-grid #grid (columnDeselected) = "columnDeselected($event)">
</ej-grid>
TS
columnDeselected(e: any){} 		Not Applicable
Triggers before the column is being deselected Event: columnDeselecting

<ej-grid #grid (columnDeselecting) = "columnDeselecting($event)">
</ej-grid>
TS
columnDeselecting(e: any){} 		Not Applicable

Editing

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

<ej-grid [editSettings]="editSettings"
</ej-grid>
TS
this.editSettings = {allowEditing: true, allowAdding: true, allowDeleting: true}; 		Property: editSettings

<ejs-grid [editSettings]="editSettings">
</ejs-grid>
TS
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
Inline Editing Property: editSettings.editMode

<ej-grid [editSettings]="editSettings"
</ej-grid>
TS
this.editSettings = {allowEditing: true, allowAdding: true, allowDeleting: true, editMode : "normal"}; 		Property: editSettings.mode

<ejs-grid [editSettings]="editSettings">
</ejs-grid>
TS
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' };
Dialog Editing Property: editSettings.editMode

<ej-grid [editSettings]="editSettings"
</ej-grid>
TS
this.editSettings = {allowEditing: true, allowAdding: true, allowDeleting: true, editMode : "dialog"}; 		Property: editSettings.mode

<ejs-grid [editSettings]="editSettings">
</ejs-grid>
TS
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' };
Batch Editing Property: editSettings.editMode

<ej-grid [editSettings]="editSettings"
</ej-grid>
TS
this.editSettings = {allowEditing: true, allowAdding: true, allowDeleting: true, editMode : "batch"}; 		Property: editSettings.mode

<ejs-grid [editSettings]="editSettings">
</ejs-grid>
TS
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' };
Add a new Record Method: addRecord([data,[serverChange]])

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.addRecord({"OrderID":12333});
 }
} 		Method: addRecord(data(optional), index(optional))

@ViewChild('grid') Grid: GridComponent;
this.Grid.addRecord({OrderID:10000});
Batch Cancel Method: batchCancel()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.batchCancel();
 }
} 		Not Applicable
Batch Save Method: batchSave()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.batchSave();
 }
} 		Method: batchSave()

@ViewChild('grid') Grid: GridComponent;
this.Grid.editModule.batchSave();
Save a Cell - If preventSaveEvent is true, then it
will prevent the client side cellSave event		 Method: saveCell([preventSaveEvent])

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.saveCell();
 }
} 		Method: saveCell()

@ViewChild('grid') Grid: GridComponent;
this.Grid.editModule.saveCell();
End Edit Method: endEdit()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.endEdit();
 }
} 		Method: endEdit()

@ViewChild('grid') Grid: GridComponent;
this.Grid.endEdit();
Cancel Edit Method: cancelEdit()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.cancelEdit();
 }
} 		Method: closeEdit()

@ViewChild('grid') Grid: GridComponent;
this.Grid.closeEdit();
Delete Record Method: deleteRecord(fieldName, data)

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.deleteRecord("OrderID", { OrderID: 10249, EmployeeID: 3 });
 }
} 		Method: deleteRecord(field, data)

@ViewChild('grid') Grid: GridComponent;
this.Grid.deleteRecord("OrderID", { OrderID: 10249, EmployeeID: 3 });
Delete Row Method: deleteRow($tr)

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.deleteRow($(".gridcontent tr").first());
 }
} 		Method: deleteRow(tr)

@ViewChild('grid') Grid: GridComponent;
this.Grid.deleteRow(this.Grid.getContentTable());
Edit a cell in Batch edit mode Method: editModule.editCell(index, fieldName)

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.editCell(2, "OrderID");
 }
} 		Method: editCell(index, field)

@ViewChild('grid') Grid: GridComponent;
this.Grid.editModule.editCell(0, "CustomerID")
Edit Form Validation Method: editFormValidate()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.editFormValidate();
 }
} 		Method: editModule.formObj.validate()

@ViewChild('grid') Grid: GridComponent;
this.Grid.editModule.formObj.validate()
Get Batch Changes Method: getBatchChanges()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.getBatchChanges();
 }
} 		Method: editModule.getBatchChanges()

@ViewChild('grid') Grid: GridComponent;
this.Grid.editModule.getBatchChanges()
Refresh Batch Edit Changes Method: refreshBatchEditChanges()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.refreshBatchEditChanges();
 }
} 		Not Applicable
Set Default Data for adding Method: setDefaultData(defaultData)

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.setDefaultData({OrderID:10000});
 }
} 		Method: editModule.addRecord()

@ViewChild('grid') Grid: GridComponent;
this.Grid.editModule.addRecord({OrderID:10000});
Start Edit Method: startEdit($tr)

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.startEdit($(".gridcontent tr").first());
 }
} 		Method: startEdit()

@ViewChild('grid') Grid: GridComponent;
this.Grid.startEdit(this.Grid.selectRow(0))
Update Record Method: updateRecord(fieldName, data)

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.updateRecord("OrderID", { OrderID: 10249, EmployeeID: 3 });
 }
} 		Not Applicable
Get Currently edited cell data Method: getCurrentEditCellData()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.getCurrentEditCellData();
 }
} 		Method: editModule.getCurrentEditCellData()

@ViewChild('grid') Grid: GridComponent;
this.Grid.editModule.getCurrentEditCellData();
Set Cell value Method: setCellText(rowIndex, cellIndex, value)

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.setCellText(0, 1, "France");
 }
} 		Method: setCellValue(key, field, value)

@ViewChild('grid') Grid: GridComponent;
this.Grid.setCellValue(10248,"CustomerID","A");
Triggers when adding a
record in batch editing		 Event: batchAdd

<ej-grid #grid (batchAdd) = "batchAdd($event)”>
</ej-grid>
TS
batchAdd(e: any){} 		Event: batchAdd

<ejs-grid (batchAdd)='batchAdd($event)'>
</ejs-grid>
TS
batchAdd(args: any): void{}
Triggers when deleting a
record in batch editing		 Event: batchDelete

<ej-grid #grid (batchDelete) = "batchDelete($event)”>
</ej-grid>
TS
batchDelete(e: any){} 		Event: batchDelete

<ejs-grid (batchDelete)='batchDelete($event)'>
</ejs-grid>
TS
batchDelete(args: any): void{}
Triggers before adding a record in batch editing Event: beforeBatchAdd

<ej-grid #grid (beforeBatchAdd) = "beforeBatchAdd($event)”>
</ej-grid>
TS
beforeBatchAdd(e: any){} 		Event: beforeBatchAdd

<ejs-grid (beforeBatchAdd)='beforeBatchAdd($event)'>
</ejs-grid>
TS
beforeBatchAdd(args: any): void{}
Triggers before deleting a record in batch editing Event: beforeBatchDelete

<ej-grid #grid (beforeBatchDelete) = "beforeBatchDelete($event)”>
</ej-grid>
TS
beforeBatchDelete(e: any){} 		Event: beforeBatchDelete

<ejs-grid (beforeBatchDelete)='beforeBatchDelete($event)'>
</ejs-grid>
TS
beforeBatchDelete(args: any): void{}
Triggers before saving a record in batch editing Event: beforeBatchSave

<ej-grid #grid (beforeBatchSave) = "beforeBatchSave($event)”>
</ej-grid>
TS
beforeBatchSave(e: any){} 		Event: beforeBatchSave

<ejs-grid (beforeBatchSave)='beforeBatchSave($event)'>
</ejs-grid>
TS
beforeBatchSave(args: any): void{}
Triggers before the
record in being edited		 Event: beginEdit

<ej-grid #grid (beginEdit) = "beginEdit($event)”>
</ej-grid>
TS
beginEdit(e: any){} 		Event: beginEdit

<ejs-grid (beginEdit)='beginEdit($event)'>
</ejs-grid>
TS
beginEdit(args: any): void{}
Triggers when the
cell is being edited		 Event: cellEdit

<ej-grid #grid (cellEdit) = "cellEdit($event)”>
</ej-grid>
TS
cellEdit(e: any){} 		Event: cellEdit

<ejs-grid (cellEdit)='cellEdit($event)'>
</ejs-grid>
TS
cellEdit(args: any): void{}
Triggers when the
cell is saved		 Event: cellSave

<ej-grid #grid (cellSave) = "cellSave($event)”>
</ej-grid>
TS
cellSave(e: any){} 		Event: cellSave

<ejs-grid (cellSave)='cellSave($event)'>
</ejs-grid>
TS
cellSave(args: any): void{}
Triggers when the record is added Event: endAdd

<ej-grid #grid (endAdd) = "endAdd($event)”>
</ej-grid>
TS
endAdd(e: any){} 		Event: actionComplete

<ejs-grid (actionComplete)='actionComplete($event)'>
</ejs-grid>
TS
actionComplete(args: any): void{}
Triggers when the record is deleted Event: endDelete

<ej-grid #grid (endDelete) = "endDelete($event)”>
</ej-grid>
TS
endDelete(e: any){} 		Event: actionComplete

<ejs-grid (actionComplete)='actionComplete($event)'>
</ejs-grid>
TS
actionComplete(args: any): void{}
Triggers when the record is edited Event: endEdit

<ej-grid #grid (endEdit) = "endEdit($event)”>
</ej-grid>
TS
endEdit(e: any){} 		Event: actionComplete

<ejs-grid (actionComplete)='actionComplete($event)'>
</ejs-grid>
TS
actionComplete(args: any): void{}

Resizing

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

<ej-grid [allowResizing]="true">
</ej-grid> 		Property: allowResizing

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

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.resizeColumns("OrderID",'150');
 }
} 		Property: columns.width

To resize a column, set width to that particular column and then refresh the grid by using the refresh method
@ViewChild('grid') Grid: GridComponent;
this.Grid.columns[1].width = 100;
this.Grid.refresh();
Triggers when a column resize starts Event: resizeStart

<ej-grid #grid (resizeStart) = "resizeStart($event)”>
</ej-grid>
TS
resizeStart(e: any){} 		Event: resizeStart

<ejs-grid (resizeStart)='resizeStart($event)'>
</ejs-grid>
TS
resizeStart(args: any): void{}
Triggers when a column is resized Event: resized

<ej-grid #grid (resized) = "resized($event)”>
</ej-grid>
TS
resized(e: any){} 		Event: resizeStop

<ejs-grid (resizeStop)='resizeStop($event)'>
</ejs-grid>
TS
resizeStop(args: any): void{}
Triggers when a column resize stops Event: resizeEnd

<ej-grid #grid (resizeEnd) = "resizeEnd($event)”>
</ej-grid>
TS
resizeEnd(e: any){} 		Not Applicable

Reordering

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

<ej-grid [allowReordering]="true">
</ej-grid> 		Property: allowReordering

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

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.reorderColumns("OrderID", "CustomerID");
 }
} 		Method: reorderColumns(fromFieldName, toFieldName)

@ViewChild('grid') Grid: GridComponent;
this.Grid.reorderColumns("OrderID", "CustomerID");
Reorder Rows Method: reorderRows(indexes, toIndex)

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.reorderRows([0,1],3);
 }
} 		Not Applicable

Context Menu

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

<ej-grid [contextMenuSettings]="contextMenuSettings"
</ej-grid>
TS
this.contextMenuSettings = {enableContextMenu: true}; 		Property: contextMenuItems

<ejs-grid [contextMenuItems]="contextMenuItems">
</ejs-grid>
TS
this.contextMenuItems = ['AutoFit', 'AutoFitAll'];
Triggers when context menu item is clicked Event: contextClick

<ej-grid #grid (contextClick) = "contextClick($event)”>
</ej-grid>
TS
contextClick(e: any){} 		Event: contextMenuClick

<ejs-grid (contextMenuClick)='contextMenuClick($event)'>
</ejs-grid>
TS
contextMenuClick(args: any): void{}
Triggers when context menu opens Event: contextOpen

<ej-grid #grid (contextOpen) = "contextOpen($event)”>
</ej-grid>
TS
contextOpen(e: any){} 		Event: contextMenuOpen

<ejs-grid (contextMenuOpen)='contextMenuOpen($event)'>
</ejs-grid>
TS
contextMenuOpen(args: any): void{}

Toolbar

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

<ej-grid [toolbarSettings]="toolbarSettings">
</ej-grid>
TS
this.toolbarSettings = {showToolbar: true,toolbarItems: ["print"]}; 		Property: toolbar

<ejs-grid [toolbar]="toolbar">
</ejs-grid>
TS
this.toolbar = ['Print'];
Add Property: toolbarSettings.toolbarItems

<ej-grid [toolbarSettings]="toolbarSettings">
</ej-grid>
TS
this.toolbarSettings = {showToolbar: true,toolbarItems: ["add"]}; 		Property: toolbar

<ejs-grid [toolbar]="toolbar">
</ejs-grid>
TS
this.toolbar = ['Add'];
Edit Property: toolbarSettings.toolbarItems

<ej-grid [toolbarSettings]="toolbarSettings">
</ej-grid>
TS
this.toolbarSettings = {showToolbar: true,toolbarItems: ["edit"]}; 		Property: toolbar

<ejs-grid [toolbar]="toolbar">
</ejs-grid>
TS
this.toolbar = ['Edit'];
Delete Property: toolbarSettings.toolbarItems

<ej-grid [toolbarSettings]="toolbarSettings">
</ej-grid>
TS
this.toolbarSettings = {showToolbar: true,toolbarItems: ["delete"]}; 		Property: toolbar

<ejs-grid [toolbar]="toolbar">
</ejs-grid>
TS
this.toolbar = ['Delete'];
Update Property: toolbarSettings.toolbarItems

<ej-grid [toolbarSettings]="toolbarSettings">
</ej-grid>
TS
this.toolbarSettings = {showToolbar: true,toolbarItems: ["update"]}; 		Property: toolbar

<ejs-grid [toolbar]="toolbar">
</ejs-grid>
TS
this.toolbar = ['Update'];
Cancel Property: toolbarSettings.toolbarItems

<ej-grid [toolbarSettings]="toolbarSettings">
</ej-grid>
TS
this.toolbarSettings = {showToolbar: true,toolbarItems: ["cancel"]}; 		Property: toolbar

<ejs-grid [toolbar]="toolbar">
</ejs-grid>
TS
this.toolbar = ['Cancel'];
ExcelExport Property: toolbarSettings.toolbarItems

<ej-grid [toolbarSettings]="toolbarSettings">
</ej-grid>
TS
this.toolbarSettings = {showToolbar: true,toolbarItems: ["excelExport"]}; 		Property: toolbar

<ejs-grid [toolbar]="toolbar">
</ejs-grid>
TS
this.toolbar = ['ExcelExport'];
WordExport Property: toolbarSettings.toolbarItems

<ej-grid [toolbarSettings]="toolbarSettings">
</ej-grid>
TS
this.toolbarSettings = {showToolbar: true,toolbarItems: ["wordExport"]}; 		Not Applicable
PdfExport Property: toolbarSettings.toolbarItems

<ej-grid [toolbarSettings]="toolbarSettings">
</ej-grid>
TS
this.toolbarSettings = {showToolbar: true,toolbarItems: ["pdfExport"]}; 		Property: toolbar

<ejs-grid [toolbar]="toolbar">
</ejs-grid>
TS
this.toolbar = ['PdfExport'];
Refresh Toolbar Method: refreshToolbar()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.refreshToolbar();
 }
} 		Not Applicable
Triggers when toolbar item is clicked Event: toolbarClick

<ej-grid #grid (toolbarClick) = "toolbarClick($event)”>
</ej-grid>
TS
toolbarClick(e: any){} 		Event: toolbarClick

<ejs-grid (toolbarClick)='toolbarClick($event)'>
</ejs-grid>
TS
toolbarClick(args: any): void{}

GridLines

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

<ej-grid [gridLines]="gridLines"
</ej-grid>
TS
this.gridLines = ['Both']; 		Property: gridLines

<ejs-grid [gridLines]="gridLines">
</ejs-grid>
TS
this.gridLines = ['Both'];

Templates

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

<ej-grid>
<ng-template #detailsTemplate>
You can add template elements here
</ng-template>
</ej-grid> 		Property: detailTemplate

<ejs-grid >
<ng-template #detailTemplate>
You can add template elements here
</ng-template>
</ejs-grid>
Row Template Property: rowTemplate

<ej-grid>
<ng-template #rowTemplate>
You can add template elements here
</ng-template>
</ej-grid> 		Property: rowTemplate

<ejs-grid >
<ng-template #rowTemplate>
You can add template elements here
</ng-template>
</ejs-grid>
Refresh Template Method: refreshTemplate()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.refreshTemplate();
 }
} 		Not Applicable
Triggers when detail template row is clicked to collapse Event: detailsCollapse

<ej-grid #grid (detailsCollapse) = "detailsCollapse($event)”>
</ej-grid>
TS
detailsCollapse(e: any){} 		Not Applicable
Triggers when detail template row is initialized Event: detailsDataBound

<ej-grid #grid (detailsDataBound) = "detailsDataBound($event)”>
</ej-grid>
TS
detailsDataBound(e: any){} 		Not Applicable
Triggers when detail template
row is clicked to expand		 Event: detailsExpand

<ej-grid #grid (detailsExpand) = "detailsExpand($event)”>
</ej-grid>
TS
detailsExpand(e: any){} 		Event: detailDataBound

<ejs-grid (detailDataBound)='detailDataBound($event)'>
</ejs-grid>
TS
detailDataBound(args: any): void{}
Triggers when refresh the template column elements in the Grid Event: templateRefresh

<ej-grid #grid (templateRefresh) = "templateRefresh($event)”>
</ej-grid>
TS
templateRefresh(e: any){} 		Not Applicable

Row/Column Drag and Drop

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

<ej-grid [allowRowDragAndDrop]="true"
</ej-grid> 		Property: allowRowDragAndDrop

<ejs-grid [allowRowDragAndDrop]="true">
</ejs-grid>
Triggers when the row is
being dragged		 Event: rowDrag

<ej-grid #grid (rowDrag) = "rowDrag($event)”>
</ej-grid>
TS
rowDrag(e: any){} 		Event: rowDrag

<ejs-grid (rowDrag)='rowDrag($event)'>
</ejs-grid>
TS
rowDrag(args: any): void{}
Triggers when the row drag begins Event: rowDragStart

<ej-grid #grid (rowDragStart) = "rowDragStart($event)”>
</ej-grid>
TS
rowDragStart(e: any){} 		Event: rowDragStart

<ejs-grid (rowDragStart)='rowDragStart($event)'>
</ejs-grid>
TS
rowDragStart(args: any): void{}
Triggers when the row is dropped Event: rowDrop

<ej-grid #grid (rowDrop) = "rowDrop($event)”>
</ej-grid>
TS
rowDrop(e: any){} 		Event: rowDrop

<ejs-grid (rowDrop)='rowDrop($event)'>
</ejs-grid>
TS
rowDrop(args: any): void{}
Triggers before the row is being dropped Event: beforeRowDrop

<ej-grid #grid (beforeRowDrop) = "beforeRowDrop($event)”>
</ej-grid>
TS
beforeRowDrop(e: any){} 		Not Applicable
Triggers when the
column is being dragged		 Event: columnDrag

<ej-grid #grid (columnDrag) = "columnDrag($event)”>
</ej-grid>
TS
columnDrag(e: any){} 		Not Applicable
Triggers when the
column drag begins		 Event: columnDragStart

<ej-grid #grid (columnDragStart) = "columnDragStart($event)”>
</ej-grid>
TS
columnDragStart(e: any){} 		Not Applicable
Triggers when the
column is dropped		 Event: columnDrop

<ej-grid #grid (columnDrop) = "columnDrop($event)”>
</ej-grid>
TS
columnDrop(e: any){} 		Not Applicable

Frozen Rows and Columns

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

<ej-grid [allowScrolling]="true" [scrollSettings]="scrollSettings">
</ej-grid>
TS
this.scrollSettings = {frozenRows: 2, frozenColumn: 1}; 		Property: frozenRows

<ejs-grid [frozenRows]='2' [frozenColumns]='1'>
</ejs-grid>
isFrozen Property: columns.isFrozen

<ej-grid>
<e-columns>
<e-column field="Freight" [isFrozen]="true">
</e-column>
</ej-grid> 		Property: columns.isFrozen

<ejs-grid>
<e-columns>
<e-column field='OrderID' [isFrozen]="true">
</e-column>
</ejs-grid>

ForeignKey

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

<ej-grid>
<e-columns>
<e-column field="EmployeeID" foreignKeyField= "EmployeeID" foreignKeyValue= "FirstName" [dataSource]= "employeedata">
</e-column>
</e-columns>
</ej-grid> 		Property: columns.foreignKeyValue

<ejs-grid>
<e-columns>
<e-column field='OrderID' foreignKeyValue='FirstName' [dataSource]='employeeData'>
</e-column>
</e-columns>
</ejs-grid>

Auto Wrap

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

<ej-grid [allowTextWrap]="true">
</ej-grid> 		Property: allowTextWrap

<ejs-grid [allowTextWrap]='true'>
</ejs-grid>
Both Property: textWrapSettings.wrapMode

<ej-grid [allowTextWrap]="true" [textWrapSettings]="textWrapSettings">
</ej-grid>
TS
this.textWrapSettings = { wrapMode: "both"}; 		Property: textWrapSettings.wrapMode

<ejs-grid [allowTextWrap]='true' [textWrapSettings]='textWrapSettings'>
</ejs-grid>
TS
this.textWrapSettings = { wrapMode: 'Both' };
Header Property: textWrapSettings.wrapMode

<ej-grid allowTextWrap"true" [textWrapSettings]="textWrapSettings">
</ej-grid>
TS
this.textWrapSettings = { wrapMode: "header"}; 		Property: textWrapSettings.wrapMode

<ejs-grid [allowTextWrap]='true' [textWrapSettings]='textWrapSettings'>
</ejs-grid>
TS
this.textWrapSettings = { wrapMode: 'Header' };
Content Property: textWrapSettings.wrapMode

<ej-grid [allowTextWrap]="true" [textWrapSettings]="textWrapSettings">
</ej-grid>
TS
this.textWrapSettings = { wrapMode: "content"}; 		Property: textWrapSettings.wrapMode

<ejs-grid [allowTextWrap]='true' [textWrapSettings]='textWrapSettings'>
</ejs-grid>
TS
this.textWrapSettings = { wrapMode: 'Content' };

Responsive

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

<ej-grid [isResPonsive]="true" [enableResponsiveRow]="true>
</ej-grid> 		Not Applicable

State Persistence

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

<ej-grid [enablepersistence]="true">
</ej-grid> 		Property: enablepersistence

<ejs-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 [enableRTl]="true" >
</ej-grid> 		Property: enableRTl

<ejs-grid [enableRTl]='true' >
</ejs-grid>

ToolTip

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

<ej-grid>
<e-columns>
<e-column field="ShipName" [clipMode]="clip">
</e-column>
<e-column field="ShipCity" [clipMode]="ellipsis">
</e-column>
<e-column field="Freight" [clipMode]="ellipsiswithtooltip">
</e-column>
</e-columns>
</ej-grid> 		Property: clipMode

<ejs-grid>
<e-columns>
<e-column field='ShipName' [clipMode]='Clip'>
</e-column>
<e-column field='ShipCity' [clipMode]='Ellipsis'>
</e-column>
<e-column field='Freight' [clipMode]='EllipsisWithTooltip'>
</e-column>
</e-columns>
</ejs-grid>

Aggregate/Summary

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

<ej-grid [showSummary]="true" [summaryRows]="summaryrows">
</ej-grid>
TS
export class AppComponent {
public summaryrows;
constructor(){
this.summaryrows = [{
title: "Sum",
summaryColumns: [{
summaryType: ej.Grid.SummaryType.Sum,
displayColumn: "Freight",
dataMember: "Freight",
format: "{0:C2}"
}]
}]}} 		Property: aggregates

<ejs-grid>
<e-aggregates>
<e-aggregate>
<e-columns>
<e-column type="Sum" field="Freight" format="C2">
<ng-template #footerTemplate let-data>Sum:
</ng-template>
</e-column>
</e-columns>
</e-aggregate>
</e-aggregates>
</ejs-grid>
Caption Aggregate Property: showSummary

<ej-grid [showSummary]="true" [summaryRows]="summaryrows">
</ej-grid>
TS
export class AppComponent {
public summaryrows;
constructor(){
this.summaryrows = [{
showCaptionSummary: true,
summaryColumns: [{
summaryType: ej.Grid.SummaryType.Average,
displayColumn: "Freight",
dataMember: "Freight",
format: "{0:C2}"
prefix: "Average = "
}],
showTotalSummary: false
}]}} 		Property: aggregates

<ejs-grid>
<e-aggregates>
<e-aggregate>
<e-columns>
<e-column type="Sum" field="Freight" format="C2">
<ng-template #groupCaptionTemplate let-data>Sum:
</ng-template>
</e-column>
</e-columns>
</e-aggregate>
</e-aggregates>
</ejs-grid>
Get Summary values Method: getSummaryValues(summaryCol, summaryData)

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.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)

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.addIgnoreOnExport(filterSettings);
 }
} 		Not Applicable

Columns

Behavior API in Essential JS 1 API in Essential JS 2
Add or Remove Columns Method: columns(columnDetails, [action])-columnDetails(array of columns or string of field name)

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.columns("OrderID", "remove");
  this.Grid.widget.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 this.Grid.columns = [{field:"OrderID"}, {field:"CustomerId"}, {field:"ShipAddress"}]; Then to remove the CustomerId column, reset the column property as, this.Grid.columns = [{field:"OrderID"}, {field:"ShipAddress"}];
Get Column By Field Method: getColumnByField(fieldName)

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.getColumnByField("OrderID");
 }
} 		Method: getColumnByField(fieldName)

@ViewChild('grid') Grid: GridComponent;
this.Grid.getColumnByField("OrderID")
Get Column By HeaderText Method: getColumnByHeaderText(headerText)

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.getColumnByHeaderText("Order ID");
 }
} 		You can get the column object by iterating the gridObj.columns with the corresponding headerText
Get Column By Index Method: getColumnByIndex(columnIndex)

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.getColumnByIndex(1);
 }
} 		Method: getColumnByIndex(columnIndex)

@ViewChild('grid') Grid: GridComponent;
this.Grid.getColumnByIndex(1)
Get Column Fieldnames Method: getColumnFieldNames()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.getColumnFieldNames();
 }
} 		Method: getColumnFieldNames()

@ViewChild('grid') Grid: GridComponent;
this.Grid.getColumnFieldNames()
Get Column Index By Field Method: getColumnIndexByField(fieldName)

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.getColumnIndexByField("OrderID");
 }
} 		Method: getColumnIndexByField()

@ViewChild('grid') Grid: GridComponent;
this.Grid.getColumnIndexByField("OrderID")
Get Column Index By HeaderText Method: getColumnIndexByHeaderText(headerText, [field])-field is optional

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.getColumnIndexByHeaderText("OrderID");
 }
} 		You can get the Column object with the index value by iterating the gridObj.columns with headerText
Set Width to columns Method: setWidthToColumns()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.setWidthToColumns();
 }
} 		Method: widthService.setWidthToColumns()

@ViewChild('grid') Grid: GridComponent;
this.Grid.widthService.setWidthToColumns()
Get HeaderText By FieldName Method: getHeaderTextByFieldName()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.getHeaderTextByFieldName("OrderID");
 }
} 		Not Applicable
Get Hidden Column names Method: getHiddenColumnNames()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.getHiddenColumnNames();
 }
} 		Not Applicable
Get Visible Column name Method: getVisibleColumnNames()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.getVisibleColumnNames();
 }
} 		Method: getVisibleColumns()

@ViewChild('grid') Grid: GridComponent;
this.Grid.getVisibleColumns()
Select a Column Method: selectColumns(index)

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.selectColumns(1);
 }
} 		Not Applicable
Select the Specified Columns based on the index provided Method: selectColumns(columnIndex(fromIndex),[toIndex])

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.selectColumns(1, 4);
 }
} 		Not Applicable

Row

Behavior API in Essential JS 1 API in Essential JS 2
Enable Hover Property: enableRowHover

<ej-grid [enableRowHover]="true" >
</ej-grid> 		Property: enableHover

<ejs-grid [enableHover]='true'>
</ejs-grid>
Get Row Height Method: getRowHeight()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.getRowHeight();
 }
} 		Method: getRowHeight()

@ViewChild('grid') Grid: GridComponent;
this.Grid.getRowHeight();
Refresh Row Height Method: rowHeightRefresh()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.rowHeightRefresh();
 }
} 		Not Applicable
Get index by Row Element Method: getIndexByRow($tr)

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.getIndexByRow($(".gridcontent tr").first());
 }
} 		Not Applicable
Get Row by its Index Method: getRowByIndex(from, to)

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.getRowByIndex(3, 6);
 }
} 		Method: getRowByIndex(index)

@ViewChild('grid') Grid: GridComponent;
this.Grid.getRowByIndex(1);
Get rendered rows Method: getRows()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.getRows();
 }
} 		Method: getRows()

@ViewChild('grid') Grid: GridComponent;
this.Grid.getRows();
Triggers while hover the grid row Event: rowHover

<ej-grid #grid (rowHover) = "rowHover($event)”>
</ej-grid>
TS
rowHover(e: any){} 		Not Applicable

Show/Hide Columns

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

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.hideColumns("Order ID");
 }
} 		Method: hideColumns(headerText)

@ViewChild('grid') Grid: GridComponent;
this.Grid.hideColumns("Order ID");
Show Columns by using method Method: showColumns(headerText)

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.showColumns("Order ID");
 }
} 		Method: showColumns(headerText)

@ViewChild('grid') Grid: GridComponent;
this.Grid.showColumns("Order ID");

Column Chooser

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

<ej-grid [showColumnChooser]="true">
<e-columns>
<e-column field="ShipName" [showInColumnChooser]="false">
</e-column>
<e-column field="ShipCity">
</e-column>
</e-columns>
</ej-grid> 		Property: showColumnChooser

<ejs-grid [showColumnChooser]= 'true'>
<e-columns>
<e-column field='CustomerName' [showInColumnChooser]='false'>
</e-column>
<e-column field='Country'>
</e-column>
</e-columns>
</ejs-grid>
Behavior API in Essential JS 1 API in Essential JS 2
Refresh Header Method: refreshHeader()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.refreshHeader();
 }
} 		Method: refreshHeader()

@ViewChild('grid') Grid: GridComponent;
this.Grid.refreshHeader();
Triggers every time a request is made to access particular header cell information, element and data. Event: mergeHeaderCellInfo

<ej-grid #grid (mergeHeaderCellInfo) = "mergeHeaderCellInfo($event)”>
</ej-grid>
TS
mergeHeaderCellInfo(e: any){} 		Not Applicable
Triggers every time a request is made to access particular cell information, element and data Event: mergeCellInfo

<ej-grid #grid (mergeCellInfo) = mergeCellInfo($event)”>
</ej-grid>
TS
mergeCellInfo(e: any){} 		Not Applicable

DataSource

Behavior API in Essential JS 1 API in Essential JS 2
DataSource-When templateRefresh(optional) is set true, both header and contents get refreshed Method: dataSource(newDatasource,[templateRefresh])

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.dataSource(newdataSource);
 }
} 		Property: dataSource

@ViewChild('grid') Grid: GridComponent;
this.Grid.datasource = newdataSource;

Print

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

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.print();
 }
} 		Method: print()

@ViewChild('grid') Grid: GridComponent;
this.Grid.print();
Triggers before printing the grid Event: beforePrint

<ej-grid #grid (beforePrint) = "beforePrint($event)”>
</ej-grid>
TS
beforePrint(e: any){} 		Event: beforePrint

<ejs-grid (beforePrint)='beforePrint($event)'>
</ejs-grid>
TS
beforePrint(args: any): void{}

Scrolling

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

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.getScrollObject();
 }
} 		Property: grid.scrollModule

@ViewChild('grid') Grid: GridComponent;
var scrollObj = this.Grid.scrollModule;

PrimaryKey

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

<ej-grid >
<e-columns>
<e-column field="OrderID" [isPrimaryKey]="true">
</e-column>
</e-columns>
</ej-grid> 		Property: columns.isPrimaryKey

<ejs-grid>
<e-columns>
<e-column field='OrderID' [isPrimaryKey]='true'>
</e-column>
</e-columns>
</ejs-grid>
Get the PrimaryKey fieldnames Method: getPrimaryKeyFieldNames()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.getPrimaryKeyFieldNames();
 }
} 		Method: getPrimaryKeyFieldNames()

@ViewChild('grid') Grid: GridComponent;
this.Grid.getPrimaryKeyFieldNames();

Grid

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

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.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)

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.setDimension(300, 400);
 }
} 		Not Applicable
set maximum width for mobile Method: setPhoneModeMaxWidth(value)

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.setPhoneModeMaxWidth(500);
 }
} 		Not Applicable
Render the grid Method: render()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.render();
 }
} 		Method: render()

@ViewChild('grid') Grid: GridComponent;
this.Grid.render();
Reset the model collections like pageSettings,
groupSettings, filterSettings, sortSettings and summaryRows		 Method: resetModelCollections()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.resetModelCollections();
 }
} 		Not Applicable
Destroy the grid Method: destroy()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.destroy();
 }
} 		Method: destroy()

@ViewChild('grid') Grid: GridComponent;
this.Grid.destroy();
Get Content Element Method: getContent()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.getContent();
 }
} 		Method: getContent()

@ViewChild('grid') Grid: GridComponent;
this.Grid.getContent();
Get Content Table Method: getContentTable()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.getContentTable();
 }
} 		Method: getContentTable()

@ViewChild('grid') Grid: GridComponent;
this.Grid.getContentTable();
Get Current View Data Method: getCurrentViewData()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.getCurrentViewData();
 }
} 		Method: getCurrentViewRecords()

@ViewChild('grid') Grid: GridComponent;
this.Grid.getCurrentViewRecords();
Get Data Row Method: getDataByIndex(rowIndex)

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.getDataByIndex(0);
 }
} 		Method: getDataRows()

@ViewChild('grid') Grid: GridComponent;
this.Grid.getDataRows();
Get Fieldname by using the headertext Method: getFieldNameByHeaderText(headerText)

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.getFieldNameByHeaderText("Order ID");
 }
} 		Not Applicable
Get FooterContent Method: getFooterContent()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.getFooterContent();
 }
} 		Method: getFooterContent()

@ViewChild('grid') Grid: GridComponent;
this.Grid.getFooterContent();
Get FooterContent Table Method: getFooterTable()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.getFooterTable();
 }
} 		Method: getFooterContentTable()

@ViewChild('grid') Grid: GridComponent;
this.Grid.getFooterContentTable();
Get HeaderContent Method: getHeaderContent()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.getHeaderContent();
 }
} 		Method: getHeaderContent()

@ViewChild('grid') Grid: GridComponent;
this.Grid.getHeaderContent();
Get HeaderContent Table Method: getHeaderTable()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.getHeaderTable();
 }
} 		Method: getHeaderTable()

@ViewChild('grid') Grid: GridComponent;
this.Grid.getHeaderTable();
Refresh Content Method: refreshContent()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.refreshContent();
 }
} 		Method: contentModule.refreshContentRows()

@ViewChild('grid') Grid: GridComponent;
this.Grid.contentModule.refreshContentRows();
Refresh Data Method: refreshData()

export class AppComponent {
 @ViewChild('grid') Grid: EJComponents<any, any>;
 ngAfterViewInit(){
  this.Grid.widget.refreshData();
 }
} 		Not Applicable
Triggers every time a request is
made to access particular cell
information, element and data		 Event: queryCellInfo

<ej-grid #grid (queryCellInfo) = "queryCellInfo($event)”>
TS
queryCellInfo(e: any){} 		Event: queryCellInfo

<ejs-grid (queryCellInfo)='queryCellInfo($event)'>
TS
queryCellInfo(args: any): void{}
Triggers every time a request is
made to access row information,
element and data		 Event: rowDataBound

<ej-grid #grid (rowDataBound) = "rowDataBound($event)”>
</ej-grid>
TS
rowDataBound(e: any){} 		Event: rowDataBound

<ejs-grid (rowDataBound)='rowDataBound($event)'>
</ejs-grid>
TS
rowDataBound(args: any): void{}
Triggers for every grid
action before it get started		 Event: actionBegin

<ej-grid #grid (actionBegin) = "actionBegin($event)”>
</ej-grid>
TS
actionBegin(e: any){} 		Event: actionBegin

<ejs-grid (actionBegin)='actionBegin($event)'>
</ejs-grid>
TS
actionBegin(args: any): void{}
Triggers for every grid
action success event		 Event: actionComplete

<ej-grid #grid (actionComplete) = "actionComplete($event)”>
</ej-grid>
TS
actionComplete(e: any){} 		Event: actionComplete

<ejs-grid (actionComplete)='actionComplete($event)'>
</ejs-grid>
TS
actionComplete(args: any): void{}
Triggers for every grid
server failure event		 Event: actionFailure

<ej-grid #grid (actionFailure) = "actionFailure($event)”>
</ej-grid>
TS
actionFailure(e: any){} 		Event: actionFailure

<ejs-grid (actionFailure)='actionFailure($event)'>
</ejs-grid>
TS
actionFailure(args: any): void{}
Triggers when the grid is bound
with data during rendering		 Event: dataBound

<ej-grid #grid (dataBound) = "dataBound($event)”>
</ej-grid>
TS
dataBound(e: any){} 		Event: dataBound

<ejs-grid (dataBound)='dataBound($event)'>
</ejs-grid>
TS
dataBound(args: any): void{}
Triggers when the grid is
going to destroy		 Event: destroy

<ej-grid #grid (destroy) = "destroy($event)”>
</ej-grid>
TS
destroy(e: any){} 		Event: destroyed

<ejs-grid (destroyed)='destroyed($event)'>
</ejs-grid>
TS
destroyed(args: any): void{}
Triggers when initial load of the grid Event: load

<ej-grid #grid (load) = "load($event)”>
</ej-grid>
TS
load(e: any){} 		Event: load

<ejs-grid (load)='load($event)'>
</ejs-grid>
TS
load(args: any): void{}
Triggers when the grid is rendered completely Event: create

<ej-grid #grid (create) = "create($event)”>
</ej-grid>
TS
create(e: any){} 		Event: created

<ejs-grid (created)='created($event)'>
</ejs-grid>
TS
created(args: any): void{}
Triggers when the record is clicked Event: recordClick

<ej-grid #grid (recordClick) = "recordClick($event)”>
</ej-grid>
TS
recordClick(e: any){} 		Not Applicable
Triggers when right clicked on grid element Event: rightClick

<ej-grid #grid (rightClick) = "rightClick($event)”>
</ej-grid>
TS
rightClick(e: any){} 		Not Applicable
Triggers when the
record is double clicked		 Event: recordDoubleClick

<ej-grid #grid (recordDoubleClick) = "recordDoubleClick($event)”>
</ej-grid>
TS
recordDoubleClick(e: any){} 		Event: recordDoubleClick
<ejs-grid (recordDoubleClick)='recordDoubleClick($event)'>
</ejs-grid>
TS
recordDoubleClick(args: any): void{}