This article describes the API migration process of Grid component from Essential JS 1 to Essential JS 2.
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") |
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") |
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 |
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"); |
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: calculatePageSizeBy ParentHeight(containerHeight) export class AppComponent { @ViewChild('grid') Grid: EJComponents<any, any>; ngAfterViewInit(){ this.Grid.widget .calculatePageSizeByParentHeight(400); } } |
Not Applicable |
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 |
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{} |
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 |
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 |
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{} |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
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{} |
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']; |
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 |
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 |
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> |
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> |
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' }; |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: isResponsive <ej-grid [isResPonsive]="true" [enableResponsiveRow]="true> </ej-grid> |
Not Applicable |
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> |
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> |
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> |
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: {{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: {{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 |
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 |
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 |
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 |
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"); |
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 |
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; |
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{} |
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; |
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(); |
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{} |