Ej1 api migration in EJ2 TypeScript Grid control
This article describes the API migration process of Grid component from Essential JS 1 to Essential JS 2.
Sorting
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default |
Property: allowSorting var gridObj = new ej.Grid($("#Grid"), { allowSorting: true });
|
Property: allowSorting let grid: Grid = new Grid({ allowSorting: true }); gridObj.appendTo('#Grid');
|
Clear the Sorted columns |
Method: clearSorting() var gridObj = $("#Grid").data("ejGrid"); gridObj.clearSorting();
|
Method: clearSorting() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.clearSorting()
|
Get the Sorted Columns by using the Fieldname |
Method: getsortColumnByField(field) var gridObj = $("#Grid").data("ejGrid"); gridObj.getsortColumnByField("OrderID");
|
Property: sortSettings.columns Sorted Column for a particular field can be get by iterating the sortSettings.columns with the fieldname |
Remove the Sorted Columns |
Method: removeSortedColumns(fieldName) var gridObj = $("#Grid").data("ejGrid"); gridObj.removeSortedColumns("OrderID");
|
Method: removeSortColumn() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.removeSortColumn("OrderID")
|
Sort a Column by using the method |
Method: sortColumn(columnName, [sortingDirection]) var gridObj = $("#Grid").data("ejGrid"); gridObj.sortColumn("OrderID", "ascending");
|
Method: sortColumn(columnName, Direction) var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.sortColumn("OrderID", "ascending");
|
Grouping
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default |
Property: allowGrouping var gridObj = new ej.Grid($("#Grid"), { allowGrouping: true });
|
Property: allowGrouping let grid: Grid = new Grid({ allowGrouping: true }); gridObj.appendTo('#Grid');
|
Group Columns initially |
Property: groupSettings.groupedColumns var gridObj = new ej.Grid($("#Grid"), { allowGrouping: true, groupSettings: { groupedColumns:[“OrderID”, “CustomerID”] } });
|
Property: groupSettings.columns let grid: Grid = new Grid({ allowGrouping: true, groupSettings: { columns: [“OrderID”, “CustomerID”] } }); gridObj.appendTo('#Grid');
|
Caption Template |
Property: groupSettings.captionFormat var gridObj = new ej.Grid($("#Grid"), { allowGrouping: true, groupSettings: { captionFormat: "#template" } });
|
Property: groupSettings.captionTemplate let grid: Grid = new Grid({ allowGrouping: true, groupSettings: { captionTemplate: '#template' } }); gridObj.appendTo('#Grid');
|
Show Drop Area |
Property: groupSettings.showDropArea var gridObj = new ej.Grid($("#Grid"), { allowGrouping: true, groupSettings: { showDropArea: false } });
|
Property: groupSettings.showDropArea let grid: Grid = new Grid({ allowGrouping: true, groupSettings: { showDropArea: false } }); gridObj.appendTo('#Grid');
|
Collapse all group caption rows |
Method: collapseAll() var gridObj = $("#Grid").data("ejGrid"); gridObj.collapseAll();
|
Method: collapseAll() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.groupModule.collapseAll()
|
Expand all group caption rows |
Method: expandAll() var gridObj = $("#Grid").data("ejGrid"); gridObj.expandAll();
|
Method: expandAll() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.groupModule.expandAll()
|
Expand or collapse the row based on the row state in grid |
Method: expandCollapse($target) var gridObj = $("#Grid").data("ejGrid"); gridObj.expandCollapse($("tr td.recordplusexpand > div").first());
|
Method: expandCollapseRows() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.groupModule.expandCollapseRows( gridObj.getContent().querySelectorAll('.e-recordplusexpand')[0]))
|
Collapse the group drop area in grid |
Method: collapseGroupDropArea() var gridObj = $("#Grid").data("ejGrid"); gridObj.collapseGroupDropArea();
|
Not Applicable |
Expand the group drop area in grid |
Method: expandGroupDropArea() var gridObj = $("#Grid").data("ejGrid"); gridObj.expandGroupDropArea();
|
Not Applicable |
Group a column by using the method |
Method: groupColumn(fieldName) var gridObj = $("#Grid").data("ejGrid"); gridObj.groupColumn("OrderID");
|
Method: groupColumn(fieldName) var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.groupColumn("OrderID")
|
Ungroup a grouped column by using the method |
Method: ungroupColumn(fieldName) var gridObj = $("#Grid").data("ejGrid"); gridObj.ungroupColumn("OrderID");
|
Method: ungroupColumn(fieldName) var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.ungroupColumn("OrderID")
|
Filtering
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default |
Property: allowFiltering var gridObj = new ej.Grid($("#Grid"), { allowFiltering: true });
|
Property: allowFiltering let grid: Grid = new Grid({ allowFiltering: true }); gridObj.appendTo('#Grid');
|
Menu Filtering |
Property: filterSettings.filterType var gridObj = new ej.Grid($("#Grid"), { allowFiltering: true, filterSettings: { filterType : "menu" } });
|
Property: filterSettings.type let grid: Grid = new Grid({ allowFiltering: true, filterSettings: { type:'Menu' } }); gridObj.appendTo('#Grid');
|
Excel Filtering |
Property: filterSettings.filterType var gridObj = new ej.Grid($("#Grid"), { allowFiltering: true, filterSettings: { filterType : "excel" } });
|
Property: filterSettings.type let grid: Grid = new Grid({ allowFiltering: true, filterSettings: { type:'Excel' } }); gridObj.appendTo('#Grid');
|
Clear the Filtered values |
Method: clearFiltering(field) - field is optional var gridObj = $("#Grid").data("ejGrid"); gridObj.clearFiltering();
|
Method: clearFiltering() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.clearFiltering()
|
Filter a column by using the method |
Method: filterColumn(fieldName, filterOperator, filterValue, predicate, [matchcase],[actualFilterValue]) var gridObj = $("#Grid").data("ejGrid"); gridObj.filterColumn("OrderID", "equal","10248","and", true);
|
Method: filterByColumn(fieldName, filterOperator, filterValue, predicate, matchCase, ignoreAccent, actualFilterValue, actualOperator) var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.filterByColumn("OrderID","equal",10248)
|
Filter columns by Collection |
Method: filterColumn(filterCollection) var gridObj = $("#Grid").data("ejGrid"); gridObj.filterColumn([{field:"OrderID", operator:"lessthan",value:"10266", predicate:"and",matchcase:true}, {field:"EmployeeID",operator: "equal",value:2,predicate:"and", matchcase:true}])
|
Property: filterSettings.columns var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.filterSettings:{columns: [{ field: 'ShipCity', matchCase: false, operator: 'startswith', predicate: 'and', value: 'reims' }]}
|
Get the Filtered Records |
Method: getFilteredRecords() var gridObj = $("#Grid").data("ejGrid"); gridObj.getFilteredRecords();
|
Not Applicable |
Searching
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default |
Property: toolbarSettings.toolbarItems var gridObj = new ej.Grid($("#Grid"), { showToolbar: true, toolbarItems : ["search"] allowSearching : true });
|
Property: toolbar let grid: Grid = new Grid({ toolbar: ['Search'] }); gridObj.appendTo('#Grid');
|
Clear the Searched values |
Method: clearSearching() var gridObj = $("#Grid").data("ejGrid"); gridObj.clearSearching();
|
Method: searchModule.search() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.searchModule.search("");
|
Search a value |
Method: search(searchString) var gridObj = $("#Grid").data("ejGrid"); gridObj.search("France");
|
Method: searchModule.search() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.searchModule.search("France");
|
Paging
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default |
Property: allowPaging var gridObj = new ej.Grid($("#Grid"), { allowPaging: true });
|
Property: allowPaging let grid: Grid = new Grid({ allowPaging: true }); gridObj.appendTo('#Grid');
|
Customize Paging |
Property: pageSettings.pageSize var gridObj = new ej.Grid($("#Grid"), { allowPaging: true, pageSettings: { pageSize: 8,pageSizeList: [5, 10],pageCount:3 } });
|
Property: pageSettings.pageSize let grid: Grid = new Grid({ allowPaging: true, pageSettings: { pageSize:8,pageSizes: [5, 10] } }); gridObj.appendTo('#Grid');
|
Change Page Size |
Method: changePageSize(pageSize) var gridObj = $("#Grid").data("ejGrid"); gridObj.changePageSize(7);
|
Property: pageSettings.pageSize Pagesize can be modified dynamically by using the below code pageSettings.pageSize = 7;
|
Get Current Page Index |
Method: getCurrentIndex() var gridObj = $("#Grid").data("ejGrid"); gridObj.getCurrentIndex();
|
Property: pageSettings.currentPage var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.pageSettings.currentPage;
|
Get Pager Element |
Method: getPager() var gridObj = $("#Grid").data("ejGrid"); gridObj.getPager();
|
Method: getPager() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.getPager();
|
Send a paging request to specified Page |
Method: gotoPage(pageIndex) var gridObj = $("#Grid").data("ejGrid"); gridObj.gotoPage(3);
|
Method: gotoPage(pageIndex) var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.gotoPage(3);
|
Calculate Pagesize of grid by using its Parent height(containerHeight) |
Method: calculatePageSizeBy ParentHeight(containerHeight) var gridObj = $("#Grid").data("ejGrid"); gridObj. calculatePageSizeByParentHeight(400);
|
Not Applicable |
Selection
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default |
Property: allowSelection var gridObj = new ej.Grid($("#Grid"), { allowSelection: true });
|
Property: allowSelection let grid: Grid = new Grid({ allowSelection: true }); gridObj.appendTo('#Grid');
|
Single Selection |
Property: selectionTypevar gridObj = new ej.Grid($("#Grid"), { allowSelection: true, selectionType : "single" });
|
Property: selectionSettings.typelet grid: Grid = new Grid({ allowSelection: true, selectionSettings: { type : "Single" } }); gridObj.appendTo('#Grid');
|
Multiple Selection |
Property: selectionType var gridObj = new ej.Grid($("#Grid"), { allowSelection: true, selectionType : "multiple" });
|
Property: selectionSettings.typelet grid: Grid = new Grid({ allowSelection: true, selectionSettings: { type : "Multiple" } }); gridObj.appendTo('#Grid');
|
Row Selection |
Property: selectionSettings.selectionMode var gridObj = new ej.Grid($("#Grid"), { allowSelection: true, selectionSettings : {selectionMode: ["row"]} });
|
Property: selectionSettings.mode let grid: Grid = new Grid({ allowSelection: true, selectionSettings: { mode: 'Row' } }); gridObj.appendTo('#Grid');
|
Cell Selection |
Property: selectionSettings.selectionMode var gridObj = new ej.Grid($("#Grid"), { allowSelection: true, selectionSettings : {selectionMode: ["cell"]} });
|
Property: selectionSettings.mode let grid: Grid = new Grid({ allowSelection: true, selectionSettings: { mode: 'Cell' } }); gridObj.appendTo('#Grid');
|
Clear the selected Cells |
Method: clearCellSelection() var gridObj = $("#Grid").data("ejGrid"); gridObj.clearCellSelection();
|
Method: clearCellSelection() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.selectionModule.clearCellSelection()
|
Clear the selected Columns |
Method: clearColumnSelection([index]) - index is optional var gridObj = $("#Grid").data("ejGrid"); gridObj.clearColumnSelection();
|
Not Applicable |
Get the selected Records |
Method: getSelectedRecords() var gridObj = $("#Grid").data("ejGrid"); gridObj.getSelectedRecords();
|
Method: getSelectedRecords() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.getSelectedRecords();
|
Get the selected Rows |
Method: getSelectedRows() var gridObj = $("#Grid").data("ejGrid"); gridObj.getSelectedRows();
|
Method: getSelectedRows() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.getSelectedRows();
|
Select Cells |
Method: selectCells(rowCellIndexes) var gridObj = $("#Grid").data("ejGrid"); gridObj.selectCells([[1, [4, 3, 2]]]);
|
Method: selectionModule.selectCells(); var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.selectionModule.selectCells([{ rowIndex: 0, cellIndexes: [0] }, { rowIndex: 1, cellIndexes: [1] }]);;
|
Select Rows |
Method: selectRows(fromIndex, toIndex) var gridObj = $("#Grid").data("ejGrid"); gridObj.selectRows(1, 4);
|
Method: selectionModule.selectRows() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.selectionModule.selectRows([0, 2])
|
Triggers when a cell is selected |
Event: cellSelected var gridObj = new ej.Grid($("#Grid"), { cellSelected: function (args){} });
|
Event: cellSelected let grid: Grid = new Grid({ cellSelected: function (args){} });
|
Triggers before the cell is being selected |
Event: cellSelecting var gridObj = new ej.Grid($("#Grid"), { cellSelecting: function (args){} });
|
Event: cellSelecting let grid: Grid = new Grid({ cellSelecting: function (args){} });
|
Triggers when a cell is deselected |
Event: cellDeselected var gridObj = new ej.Grid($("#Grid"), { cellDeselected: function (args){} });
|
Event: cellDeselected let grid: Grid = new Grid({ cellDeselected: function (args){} });
|
Triggers before the cell is being deselected |
Event: cellDeselecting var gridObj = new ej.Grid($("#Grid"), { cellDeselecting: function (args){} });
|
Event: cellDeselecting let grid: Grid = new Grid({ cellDeselecting: function (args){} });
|
Triggers when the row is selected |
Event: rowSelected var gridObj = new ej.Grid($("#Grid"), { rowSelected: function (args){} });
|
Event: rowSelected let grid: Grid = new Grid({ rowSelected: function (args){} });
|
Triggers before the row is being selected |
Event: rowSelecting var gridObj = new ej.Grid($("#Grid"), { rowSelecting: function (args){} });
|
Event: rowSelecting let grid: Grid = new Grid({ rowSelecting: function (args){} });
|
Triggers when the row is deselected |
Event: rowDeselected var gridObj = new ej.Grid($("#Grid"), { rowDeselected: function (args){} });
|
Event: rowDeselected let grid: Grid = new Grid({ rowDeselected: function (args){} });
|
Triggers before the row is being deselected |
Event: rowDeselecting var gridObj = new ej.Grid($("#Grid"), { rowDeselecting: function (args){} });
|
Event: rowDeselecting let grid: Grid = new Grid({ rowDeselecting: function (args){} });
|
Triggers when the column is selected |
Event: columnSelected var gridObj = new ej.Grid($("#Grid"), { columnSelected: function (args){} });
|
Not Applicable |
Triggers before the column is being selected |
Event: columnSelecting var gridObj = new ej.Grid($("#Grid"), { columnSelecting: function (args){} });
|
Not Applicable |
Triggers when the column is deselected |
Event: columnDeselected var gridObj = new ej.Grid($("#Grid"), { columnDeselected: function (args){} });
|
Not Applicable |
Triggers before the column is being deselected |
Event: columnDeselecting var gridObj = new ej.Grid($("#Grid"), { columnDeselecting: function (args){} });
|
Not Applicable |
Editing
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default |
Property: editSettings var gridObj = new ej.Grid($("#Grid"), { editSettings : { allowEditing: true, allowAdding: true, allowDeleting: true} });
|
Property: editSettings let grid: Grid = new Grid({ editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true } }); gridObj.appendTo('#Grid');
|
Inline Editing |
Property: editSettings.editMode var gridObj = new ej.Grid($("#Grid"), { editSettings : { allowEditing: true, allowAdding: true, allowDeleting: true, editMode : "normal"} });
|
Property: editSettings.mode let grid: Grid = new Grid({ editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' } }); gridObj.appendTo('#Grid');
|
Dialog Editing |
Property: editSettings.editMode var gridObj = new ej.Grid($("#Grid"), { editSettings : { allowEditing: true, allowAdding: true, allowDeleting: true, editMode : "dialog"} });
|
Property: editSettings.mode let grid: Grid = new Grid({ editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' } }); gridObj.appendTo('#Grid');
|
Batch Editing |
Property: editSettings.editMode var gridObj = new ej.Grid($("#Grid"), { editSettings : { allowEditing: true, allowAdding: true, allowDeleting: true, editMode : "batch"} });
|
Property: editSettings.mode let grid: Grid = new Grid({ editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' } }); gridObj.appendTo('#Grid');
|
Add a new Record |
Method: addRecord([data,[serverChange]]) var gridObj = $("#Grid").data("ejGrid"); gridObj.addRecord({"OrderID":12333});
|
Method: addRecord(data(optional), index(optional)) var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.addRecord();
|
Batch Cancel |
Method: batchCancel() var gridObj = $("#Grid").data("ejGrid"); gridObj.batchCancel();
|
Not Applicable |
Batch Save |
Method: batchSave() var gridObj = $("#Grid").data("ejGrid"); gridObj.batchSave();
|
Method: batchSave() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.editModule.batchSave()
|
Save a Cell - If preventSaveEvent is true, then it will prevent the client side cellSave event |
Method: saveCell([preventSaveEvent]) var gridObj = $("#Grid").data("ejGrid"); gridObj.saveCell();
|
Method: saveCell() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.editModule.saveCell()
|
End Edit |
Method: endEdit() var gridObj = $("#Grid").data("ejGrid"); gridObj.endEdit();
|
Method: endEdit() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.endEdit()
|
Cancel Edit |
Method: cancelEdit() var gridObj = $("#Grid").data("ejGrid"); gridObj.cancelEdit();
|
Method: closeEdit() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.closeEdit()
|
Delete Record |
Method: deleteRecord(fieldName, data) var gridObj = $("#Grid").data("ejGrid"); gridObj.deleteRecord("OrderID", { OrderID: 10249, EmployeeID: 3 });
|
Method: deleteRecord(field, data)- Field and * data are optional* var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.deleteRecord()
|
Delete Row |
Method: deleteRow($tr) var gridObj = $("#Grid").data("ejGrid"); gridObj.deleteRow($(".gridcontent tr").first());
|
Method: deleteRow(tr) var gridObj = document.getElementById('Grid') .ej2_instances[0] grid.deleteRow(grid.getContentTable() .querySelector("tbody").firstChild)
|
Edit a cell in Batch edit mode |
Method: editCell(index, fieldName) var gridObj = $("#Grid").data("ejGrid"); gridObj.editCell(2, "OrderID");
|
Method: editCell(index, field) var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.editModule.editCell(0, "CustomerID")
|
Edit Form Validation |
Method: editFormValidate() var gridObj = $("#Grid").data("ejGrid"); gridObj.editFormValidate();
|
Method: editModule.formObj.validate() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.editModule.formObj.validate()
|
Get Batch Changes |
Method: getBatchChanges() var gridObj = $("#Grid").data("ejGrid"); gridObj.getBatchChanges();
|
Method: editModule.getBatchChanges() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.editModule.getBatchChanges()
|
Refresh Batch Edit Changes |
Method: refreshBatchEditChanges() var gridObj = $("#Grid").data("ejGrid"); gridObj.refreshBatchEditChanges();
|
Not Applicable |
Set Default Data for adding |
Method: setDefaultData(defaultData) var gridObj = $("#Grid").data("ejGrid"); var defaultData = {OrderID:"10000"}; gridObj.setDefaultData(defaultData);
|
Method: editModule.addRecord() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.editModule.addRecord({OrderID:10000})
|
Start Edit |
Method: startEdit($tr) var gridObj = $("#Grid").data("ejGrid"); gridObj.startEdit($(".gridcontent tr").first());
|
Method: startEdit() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.startEdit(gridObj.selectRow(0))
|
Update Record |
Method: updateRecord(fieldName, data) var gridObj = $("#Grid").data("ejGrid"); gridObj.updateRecord("OrderID", { OrderID: 10249, EmployeeID: 3 });
|
Not Applicable |
Get Currently edited cell value |
Method: getCurrentEditCellData() var gridObj = $("#Grid").data("ejGrid"); gridObj.getCurrentEditCellData();
|
Method: getCurrentEditCellData() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj. editModule.getCurrentEditCellData();
|
Set Cell value |
Method: setCellText() var gridObj = $("#Grid").data("ejGrid"); gridObj.setCellText(0, 1, "France");
|
Method: setCellValue(key, field, value) var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.setCellValue(10248,"CustomerID","A")
|
Triggers when adding a record in batch editing |
Event: batchAdd var gridObj = new ej.Grid($("#Grid"), { batchAdd: function (args){} });
|
Event: batchAdd let grid: Grid = new Grid({ batchAdd: function (args){} });
|
Triggers when deleting a record in batch editing |
Event: batchDelete var gridObj = new ej.Grid($("#Grid"), { batchDelete: function (args){} });
|
Event: batchDelete let grid: Grid = new Grid({ batchDelete: function (args){} });
|
Triggers before adding a record in batch editing |
Event: beforeBatchAdd var gridObj = new ej.Grid($("#Grid"), { beforeBatchAdd: function (args){} });
|
Event: beforeBatchAdd let grid: Grid = new Grid({ beforeBatchAdd: function (args){} });
|
Triggers before deleting a record in batch editing |
Event: beforeBatchDelete var gridObj = new ej.Grid($("#Grid"), { beforeBatchDelete: function (args){} });
|
Event: beforeBatchDelete let grid: Grid = new Grid({ beforeBatchDelete: function (args){} });
|
Triggers before saving a record in batch editing |
Event: beforeBatchSave var gridObj = new ej.Grid($("#Grid"), { beforeBatchSave: function (args){} });
|
Event: beforeBatchSave let grid: Grid = new Grid({ beforeBatchSave: function (args){} });
|
Triggers before the record in being edited |
Event: beginEdit var gridObj = new ej.Grid($("#Grid"), { beginEdit: function (args){} });
|
Event: beginEdit let grid: Grid = new Grid({ beginEdit: function (args){} });
|
Triggers when the cell is being edited |
Event: cellEdit var gridObj = new ej.Grid($("#Grid"), { cellEdit: function (args){} });
|
Event: cellEdit let grid: Grid = new Grid({ cellEdit: function (args){} });
|
Triggers when the cell is saved |
Event: cellSave var gridObj = new ej.Grid($("#Grid"), { cellSave: function (args){} });
|
Event: cellSave let grid: Grid = new Grid({ cellSave: function (args){} });
|
Triggers when the record is added |
Event: endAdd var gridObj = new ej.Grid($("#Grid"), { endAdd: function (args){} });
|
Event: actionComplete let grid: Grid = new Grid({ actionComplete: function (args){} });
|
Triggers when the record is deleted |
Event: endDelete var gridObj = new ej.Grid($("#Grid"), { endDelete: function (args){} });
|
Event: actionComplete let grid: Grid = new Grid({ actionComplete: function (args){} });
|
Triggers after the record is edited |
Event: endEdit var gridObj = new ej.Grid($("#Grid"), { endEdit: function (args){} });
|
Event: actionComplete let grid: Grid = new Grid({ actionComplete: function (args){} });
|
Resizing
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default |
Property: allowResizing var gridObj = new ej.Grid($("#Grid"), { allowResizing: true });
|
Property: allowResizing let grid: Grid = new Grid({ allowResizing: true }); gridObj.appendTo('#Grid');
|
Resize a column by using the method |
Method: resizeColumns(column,width) var gridObj = $("#Grid").data("ejGrid"); gridObj.resizeColumns("OrderID",width);
|
Property: columns.width To resize a column, set width to that particular column and then refresh the grid by using the refresh method. var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.columns[1].width = 100; gridObj.refresh();
|
Triggers when a column resize starts |
Event: resizeStart var gridObj = new ej.Grid($("#Grid"), { resizeStart: function (args){} });
|
Event: resizeStart let grid: Grid = new Grid({ resizeStart: function (args){} });
|
Triggers when a column is resized |
Event: resized var gridObj = new ej.Grid($("#Grid"), { resized: function (args){} });
|
Event: resizeStop let grid: Grid = new Grid({ resizeStop: function (args){} });
|
Triggers when a column resize stops |
Event: resizeEnd var gridObj = new ej.Grid($("#Grid"), { resizeEnd: function (args){} });
|
Not Applicable |
Reordering
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default |
Property: allowReordering var gridObj = new ej.Grid($("#Grid"), { allowReordering: true });
|
Property: allowReordering let grid: Grid = new Grid({ allowReordering: true }); gridObj.appendTo('#Grid');
|
Reorder Columns |
Method: reorderColumns(fromFieldName, toFieldName) var gridObj = $("#Grid").data("ejGrid"); gridObj.reorderColumns("OrderID", "CustomerID");
|
Method: reorderColumns(fromFieldName, toFieldName) var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.reorderColumns("OrderID", "CustomerID");
|
Reorder Rows |
Method: reorderRows(indexes, toIndex) var gridObj = $("#Grid").data("ejGrid"); gridObj.reorderRows([0,1],3);
|
Not Applicable |
Context Menu
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default |
Property: contextMenuSettings.enableContextMenu var gridObj = new ej.Grid($("#Grid"), { contextMenuSettings: { enableContextMenu: true } });
|
Property: contextMenuItems let grid: Grid = new Grid({ contextMenuItems: ['AutoFit', 'AutoFitAll'] }); gridObj.appendTo('#Grid');
|
Triggers when context menu item is clicked |
Event: contextClick var gridObj = new ej.Grid($("#Grid"), { contextClick: function (args){} });
|
Event: contextMenuClick let grid: Grid = new Grid({ contextMenuClick: function (args){} });
|
Triggers when context menu opens |
Event: contextOpen var gridObj = new ej.Grid($("#Grid"), { contextOpen: function (args){} });
|
Event: contextMenuOpen let grid: Grid = new Grid({ contextMenuOpen: function (args){} });
|
Toolbar
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Property: toolbarSettings.toolbarItems var gridObj = new ej.Grid($("#Grid"), { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.PrintGrid] });
|
Property: toolbar let grid: Grid = new Grid({ toolbar: ['Print'] }); gridObj.appendTo('#Grid');
|
|
Add |
Property: toolbarSettings.toolbarItems var gridObj = new ej.Grid($("#Grid"), { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add] });
|
Property: toolbar let grid: Grid = new Grid({ toolbar: ['Add'] }); gridObj.appendTo('#Grid');
|
Edit |
Property: toolbarSettings.toolbarItems var gridObj = new ej.Grid($("#Grid"), { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Edit] });
|
Property: toolbar let grid: Grid = new Grid({ toolbar: ['Edit'] }); gridObj.appendTo('#Grid');
|
Delete |
Property: toolbarSettings.toolbarItems var gridObj = new ej.Grid($("#Grid"), { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Delete] });
|
Property: toolbar let grid: Grid = new Grid({ toolbar: ['Delete'] }); gridObj.appendTo('#Grid');
|
Update |
Property: toolbarSettings.toolbarItems var gridObj = new ej.Grid($("#Grid"), { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Update] });
|
Property: toolbar let grid: Grid = new Grid({ toolbar: ['Update'] }); gridObj.appendTo('#Grid');
|
Cancel |
Property: toolbarSettings.toolbarItems var gridObj = new ej.Grid($("#Grid"), { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Cancel] });
|
Property: toolbar let grid: Grid = new Grid({ toolbar: ['Cancel'] }); gridObj.appendTo('#Grid');
|
ExcelExport |
Property: toolbarSettings.toolbarItems var gridObj = new ej.Grid($("#Grid"), { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.ExcelExport] });
|
Property: toolbar let grid: Grid = new Grid({ toolbar: ['ExcelExport'] }); gridObj.appendTo('#Grid');
|
WordExport |
Property: toolbarSettings.toolbarItems var gridObj = new ej.Grid($("#Grid"), { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.WordExport] });
|
Not Applicable |
PdfExport |
Property: toolbarSettings.toolbarItems var gridObj = new ej.Grid($("#Grid"), { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.PdfExport] });
|
Property: toolbar let grid: Grid = new Grid({ toolbar: ['PdfExport'] }); gridObj.appendTo('#Grid');
|
Refresh Toolbar |
Method: refreshToolbar() var gridObj = $("#Grid").data("ejGrid"); gridObj.refreshToolbar();
|
Not Applicable |
Triggers when toolbar item is clicked |
Event: toolbarClick var gridObj = new ej.Grid($("#Grid"), { toolbarClick: function (args){} });
|
Event: toolbarClick let grid: Grid = new Grid({ toolbarClick: function (args){} });
|
GridLines
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default |
Property: gridLines var gridObj = new ej.Grid($("#Grid"), { gridLines: ej.Grid.GridLines.Both });
|
Property: gridLines let grid: Grid = new Grid({ gridLines: 'Default' }); gridObj.appendTo('#Grid');
|
Templates
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Detail Template |
Property: detailsTemplate var gridObj = new ej.Grid($("#Grid"), { detailsTemplate : "#detailsTemplate" });
|
Property: detailTemplate let grid: Grid = new Grid({ detailTemplate: '#detailtemplate', }); gridObj.appendTo('#Grid');
|
Row Template |
Property: rowTemplate var gridObj = new ej.Grid($("#Grid"), { rowTemplate : "#rowTemplate" });
|
Property: rowTemplate let grid: Grid = new Grid({ rowTemplate: '#rowtemplate'', }); gridObj.appendTo('#Grid');
|
Refresh Template |
Method: refreshTemplate() var gridObj = $("#Grid").data("ejGrid"); gridObj.refreshTemplate();
|
Not Applicable |
Triggers when detail template row is clicked to collapse |
Event: detailsCollapse var gridObj = new ej.Grid($("#Grid"), { detailsCollapse: function (args){} });
|
Not Applicable |
Triggers when detail template row is initialized |
Event: detailsDataBound var gridObj = new ej.Grid($("#Grid"), { detailsDataBound: function (args){} });
|
Not Applicable |
Triggers when detail template row is clicked to expand |
Event: detailsExpand var gridObj = new ej.Grid($("#Grid"), { detailsExpand: function (args){} });
|
Event: detailDataBound let grid: Grid = new Grid({ detailDataBound: function (args){} });
|
Triggers when refresh the template column elements in the Grid |
Event: templateRefresh var gridObj = new ej.Grid($("#Grid"), { templateRefresh: function (args){} });
|
Not Applicable |
Row/Column Drag and Drop
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default |
Property: allowRowDragAndDrop var gridObj = new ej.Grid($("#Grid"), { allowRowDragAndDrop: true });
|
Property: allowRowDragAndDrop let grid: Grid = new Grid({ allowRowDragAndDrop: true, rowDropSettings: { targetID: 'DestGrid' } }); gridObj.appendTo('#Grid');
|
Triggers when the row is being dragged |
Event: rowDrag var gridObj = new ej.Grid($("#Grid"), { rowDrag: function (args){} });
|
Event: rowDrag let grid: Grid = new Grid({ rowDrag: function (args){} });
|
Triggers when the row drag begins |
Event: rowDragStart var gridObj = new ej.Grid($("#Grid"), { rowDragStart: function (args){} });
|
Event: rowDragStart let grid: Grid = new Grid({ rowDragStart: function (args){} });
|
Triggers when the row is dropped |
Event: rowDrop var gridObj = new ej.Grid($("#Grid"), { rowDrop: function (args){} });
|
Event: rowDrop let grid: Grid = new Grid({ rowDrop: function (args){} });
|
Triggers before the row is being dropped |
Event: beforeRowDrop var gridObj = new ej.Grid($("#Grid"), { beforeRowDrop: function (args){} });
|
Not Applicable |
Triggers when the column is being dragged |
Event: columnDrag var gridObj = new ej.Grid($("#Grid"), { columnDrag: function (args){} });
|
Not Applicable |
Triggers when the column drag begins |
Event: columnDragStart var gridObj = new ej.Grid($("#Grid"), { columnDragStart: function (args){} });
|
Not Applicable |
Triggers when the column is dropped |
Event: columnDrop var gridObj = new ej.Grid($("#Grid"), { columnDrop: function (args){} });
|
Not Applicable |
Frozen Rows and Columns
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default |
Property: scrollSettings.frozenRows var gridObj = new ej.Grid($("#Grid"), { allowScrolling: true, scrollSettings:{frozenRows:2, frozenColumns: 2 } });
|
Property: frozenColumns let grid: Grid = new Grid({ frozenColumns : 2, frozenRows:2 }); gridObj.appendTo('#Grid');
|
isFrozen |
Property: columns.isFrozen var gridObj = new ej.Grid($("#Grid"), { columns : [{ field: "ShipCity", isFrozen:true} });
|
Property: columns.isFrozen let grid: Grid = new Grid({ columns : [{ field: "ShipCity", isFrozen: true} }); gridObj.appendTo('#Grid');
|
ForeignKey
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default |
Property: columns.foreignKeyValue var gridObj = new ej.Grid($("#Grid"), { columns : [{ field: "EmployeeID", foreignKeyField: "EmployeeID", foreignKeyValue: "FirstName", dataSource: window.employeeView, headerText: "First Name"} });
|
Property: columns.foreignKeyValue let grid: Grid = new Grid({ columns : [{ field: 'EmployeeID', headerText: 'Employee Name', width: 150, foreignKeyValue: 'FirstName', dataSource: employeeData} }); gridObj.appendTo('#Grid');
|
Auto Wrap
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default |
Property: allowTextWrap var gridObj = new ej.Grid($("#Grid"), { allowTextWrap : true });
|
Property: allowTextWrap let grid: Grid = new Grid({ allowTextWrap: true, }); gridObj.appendTo('#Grid');
|
Both |
Property: allowTextWrap var gridObj = new ej.Grid($("#Grid"), { allowTextWrap : true textWrapSettings: {wrapMode: "both"}, });
|
Property: allowTextWrap let grid: Grid = new Grid({ allowTextWrap: true, textWrapSettings: { wrapMode: 'Both' } }); gridObj.appendTo('#Grid');
|
Header |
Property: allowTextWrap var gridObj = new ej.Grid($("#Grid"), { allowTextWrap : true textWrapSettings: {wrapMode: "header"}, });
|
Property: allowTextWrap let grid: Grid = new Grid({ allowTextWrap: true, textWrapSettings: { wrapMode: 'Header' } }); gridObj.appendTo('#Grid');
|
Content |
Property: allowTextWrap var gridObj = new ej.Grid($("#Grid"), { allowTextWrap : true textWrapSettings: {wrapMode: "content"}, });
|
Property: allowTextWrap let grid: Grid = new Grid({ allowTextWrap: true, textWrapSettings: { wrapMode: 'Content' } }); gridObj.appendTo('#Grid');
|
Responsive
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default |
Property: isResponsive var gridObj = new ej.Grid($("#Grid"), { isResponsive: true,enableResponsiveRow: true });
|
Not Applicable |
State Persistence
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default |
Property: enablepersistence var gridObj = new ej.Grid($("#Grid"), { enablepersistence: true });
|
Property: enablepersistence let grid: Grid = new Grid({ enablepersistence: true }); gridObj.appendTo('#Grid');
|
Right to Left - RTL
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default |
Property: enableRTl var gridObj = new ej.Grid($("#Grid"), { enableRTl: true });
|
Property: enableRtl let grid: Grid = new Grid({ enableRtl: true }); gridObj.appendTo('#Grid');
|
ToolTip
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default |
Property: clipMode var gridObj = new ej.Grid($("#Grid"), { columns : [{ field: "ShipCity", clipMode: ej.Grid.ClipMode.EllipsisWithTooltip} { field: "ShipCountry", clipMode: ej.Grid.ClipMode.Ellipsis} { field: "ShipName", clipMode: ej.Grid.ClipMode.Clip}] });
|
Property: clipMode let grid: Grid = new Grid({ columns : [{ field: "ShipCity", clipMode: 'EllipsisWithTooltip'}, { field: "ShipCountry", clipMode: 'Ellipsis'}, { field: "ShipName", clipMode: 'Clip'} }); gridObj.appendTo('#Grid');
|
Aggregate/Summary
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Footer Aggregate |
Property: showSummary var gridObj = new ej.Grid($("#Grid"), { showSummary: true summaryRows: [{ title: "Sum", summaryColumns: [{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "Freight", dataMember: "Freight", format: "{0:C2}"}]}] });
|
Property: aggregates let grid: Grid = new Grid({ aggregates: [{ columns: [{ type: 'Sum', field: 'Freight', footerTemplate: 'Sum: ${Sum}'}]} }); gridObj.appendTo('#Grid');
|
Caption Aggregate |
Property: showSummary var gridObj = new ej.Grid($("#Grid"), { showSummary: true summaryRows: [{ showCaptionSummary: true, title: "Sum", summaryColumns: [{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "Freight", dataMember: "Freight", format: "{0:C2}"}]}] });
|
Property: aggregates let grid: Grid = new Grid({ aggregates: [{ columns: [{ type: 'Sum', field: 'Freight', groupCaptionTemplate: 'Max: ${Max}'}]} }); gridObj.appendTo('#Grid');
|
Get Summary values |
Method: getSummaryValues(summaryCol, summaryData) var gridObj = $("#Grid").data("ejGrid"); gridObj.getSummaryValues(summaryCol, window.gridData);
|
Not Applicable |
Grid Export
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Adds a grid model property which is to be ignored on exporting grid |
Method: addIgnoreOnExport(propertyNames) var gridObj = $("#Grid").data("ejGrid"); gridObj.addIgnoreOnExport("filterSettings");
|
Not Applicable |
Columns
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Add or Remove Columns |
Method: columns(columnDetails, [action])() var gridObj = $("#Grid").data("ejGrid"); gridObj.columns("OrderID", "remove"); gridObj.columns("CustomerID", "add");
|
Property: columns Grid is initially rendered with OrderID and CustomerId columns.Then if you want to add ShipAddress column, you have to reset the value for column property as gridObj.columns = [{field:"OrderID"}, {field:"CustomerId"}, {field:"ShipAddress"}]; Then to remove the CustomerId column, reset the column property as, gridObj.columns = [{field:"OrderID"}, {field:"ShipAddress"}];
|
Get Column By Field |
Method: getColumnByField(fieldName) var gridObj = $("#Grid").data("ejGrid"); gridObj.getColumnByField("OrderID");
|
Method: getColumnByField(fieldName) var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.getColumnByField("OrderID")
|
Get Column By HeaderText |
Method: getColumnByHeaderText(headerText) var gridObj = $("#Grid").data("ejGrid"); gridObj.getColumnByHeaderText("Order ID");
|
Column object for a corresponding headerText can able to get by iterating the gridObj.columns with the headerText |
Get Column By Index |
Method: getColumnByIndex(columnIndex) var gridObj = $("#Grid").data("ejGrid"); gridObj.getColumnByIndex(1);
|
Method: getColumnByIndex(columnIndex)var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.getColumnByIndex(1)
|
Get Column Fieldnames |
Method: getColumnFieldNames() var gridObj = $("#Grid").data("ejGrid"); gridObj.getColumnFieldNames();
|
Method: getColumnFieldNames() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.getColumnFieldNames()
|
Get Column Index By Field |
Method: getColumnIndexByField(fieldName) var gridObj = $("#Grid").data("ejGrid"); gridObj.getColumnIndexByField("OrderID");
|
Method: getColumnIndexByField(fieldName) var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.getColumnIndexByField("OrderID");
|
Get Column Index By headerText |
Method: getColumnIndexByHeaderText(headerText, [field]) var gridObj = $("#Grid").data("ejGrid"); gridObj.getColumnIndexByHeaderText("Order ID");
|
The Column Index for a corresponding headerText can be get by iterating the gridObj.columns with the headerText |
Set Width to columns |
Method: setWidthToColumns() var gridObj = $("#Grid").data("ejGrid"); gridObj.setWidthToColumns();
|
Method: widthService.setWidthToColumns() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.widthService.setWidthToColumns()
|
Get HeaderText By FieldName |
Method: getHeaderTextByFieldName() var gridObj = $("#Grid").data("ejGrid"); gridObj.getHeaderTextByFieldName("OrderID");
|
Not Applicable |
Get Hidden Columnname |
Method: getHiddenColumnNames() var gridObj = $("#Grid").data("ejGrid"); gridObj.getHiddenColumnNames();
|
Not Applicable |
Get Visible Columns/Names |
Method: getVisibleColumnNames() var gridObj = $("#Grid").data("ejGrid"); gridObj.getVisibleColumnNames();
|
Method: getVisibleColumns() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.getVisibleColumns();
|
Select Columns |
Method: selectColumns(fromIndex) var gridObj = $("#Grid").data("ejGrid"); gridObj.selectColumns(1,4);
|
Not Applicable |
Select Specific Columns based on Index |
Method: selectColumns(columnIndex,[toIndex]) var gridObj = $("#Grid").data("ejGrid"); gridObj.selectColumns(1,4);
|
Not Applicable |
Row
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
EnableHover |
Property: enableRowHover var gridObj = new ej.Grid($("#Grid"), { enableRowHover : false });
|
Property: enableHover let grid: Grid = new Grid({ enableHover: false, }); gridObj.appendTo('#Grid');
|
Get Row Height |
Method: getRowHeight() var gridObj = $("#Grid").data("ejGrid"); gridObj.getRowHeight();
|
Method: getRowHeight() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.getRowHeight();
|
Refresh Row Height |
Method: rowHeightRefresh() var gridObj = $("#Grid").data("ejGrid"); gridObj.rowHeightRefresh();
|
Not Applicable |
Get index by Row Element |
Method: getIndexByRow($tr) var gridObj = $("#Grid").data("ejGrid"); gridObj.getIndexByRow($(".gridcontent tr").first());
|
Not Applicable |
Get Row by its Index |
Method: getRowByIndex(from, to) var gridObj = $("#Grid").data("ejGrid"); gridObj.getRowByIndex(3, 6);
|
Method: getRowByIndex() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.getRowByIndex(1);
|
Get rendered rows |
Method: getRows() var gridObj = $("#Grid").data("ejGrid"); gridObj.getRows();
|
Method: getRows() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.getRows();
|
Triggers while hover the grid row |
Event: rowHover var gridObj = new ej.Grid($("#Grid"), { rowHover: function (args){} });
|
Not Applicable |
Show/Hide Columns
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Hide Columns by using method |
Method: hideColumns(headerText) var gridObj = $("#Grid").data("ejGrid"); gridObj.hideColumns("Order ID");
|
Method: hideColumns(headerText) var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.hideColumns("Order ID");
|
Show Columns by using method |
Method: showColumns(headerText) var gridObj = $("#Grid").data("ejGrid"); gridObj.showColumns("Order ID");
|
Method: showColumns(headerText) var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.showColumns("Order ID");
|
Column Chooser
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default |
Property: showColumnChooser var gridObj = new ej.Grid($("#Grid"), { showColumnChooser : true columns: [{ { field: 'CustomerID', showInColumnChooser: false }, { field: 'Name', showInColumnChooser: true } ]});
|
Property: showColumnChooser let grid: Grid = new Grid({ showColumnChooser: true, toolbar: ['ColumnChooser'], columns: [{ { field: 'CustomerID', showInColumnChooser: false }, { field: 'Name', showInColumnChooser: true } ]}); gridObj.appendTo('#Grid');
|
Header
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Refresh Header |
Method: refreshHeader() var gridObj = $("#Grid").data("ejGrid"); gridObj.refreshHeader();
|
Method: refreshHeader() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.refreshHeader();
|
Triggers every time a request is made to access particular header cell information, element and data. |
Event: mergeHeaderCellInfo var gridObj = new ej.Grid($("#Grid"), { mergeHeaderCellInfo: function (args){} })
|
Not Applicable |
Triggers every time a request is made to access particular cell information, element and data |
Event: mergeCellInfo var gridObj = new ej.Grid($("#Grid"), { mergeCellInfo: function (args){} })
|
Not Applicable |
DataSource
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
DataSource |
Method: dataSource(datasource,[templateRefresh]) var gridObj = $("#Grid").data("ejGrid"); gridObj.dataSource(newdataSource);
|
Property: dataSource var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.datasource = newdataSource
|
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Print the grid |
Method: print() var gridObj = $("#Grid").data("ejGrid"); gridObj.print();
|
Method: print() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.print();
|
Triggers before printing the grid |
Event: beforePrint var gridObj = new ej.Grid($("#Grid"), { beforePrint: function (args){} });
|
Event: beforePrint let grid: Grid = new Grid({ beforePrint: function (args){} });
|
Scrolling
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Get ScrollObject |
Method: getScrollObject() var gridObj = $("#Grid").data("ejGrid"); gridObj.getScrollObject();
|
Property: grid.scrollModule var gridObj = document.getElementById('Grid') .ej2_instances[0] var scrollObj = gridObj.scrollModule;
|
PrimaryKey
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Set PrimaryKey Column |
Property: columns.isPrimaryKey var gridObj = new ej.Grid($("#Grid"), { columns: [ { field: "OrderID", isPrimaryKey: true}] });
|
Property: columns.isPrimaryKey let grid: Grid = new Grid({ columns: [ { field: "OrderID", isPrimaryKey: true}] });
|
Get the PrimaryKey fieldnames |
Method: getPrimaryKeyFieldNames() var gridObj = $("#Grid").data("ejGrid"); gridObj.getPrimaryKeyFieldNames();
|
Method: getPrimaryKeyFieldNames() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.getPrimaryKeyFieldNames();
|
Grid
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Get the Browser Details |
Method: getBrowserDetails() var gridObj = $("#Grid").data("ejGrid"); gridObj.getBrowserDetails();
|
In Essential JS 2, it can be achieved by using Browser class of ej2-base
|
Set dimension for the grid |
Method: setDimension(height, width) var gridObj = $("#Grid").data("ejGrid"); gridObj.setDimension(300,400);
|
Not Applicable |
set maximum width for mobile |
Method: setPhoneModeMaxWidth(value) var gridObj = $("#Grid").data("ejGrid"); gridObj.setPhoneModeMaxWidth(500);
|
Not Applicable |
Render the grid |
Method: render() var gridObj = $("#Grid").data("ejGrid"); gridObj.render();
|
Method: render() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.render();
|
Reset the model collections like pageSettings, groupSettings, filterSettings, sortSettings and summaryRows. |
Method: resetModelCollections() var gridObj = $("#Grid").data("ejGrid"); gridObj.resetModelCollections();
|
Not Applicable |
Destroy the grid |
Method: destroy() var gridObj = $("#Grid").data("ejGrid"); gridObj.destroy();
|
Method: destroy() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.destroy()
|
Get Content Element |
Method: getContent() var gridObj = $("#Grid").data("ejGrid"); gridObj.getContent();
|
Method: getContent() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.getContent();
|
Get Content Table |
Method: getContentTable() var gridObj = $("#Grid").data("ejGrid"); gridObj.getContentTable();
|
Method: getContentTable() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.getContentTable();
|
Get Current View Data |
Method: getCurrentViewData() var gridObj = $("#Grid").data("ejGrid"); gridObj.getCurrentViewData();
|
Method: getCurrentViewRecords() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.getCurrentViewRecords();
|
Get Data Row |
Method: getDataByIndex(rowIndex) var gridObj = $("#Grid").data("ejGrid"); gridObj.getDataByIndex(0);
|
Method: getDataRows() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.getDataRows();
|
Get Fieldname by using the headertext |
Method: getFieldNameByHeaderText(headerText) var gridObj = $("#Grid").data("ejGrid"); gridObj.getFieldNameByHeaderText("Order ID");
|
Not Applicable |
Get FooterContent |
Method: getFooterContent() var gridObj = $("#Grid").data("ejGrid"); gridObj.getFooterContent();
|
Method: getFooterContent() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.getFooterContent();
|
Get FooterContent Table |
Method: getFooterTable() var gridObj = $("#Grid").data("ejGrid"); gridObj.getFooterTable();
|
Method: getFooterContentTable() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.getFooterContentTable();
|
Get HeaderContent |
Method: getHeaderContent() var gridObj = $("#Grid").data("ejGrid"); gridObj.getHeaderContent();
|
Method: getHeaderContent() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.getHeaderContent();
|
Get HeaderContent Table |
Method: getHeaderTable() var gridObj = $("#Grid").data("ejGrid"); gridObj.getHeaderTable();
|
Method: getHeaderTable() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.getHeaderTable();
|
Refresh Content |
Method: refreshContent() var gridObj = $("#Grid").data("ejGrid"); gridObj.refreshContent();
|
Method: contentModule.refreshContentRows() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj. contentModule.refreshContentRows();
|
Refresh Data |
Method: refreshData() var gridObj = $("#Grid").data("ejGrid"); gridObj.refreshData();
|
Not Applicable |
Triggers every time a request is made to access particular cell information, element and data |
Event: queryCellInfo var gridObj = new ej.Grid($("#Grid"), { queryCellInfo: function (args){} });
|
Event: queryCellInfo let grid: Grid = new Grid({ queryCellInfo: function (args){} });
|
Triggers every time a request is made to access row information, element and data |
Event: rowDataBound var gridObj = new ej.Grid($("#Grid"), { rowDataBound: function (args){} });
|
Event: rowDataBound let grid: Grid = new Grid({ rowDataBound: function (args){} });
|
Triggers for every grid action before it get started |
Event: actionBegin var gridObj = new ej.Grid($("#Grid"), { actionBegin: function (args){} });
|
Event: actionBegin let grid: Grid = new Grid({ actionBegin: function (args){} });
|
Triggers for every grid action success event |
Event: actionComplete var gridObj = new ej.Grid($("#Grid"), { actionComplete: function (args){} });
|
Event: actionComplete let grid: Grid = new Grid({ actionComplete: function (args){} });
|
Triggers for every grid server failure event |
Event: actionFailure var gridObj = new ej.Grid($("#Grid"), { actionFailure: function (args){} });
|
Event: actionFailure let grid: Grid = new Grid({ actionFailure: function (args){} });
|
Triggers when the grid is bound with data during rendering |
Event: dataBound var gridObj = new ej.Grid($("#Grid"), { dataBound: function (args){} });
|
Event: dataBound let grid: Grid = new Grid({ dataBound: function (args){} });
|
Triggers when the grid is going to destroy |
Event: destroy var gridObj = new ej.Grid($("#Grid"), { destroy: function (args){} });
|
Event: destroyed let grid: Grid = new Grid({ destroyed: function (args){} });
|
Triggers when initial load of the grid |
Event: load var gridObj = new ej.Grid($("#Grid"), { load: function (args){} });
|
Event: load let grid: Grid = new Grid({ load: function (args){} });
|
Triggers when the grid is rendered completely |
Event: create var gridObj = new ej.Grid($("#Grid"), { create: function (args){} });
|
Event: created let grid: Grid = new Grid({ created: function (args){} });
|
Triggers when the record is clicked |
Event: recordClick var gridObj = new ej.Grid($("#Grid"), { recordClick: function (args){} });
|
Not Applicable |
Triggers when right clicked on grid element |
Event: rightClick var gridObj = new ej.Grid($("#Grid"), { rightClick: function (args){} });
|
Not Applicable |
Triggers when the record is double clicked |
Event: recordDoubleClick var gridObj = new ej.Grid($("#Grid"), { recordDoubleClick: function (args){} });
|
Event: recordDoubleClick let grid: Grid = new Grid({ recordDoubleClick: function (args){} });
|