Contents
- Sorting
- Grouping
- Filtering
- Searching
- Paging
- Selection
- Editing
- Resizing
- Reordering
- Context Menu
- Toolbar
- GridLines
- Templates
- Row/Column Drag and Drop
- Frozen Rows and Columns
- ForeignKey
- Auto Wrap
- Responsive
- State Persistence
- Right to Left - RTL
- ToolTip
- Aggregate/Summary
- Grid Export
- Columns
- Row
- Show/Hide Columns
- Column Chooser
- Header
- DataSource
- Scrolling
- PrimaryKey
- Grid
Having trouble getting help?
Contact Support
Contact Support
Ej1 api migration in EJ2 TypeScript Grid control
13 Apr 202324 minutes to read
This article describes the API migration process of Grid component from Essential JS 1 to Essential JS 2.
Sorting
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default |
Property: allowSorting var gridObj = new ej.Grid($("#Grid"), { allowSorting: true });
|
Property: allowSorting let grid: Grid = new Grid({ allowSorting: true }); gridObj.appendTo('#Grid');
|
Clear the Sorted columns |
Method: clearSorting() var gridObj = $("#Grid").data("ejGrid"); gridObj.clearSorting();
|
Method: clearSorting() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.clearSorting()
|
Get the Sorted Columns by using the Fieldname |
Method: getsortColumnByField(field) var gridObj = $("#Grid").data("ejGrid"); gridObj.getsortColumnByField("OrderID");
|
Property: sortSettings.columns Sorted Column for a particular field can be get by iterating the sortSettings.columns with the fieldname |
Remove the Sorted Columns |
Method: removeSortedColumns(fieldName) var gridObj = $("#Grid").data("ejGrid"); gridObj.removeSortedColumns("OrderID");
|
Method: removeSortColumn() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.removeSortColumn("OrderID")
|
Sort a Column by using the method |
Method: sortColumn(columnName, [sortingDirection]) var gridObj = $("#Grid").data("ejGrid"); gridObj.sortColumn("OrderID", "ascending");
|
Method: sortColumn(columnName, Direction) var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.sortColumn("OrderID", "ascending");
|
Grouping
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default |
Property: allowGrouping var gridObj = new ej.Grid($("#Grid"), { allowGrouping: true });
|
Property: allowGrouping let grid: Grid = new Grid({ allowGrouping: true }); gridObj.appendTo('#Grid');
|
Group Columns initially |
Property: groupSettings.groupedColumns var gridObj = new ej.Grid($("#Grid"), { allowGrouping: true, groupSettings: { groupedColumns:[“OrderID”, “CustomerID”] } });
|
Property: groupSettings.columns let grid: Grid = new Grid({ allowGrouping: true, groupSettings: { columns: [“OrderID”, “CustomerID”] } }); gridObj.appendTo('#Grid');
|
Caption Template |
Property: groupSettings.captionFormat var gridObj = new ej.Grid($("#Grid"), { allowGrouping: true, groupSettings: { captionFormat: "#template" } });
|
Property: groupSettings.captionTemplate let grid: Grid = new Grid({ allowGrouping: true, groupSettings: { captionTemplate: '#template' } }); gridObj.appendTo('#Grid');
|
Show Drop Area |
Property: groupSettings.showDropArea var gridObj = new ej.Grid($("#Grid"), { allowGrouping: true, groupSettings: { showDropArea: false } });
|
Property: groupSettings.showDropArea let grid: Grid = new Grid({ allowGrouping: true, groupSettings: { showDropArea: false } }); gridObj.appendTo('#Grid');
|
Collapse all group caption rows |
Method: collapseAll() var gridObj = $("#Grid").data("ejGrid"); gridObj.collapseAll();
|
Method: collapseAll() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.groupModule.collapseAll()
|
Expand all group caption rows |
Method: expandAll() var gridObj = $("#Grid").data("ejGrid"); gridObj.expandAll();
|
Method: expandAll() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.groupModule.expandAll()
|
Expand or collapse the row based on the row state in grid |
Method: expandCollapse($target) var gridObj = $("#Grid").data("ejGrid"); gridObj.expandCollapse($("tr td.recordplusexpand > div").first());
|
Method: expandCollapseRows() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.groupModule.expandCollapseRows( gridObj.getContent().querySelectorAll('.e-recordplusexpand')[0]))
|
Collapse the group drop area in grid |
Method: collapseGroupDropArea() var gridObj = $("#Grid").data("ejGrid"); gridObj.collapseGroupDropArea();
|
Not Applicable |
Expand the group drop area in grid |
Method: expandGroupDropArea() var gridObj = $("#Grid").data("ejGrid"); gridObj.expandGroupDropArea();
|
Not Applicable |
Group a column by using the method |
Method: groupColumn(fieldName) var gridObj = $("#Grid").data("ejGrid"); gridObj.groupColumn("OrderID");
|
Method: groupColumn(fieldName) var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.groupColumn("OrderID")
|
Ungroup a grouped column by using the method |
Method: ungroupColumn(fieldName) var gridObj = $("#Grid").data("ejGrid"); gridObj.ungroupColumn("OrderID");
|
Method: ungroupColumn(fieldName) var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.ungroupColumn("OrderID")
|
Filtering
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default |
Property: allowFiltering var gridObj = new ej.Grid($("#Grid"), { allowFiltering: true });
|
Property: allowFiltering let grid: Grid = new Grid({ allowFiltering: true }); gridObj.appendTo('#Grid');
|
Menu Filtering |
Property: filterSettings.filterType var gridObj = new ej.Grid($("#Grid"), { allowFiltering: true, filterSettings: { filterType : "menu" } });
|
Property: filterSettings.type let grid: Grid = new Grid({ allowFiltering: true, filterSettings: { type:'Menu' } }); gridObj.appendTo('#Grid');
|
Excel Filtering |
Property: filterSettings.filterType var gridObj = new ej.Grid($("#Grid"), { allowFiltering: true, filterSettings: { filterType : "excel" } });
|
Property: filterSettings.type let grid: Grid = new Grid({ allowFiltering: true, filterSettings: { type:'Excel' } }); gridObj.appendTo('#Grid');
|
Clear the Filtered values |
Method: clearFiltering(field) - field is optional var gridObj = $("#Grid").data("ejGrid"); gridObj.clearFiltering();
|
Method: clearFiltering() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.clearFiltering()
|
Filter a column by using the method |
Method: filterColumn(fieldName, filterOperator, filterValue, predicate, [matchcase],[actualFilterValue]) var gridObj = $("#Grid").data("ejGrid"); gridObj.filterColumn("OrderID", "equal","10248","and", true);
|
Method: filterByColumn(fieldName, filterOperator, filterValue, predicate, matchCase, ignoreAccent, actualFilterValue, actualOperator) var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.filterByColumn("OrderID","equal",10248)
|
Filter columns by Collection |
Method: filterColumn(filterCollection) var gridObj = $("#Grid").data("ejGrid"); gridObj.filterColumn([{field:"OrderID", operator:"lessthan",value:"10266", predicate:"and",matchcase:true}, {field:"EmployeeID",operator: "equal",value:2,predicate:"and", matchcase:true}])
|
Property: filterSettings.columns var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.filterSettings:{columns: [{ field: 'ShipCity', matchCase: false, operator: 'startswith', predicate: 'and', value: 'reims' }]}
|
Get the Filtered Records |
Method: getFilteredRecords() var gridObj = $("#Grid").data("ejGrid"); gridObj.getFilteredRecords();
|
Not Applicable |
Searching
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default |
Property: toolbarSettings.toolbarItems var gridObj = new ej.Grid($("#Grid"), { showToolbar: true, toolbarItems : ["search"] allowSearching : true });
|
Property: toolbar let grid: Grid = new Grid({ toolbar: ['Search'] }); gridObj.appendTo('#Grid');
|
Clear the Searched values |
Method: clearSearching() var gridObj = $("#Grid").data("ejGrid"); gridObj.clearSearching();
|
Method: searchModule.search() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.searchModule.search("");
|
Search a value |
Method: search(searchString) var gridObj = $("#Grid").data("ejGrid"); gridObj.search("France");
|
Method: searchModule.search() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.searchModule.search("France");
|
Paging
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default |
Property: allowPaging var gridObj = new ej.Grid($("#Grid"), { allowPaging: true });
|
Property: allowPaging let grid: Grid = new Grid({ allowPaging: true }); gridObj.appendTo('#Grid');
|
Customize Paging |
Property: pageSettings.pageSize var gridObj = new ej.Grid($("#Grid"), { allowPaging: true, pageSettings: { pageSize: 8,pageSizeList: [5, 10],pageCount:3 } });
|
Property: pageSettings.pageSize let grid: Grid = new Grid({ allowPaging: true, pageSettings: { pageSize:8,pageSizes: [5, 10] } }); gridObj.appendTo('#Grid');
|
Change Page Size |
Method: changePageSize(pageSize) var gridObj = $("#Grid").data("ejGrid"); gridObj.changePageSize(7);
|
Property: pageSettings.pageSize Pagesize can be modified dynamically by using the below code pageSettings.pageSize = 7;
|
Get Current Page Index |
Method: getCurrentIndex() var gridObj = $("#Grid").data("ejGrid"); gridObj.getCurrentIndex();
|
Property: pageSettings.currentPage var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.pageSettings.currentPage;
|
Get Pager Element |
Method: getPager() var gridObj = $("#Grid").data("ejGrid"); gridObj.getPager();
|
Method: getPager() var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.getPager();
|
Send a paging request to specified Page |
Method: gotoPage(pageIndex) var gridObj = $("#Grid").data("ejGrid"); gridObj.gotoPage(3);
|
Method: gotoPage(pageIndex) var gridObj = document.getElementById('Grid') .ej2_instances[0] gridObj.gotoPage(3);
|
Calculate Pagesize of grid by using its Parent height(containerHeight) |
Method: calculatePageSizeBy ParentHeight(containerHeight) var gridObj = $("#Grid").data("ejGrid"); gridObj. calculatePageSizeByParentHeight(400);
|
Not Applicable |
Selection
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default |
Property: allowSelection var gridObj = new ej.Grid($("#Grid"), { allowSelection: true });
|
Property: allowSelection let grid: Grid = new Grid({ allowSelection: true }); gridObj.appendTo('#Grid');
|
Single Selection |
Property: 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){} });
|