This article describes the API migration process of Grid component from Essential JS 1 to Essential JS 2.
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: AllowSorting<ej-grid id="Grid" allow-sorting="true"> </ej-grid> |
Property: AllowSorting<ejs-grid id="Grid" allowSorting="true"> </ejs-grid> |
Clear the Sorted columns | Method: clearSorting()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.clearSorting(); </script> |
Method: clearSorting()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.clearSorting(); </script> |
Get the Sorted Columns by using the Fieldname | Method: getsortColumnByField(field)<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.getsortColumnByField("OrderID"); </script> |
Property: sortSettings.columns Sorted Column for a particular field can be get by iterating the sortSettings.columns with the fieldname |
Remove the Sorted Columns | Method: removeSortedColumns(fieldName)<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.removeSortedColumns("OrderID"); </script> |
Method: removeSortColumn(fieldName)<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document .getElementById('Grid').ej2_instances[0]; gridObj.removeSortColumn("OrderID") </script> |
Sort a Column by using the method | Method: sortColumn(columnName, [sortingDirection])<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.sortColumn("OrderID", "ascending"); </script> |
Method: sortColumn(columnName, Direction)<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.sortColumn("OrderID", "ascending"); </script> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: AllowGrouping<ej-grid id="Grid" allow-grouping="true"> </ej-grid> |
Property: AllowGrouping<ejs-grid id="Grid" allowGrouping="true"> </ejs-grid> |
Group Columns initially | Property: AllowGrouping.GroupedColumns<ej-grid id="Grid" allow-grouping="true"> group-settings ="@(new GroupSettings{ GroupedColumns=new List<string>(){ "ShipCountry" } })" </ej-grid> |
Property: AllowGrouping.Columns<ejs-grid id="Grid" allowGrouping="true"> <e-grid-groupsettings columns ="@(new string[] {"OrderDate"})"> </e-grid-groupsettings> </ejs-grid> |
Caption Template | Property: GroupSettings.CaptionFormat<ej-grid id="Grid" allow-grouping="true"> group-settings ="@(new GroupSettings{ CaptionFormat="#template" })" </ej-grid> |
Property: GroupSettings.CaptionTemplate<ejs-grid id="Grid" allowGrouping="true"> <e-grid-groupsettings captionTemplate="#captiontemplate"> </e-grid-groupsettings> </ejs-grid> |
Show Drop Area | Property: AllowGrouping.ShowDropArea<ej-grid id="Grid" allow-grouping="true"> group-settings ="@(new GroupSettings{ ShowDropArea=false })" </ej-grid> |
Property: AllowGrouping.ShowDropArea<ejs-grid id="Grid" allowGrouping="true"> <e-grid-groupsettings showDropArea="false"> </e-grid-groupsettings> </ejs-grid> |
Collapse all group caption rows | Method: collapseAll()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.collapseAll(); </script> |
Method: collapseAll()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.groupModule.collapseAll() </script> |
Expand all group caption rows | Method: expandAll()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.expandAll(); </script> |
Method: expandAll()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.groupModule.expandAll() </script> |
Expand or collapse the row based on the row state in grid |
Method: expandCollapse($target)<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.expandCollapse($("tr td.recordplusexpand > div").first()); </script> |
Method: expandCollapseRows()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.groupModule.expandCollapseRows( gridObj.getContent().querySelectorAll ('.e-recordplusexpand')[0]) </script> |
Collapse the group drop area in grid | Method: collapseGroupDropArea()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.collapseGroupDropArea(); </script> |
Not Applicable |
Expand the group drop area in grid | Method: expandGroupDropArea()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.expandGroupDropArea(); </script> |
Not Applicable |
Group a column by using the method | Method: groupColumn(fieldName)<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.groupColumn("OrderID"); </script> |
Method: groupColumn(fieldName)<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.groupColumn("OrderID") </script> |
Ungroup a grouped column by using the method | Method: ungroupColumn(fieldName)<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.ungroupColumn("OrderID"); </script> |
Method: ungroupColumn(fieldName)<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.ungroupColumn("OrderID") </script> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: AllowFiltering<ej-grid id="Grid" allow-filtering="true"> </ej-grid> |
Property: AllowFiltering<ejs-grid id="Grid" allowFiltering="true"> </ejs-grid> |
Menu Filtering | Property: FilterSettings.FilterType<ej-grid id="Grid" allow-filtering="true"> <e-filter-settings filter-type="Menu"/> </ej-grid> |
Property: FilterSettings.Type<ejs-grid id="Grid" allowFiltering="true"> <e-grid-filterSettings type="Menu"> </e-grid-filterSettings> </ejs-grid> |
Excel Filtering | Property: FilterSettings.FilterType<ej-grid id="Grid" allow-filtering="true"> <e-filter-settings filter-type="Excel"/> </ej-grid> |
Property: FilterSettings.Type<ejs-grid id="Grid" allowFiltering="true"> <e-grid-filterSettings type="Excel"> </e-grid-filterSettings> </ejs-grid> |
Clear the Filtered values | Method: clearFiltering(field) - field is optional<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.clearFiltering(); <script> |
Method: clearFiltering()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.clearFiltering() </script> |
Filter a column by using the method | Method: filterColumn(fieldName, filterOperator, filterValue, predicate, [matchcase],[actualFilterValue]) <ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.filterColumn("OrderID", "equal","10248","and", true); </script> |
Method: filterByColumn(fieldName, filterOperator, filterValue, predicate, matchCase, ignoreAccent, actualFilterValue, actualOperator) <ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.filterByColumn("OrderID", equal",10248) </script> |
Filter columns by Collection | Method: filterColumn(filterCollection)<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.filterColumn([{field:"OrderID", operator:"lessthan",value:"10266", predicate:"and",matchcase:true}, {field:"EmployeeID",operator: "equal",value:2,predicate:"and",matchcase:true}]) </script> |
Property: filterSettings.columns<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.filterSettings = {columns: [{ field: 'ShipCity', matchCase: false, operator: 'startswith', predicate: 'and', value: 'reims' }]} </script> |
Get the Filtered Records | Method: getFilteredRecords()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.getFilteredRecords(); </script> |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: ToolbarSettings.ToolbarItems<ej-grid id="Grid"> <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"search"}'/> </ej-grid> |
Property: Toolbar<ejs-grid id="Grid" toolbar ="@(new List<string>() {"Search"})"> </ejs-grid> |
Clear the Searched values | Method: clearSearching()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.clearSearching(); </script> |
Method: searchModule.search()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.searchModule.search(""); </script> |
Search a value | Method: search(searchString)<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.search("France"); </script> |
Method: searchModule.search()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.searchModule.search("France"); </script> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: AllowPaging<ej-grid id="Grid" allow-paging="true"> </ej-grid> |
Property: AllowPaging<ejs-grid id="Grid" allowPaging="true"> </ejs-grid> |
Customize Paging | Property: PageSettings.PageSize<ej-grid id="Grid" allow-paging="true"> <e-page-settings page-size="8"> </e-page-settings> </ej-grid> |
Property: PageSettings.PageSize<ejs-grid id="Grid" allowPaging="true"> <e-grid-pagesettings pageSize="8" pageSizes ="@(new string[] { "5","10"})"> </ejs-grid> |
Change Page Size | Method: changePageSize(pageSize)<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.changePageSize(7); </script> |
Property: pageSettings.pageSize Pagesize can be modified dynamically by using the below code <ejs-grid id="Grid"> </ejs-grid> Script: <script> PageSettings.PageSize = 7; </script> |
Get Current Page Index | Method: getCurrentIndex()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.getCurrentIndex(); </script> |
Property: pageSettings.currentPage<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; var currentPage = gridObj.pageSettings.currentPage; </script> |
Get Pager Element | Method: getPager()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.getPager(); </script> |
Method: getPager()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.getPager(); </script> |
Send a paging request to specified Page | Method: gotoPage(pageIndex)<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.gotoPage(3); </script> |
Method: gotoPage(pageIndex)<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.gotoPage(3); </script> |
Calculate Pagesize of grid by using its Parent height(containerHeight) | Method: calculatePageSizeBy ParentHeight(containerHeight) <ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj. calculatePageSizeByParentHeight(400); </script> |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: AllowSelection<ej-grid id="Grid" allow-selection="true"> </ej-grid> |
Property: allowSelection<ejs-grid id="Grid" allowSelection="true"> </ejs-grid> |
Single Selection | Property: SelectionType<ej-grid id="Grid" allow-selection="true" selection-type="Single"> </ej-grid> |
Property: SelectionSettings.Type<ejs-grid id="Grid" allowSelection="true"> <e-grid-selectionsettings type= "Single"></e-grid-selectionsettings> </ejs-grid> |
Multiple Selection | Property: SelectionType<ej-grid id="Grid" allow-selection="true" selection-type="Multiple"> </ej-grid> |
Property: SelectionSettings.Type<ejs-grid id="Grid" allowSelection="true"> <e-grid-selectionsettings type= "Multiple"></e-grid-selectionsettings> </ejs-grid> |
Row Selection | Property: SelectionSettings.SelectionMode<ej-grid id="Grid" allow-selection="true" selection-type="Multiple"> <e-selection-settings selection-mode="@(new List<string>(){"row"})"> </e-selection-settings> </ej-grid> |
Property: SelectionSettings.SelectionMode<ejs-grid id="Grid" allowSelection="true"> <e-grid-selectionsettings mode="Row"> </e-grid-selectionsettings> </ejs-grid> |
Cell Selection | Property: SelectionSettings.SelectionMode<ej-grid id="Grid" allow-selection="true" selection-type="Multiple"> <e-selection-settings selection-mode="@(new List<string>(){"cell"})"> </e-selection-settings> </ej-grid> |
Property: SelectionSettings.SelectionMode<ejs-grid id="Grid" allowSelection="true"> <e-grid-selectionsettings mode="Cell"> </e-grid-selectionsettings> </ejs-grid> |
Clear the selected Cells | Method: clearCellSelection()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.clearCellSelection(); </script> |
Method: clearCellSelection()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.selectionModule .clearCellSelection() </script> |
Clear the selected Columns | Method: clearColumnSelection([index])- index is optional <ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.clearColumnSelection(); </script> |
Not Applicable |
Get the selected Records | Method: getSelectedRecords()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.getSelectedRecords(); </script> |
Method: getSelectedRecords()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document .getElementById('Grid') .ej2_instances[0]; gridObj.getSelectedRecords(); </script> |
Get the selected Rows | Method: getSelectedRows()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.getSelectedRows(); </script> |
Method: getSelectedRows()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document .getElementById('Grid') .ej2_instances[0]; gridObj.getSelectedRows(); </script> |
Select Cells | Method: selectCells(rowCellIndexes)<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.selectCells([[1, [4, 3, 2]]]); </script> |
Method: selectionModule.selectCells();<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.selectionModule.selectCells ([{ rowIndex: 0, cellIndexes: [0] }, { rowIndex: 1, cellIndexes: [1] }]);; </script> |
Select Rows | Method: selectRows(fromIndex, toIndex)<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.selectRows(1, 4); </script> |
Method: selectionModule.selectRows()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.selectionModule. selectRows([0, 2]) </script> |
Triggers when a cell is selected |
Event: cellselected<ej-grid id="Grid" cell-selected="cellSelected"> </ej-grid> Script: <script> function cellSelected(){} </script> |
Event: cellselected<ejs-grid id="Grid" cellselected="cellselected"> </ejs-grid> Script: <script> function cellselected(){} </script> |
Triggers before the cell is being selected | Event: CellSelecting<ej-grid id="Grid" cell-selecting="cellSelecting"> </ej-grid> Script: <script> function cellSelecting(){} </script> |
Event: CellSelecting<ejs-grid id="Grid" CellSelecting="CellSelecting"> </ejs-grid> Script: <script> function cellSelecting(){} </script> |
Triggers when a cell is deselected |
Event: CellDeselected<ej-grid id="Grid" cell-deselected="cellDeselected"> </ej-grid> Script: <script> function cellDeselected(){} </script> |
Event: CellDeselected<ejs-grid id="Grid" CellDeselected="CellDeselected"> </ejs-grid> Script: <script> function cellDeselected(){} </script> |
Triggers before the cell is being deselected | Event: CellDeselecting<ej-grid id="Grid" cell-deselecting="cellDeselecting"> </ej-grid> Script: <script> function cellDeselecting(){} </script> |
Event: CellDeselecting<ejs-grid id="Grid" CellDeselecting="CellDeselecting"> </ejs-grid> Script: <script> function cellDeselecting(){} </script> |
Triggers when the row is selected |
Event: RowSelected<ej-grid id="Grid" row-selected="rowSelected"> </ej-grid> Script: <script> function rowSelected(){} </script> |
Event: RowSelected<ejs-grid id="Grid" rowSelected="rowSelected"> </ejs-grid> Script: <script> function rowSelected(){} </script> |
Triggers before the row is being selected | Event: RowSelecting<ej-grid id="Grid" row-selecting="rowSelecting"> </ej-grid> Script: <script> function rowSelecting(){} </script> |
Event: RowSelecting<ejs-grid id="Grid" rowSelecting="rowSelecting"> </ejs-grid> Script: <script> function rowSelecting(){} </script> |
Triggers when the row is deselected |
Event: RowDeselected<ej-grid id="Grid" row-deselected="rowDeselected"> </ej-grid> Script: <script> function rowDeselected(){} </script> |
Event: RowDeselected<ejs-grid id="Grid" rowDeselected="rowDeselected"> </ejs-grid> Script: <script> function rowDeselected(){} </script> |
Triggers before the row is being deselected | Event: RowDeselecting<ej-grid id="Grid" row-deselecting="rowDeselecting"> </ej-grid> Script: <script> function rowDeselecting(){} </script> |
Event: RowDeselecting<ejs-grid id="Grid" rowDeselecting="rowDeselecting"> </ejs-grid> Script: <script> function rowDeselecting(){} </script> |
Triggers when the column is selected | Event: ColumnSelected<ej-grid id="Grid" column-selected="columnSelected"> </ej-grid> Script: <script> function columnSelected(){} </script> |
Not Applicable |
Triggers before the column is being selected | Event: ColumnSelecting<ej-grid id="Grid" column-selecting="columnSelecting"> </ej-grid> Script: <script> function columnSelecting(){} </script> |
Not Applicable |
Triggers when the column is deselected | Event: ColumnDeselected<ej-grid id="Grid" column-deselected="columnDeselected"> </ej-grid> Script: <script> function columnDeselected(){} </script> |
Not Applicable |
Triggers before the column is being deselected | Event: ColumnDeselecting<ej-grid id="Grid" column-deselecting="columnDeselecting"> </ej-grid> Script: <script> function columnDeselecting(){} </script> |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: EditSettings<ej-grid id="Grid"> <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true"> </e-edit-settings> </ej-grid> |
Property: EditSettings<ejs-grid id="Grid"> <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"> </e-grid-editSettings> </ejs-grid> |
Inline Editing | Property: EditSettings.EditMode<ej-grid id="Grid"> <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" edit-mode="Normal"> </e-edit-settings> </ej-grid> |
Property: EditSettings.Mode<ejs-grid id="Grid"> <e-grid-editSettings mode="Normal" allowAdding="true" allowDeleting="true" allowEditing="true" > </e-grid-editSettings> </ejs-grid> |
Dialog Editing | Property: EditSettings.EditMode<ej-grid id="Grid"> <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" edit-mode="Dialog"> </e-edit-settings> </ej-grid> |
Property: EditSettings.Mode<ejs-grid id="Grid"> <e-grid-editSettings mode="Dialog" allowAdding="true" allowDeleting="true" allowEditing="true" > </e-grid-editSettings> </ejs-grid> |
Batch Editing | Property: EditSettings.EditMode<ej-grid id="Grid"> <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" edit-mode="Batch"> </e-edit-settings> </ej-grid> |
Property: EditSettings.Mode<ejs-grid id="Grid"> <e-grid-editSettings mode="Batch" allowAdding="true" allowDeleting="true" allowEditing="true" > </e-grid-editSettings> </ejs-grid> |
Add a new Record | Method: addRecord([data,[serverChange]])<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.addRecord({"OrderID":12333}); </script> |
Method: addRecord(data(optional), index(optional))<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.addRecord(); </script> |
Batch Cancel | Method: batchCancel()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.batchCancel(); </script> |
Not Applicable |
Batch Save | Method: batchSave()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.batchSave(); </script> |
Method: batchSave()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.editModule.batchSave(); </script> |
Save a Cell - If preventSaveEvent is true, then it will prevent the client side cellSave event |
Method: saveCell([preventSaveEvent])<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.saveCell(); </script> |
Method: saveCell()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.editModule.saveCell(); </script> |
End Edit | Method: endEdit()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.endEdit(); </script> |
Method: endEdit()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.endEdit(); </script> |
Cancel Edit | Method: cancelEdit()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.cancelEdit(); </script> |
Method: closeEdit()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.closeEdit(); </script> |
Delete Record | Method: deleteRecord(fieldName, data)<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.deleteRecord("OrderID", { OrderID: 10249, EmployeeID: 3 }); </script> |
Method: deleteRecord(field, data)- Field and * data are optional* <ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.deleteRecord(); </script> |
Delete Row | Method: deleteRow($tr)<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.deleteRow($(".gridcontent tr").first()); </script> |
Method: deleteRow(tr)<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; grid.deleteRow(grid.getContentTable() .querySelector("tbody").firstChild); </script> |
Edit a cell in Batch edit mode | Method: editCell(index, fieldName)<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.editCell(2, "OrderID"); </script> |
Method: editModule.editCell(index, field)<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.editModule.editCell(0,gridObj .columns[0].field); </script> |
Edit Form Validation | Method: editFormValidate()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.editFormValidate(); </script> |
Method: editModule.formObj.validate()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.editModule.formObj.validate(); </script> |
Get Batch Changes | Method: getBatchChanges()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.getBatchChanges(); </script> |
Method: editModule.getBatchChanges()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.editModule.getBatchChanges(); </script> |
Refresh Batch Edit Changes | Method: refreshBatchEditChanges()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.refreshBatchEditChanges(); </script> |
Not Applicable |
Set Default Data for adding | Method: setDefaultData(defaultData)<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); var defaultData = {OrderID:"10000"}; gridObj.setDefaultData(defaultData); </script> |
Method: editModule.addRecord()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.editModule.addRecord({OrderID:10000}); </script> |
Start Edit | Method: startEdit($tr)<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.startEdit($(".gridcontent tr") .first()); </script> |
Method: startEdit()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.startEdit(gridObj.selectRow(0)); </script> |
Update Record | Method: updateRecord(fieldName, data)<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.updateRecord("OrderID", { OrderID: 10249, EmployeeID: 3 }); </script> |
Not Applicable |
Set Cell value | Method: setCellText()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.setCellText(0, 1, "France"); </script> |
Method: setCellValue(key, field, value)<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.setCellValue(10248,"CustomerID","A") </script> |
Get Currently edited cell value | Method: getCurrentEditCellData()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.getCurrentEditCellData(); </script> |
Method: getCurrentEditCellData()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj. editModule.getCurrentEditCellData(); </script> |
Triggers when adding a record in batch editing |
Event: BatchAdd<ej-grid id="Grid" batch-add="batchAdd"> </ej-grid> Script: <script> function batchAdd(){} </script> |
Event: BatchAdd<ejs-grid id="Grid" batchAdd="batchAdd"> </ejs-grid> Script: <script> function batchAdd(){} </script> |
Triggers when deleting a record in batch editing |
Event: BatchDelete<ej-grid id="Grid" batch-delete="batchDelete"> </ej-grid> Script: <script> function batchDelete(){} </script> |
Event: BatchDelete<ejs-grid id="Grid" batchDelete="batchDelete"> </ejs-grid> Script: <script> function batchDelete(){} </script> |
Triggers before adding a record in batch editing | Event: BeforeBatchAdd<ej-grid id="Grid" before-batch-add="beforeBatchAdd"> </ej-grid> Script: <script> function beforeBatchAdd(){} </script> |
Event: BeforeBatchAdd<ejs-grid id="Grid" beforeBatchAdd="beforeBatchAdd"> </ejs-grid> Script: <script> function beforeBatchAdd(){} </script> |
Triggers before deleting a record in batch editing | Event: BeforeBatchDelete<ej-grid id="Grid" before-batch-delete="beforeBatchDelete"> </ej-grid> Script: <script> function beforeBatchDelete(){} </script> |
Event: BeforeBatchDelete<ejs-grid id="Grid" beforeBatchDelete="beforeBatchDelete"> </ejs-grid> Script: <script> function beforeBatchDelete(){} </script> |
Triggers before saving a record in batch editing | Event: BeforeBatchSave<ej-grid id="Grid" before-batch-save="beforeBatchSave"> </ej-grid> Script: <script> function beforeBatchSave(){} </script> |
Event: BeforeBatchSave<ejs-grid id="Grid" beforeBatchSave="beforeBatchSave"> </ejs-grid> Script: <script> function beforeBatchSave(){} </script> |
Triggers before the record in being edited |
Event: BeginEdit<ej-grid id="Grid" begin-edit="beginEdit"> </ej-grid> Script: <script> function beginEdit(){} </script> |
Event: BeginEdit<ejs-grid id="Grid" beginEdit="beginEdit"> </ejs-grid> Script: <script> function beginEdit(){} </script> |
Triggers when the cell is being edited |
Event: CellEdit<ej-grid id="Grid" cell-edit="cellEdit"> </ej-grid> Script: <script> function cellEdit(){} </script> |
Event: CellEdit<ejs-grid id="Grid" cellEdit="cellEdit"> </ejs-grid> Script: <script> function cellEdit(){} </script> |
Triggers when the cell is saved |
Event: CellSave<ej-grid id="Grid" cell-save="cellSave"> </ej-grid> Script: <script> function cellSave(){} </script> |
Event: CellSave<ejs-grid id="Grid" cellSave="cellSave"> </ejs-grid> Script: <script> function cellSave(){} </script> |
Triggers when the record is added | Event: EndAdd<ej-grid id="Grid" end-add="endAdd"> </ej-grid> Script: <script> function endAdd(){} </script> |
Event: ActionComplete<ejs-grid id="Grid" actionComplete="actionComplete"> </ejs-grid> Script: <script> function actionComplete(){} </script> |
Triggers when the record is deleted | Event: EndDelete<ej-grid id="Grid" end-delete="endDelete"> </ej-grid> Script: <script> function endDelete(){} </script> |
Event: ActionComplete<ejs-grid id="Grid" actionComplete="actionComplete"> </ejs-grid> Script: <script> function actionComplete(){} </script> |
Triggers after the record is edited | Event: EndEdit<ej-grid id="Grid" action-complete="actionComplete"> </ej-grid> Script: <script> function endEdit(){} </script> |
Event: ActionComplete<ejs-grid id="Grid" actionComplete="actionComplete"> </ejs-grid> Script: <script> function actionComplete(){} </script> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: AllowResizing<ej-grid id="Grid" allow-resizing="true"> </ej-grid> |
Property: AllowResizing<ejs-grid id="Grid" allowResizing="true"> </ejs-grid> |
Resize a column by using the method | Method: resizeColumns(column,width)<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.resizeColumns("OrderID",width); </script> |
Property: columns.width To resize a column, set width to that particular column and then refresh the grid by using the refresh method. <ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.columns[1].width = 100; gridObj.refresh(); </script> |
Triggers when a column resize starts | Event: ResizeStart<ej-grid id="Grid" resize-start="resizeStart"> </ej-grid> Script: <script> function resizeStart(){} </script> |
Event: ResizeStart<ejs-grid id="Grid" resizeStart="resizeStart"> </ejs-grid> Script: <script> function resizeStart(){} </script> |
Triggers when a column is resized | Event: Resized<ej-grid id="Grid" resized="resized"> </ej-grid> Script: <script> function resized(){} </script> |
Event: ResizeStop<ejs-grid id="Grid" resizeStop="resizeStop"> </ejs-grid> Script: <script> function resizeStop(){} </script> |
Triggers when a column resize stops | Event: ResizeEnd<ej-grid id="Grid" resize-end="resizeEnd"> </ej-grid> Script: <script> function resizeEnd(){} </script> |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: AllowReordering<ej-grid id="Grid" allow-reordering="true"> </ej-grid> |
Property: AllowReordering<ejs-grid id="Grid" allowReordering="true"> </ejs-grid> |
Reorder Columns | Method: reorderColumns(fromFieldName, toFieldName)<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.reorderColumns("OrderID", "CustomerID"); </script> |
Method: reorderColumns(fromFieldName, toFieldName)<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.reorderColumns("OrderID", "CustomerID"); </script> |
Reorder Rows | Method: reorderRows(indexes, toIndex)<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.reorderRows([0,1],3); </script> |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: ContextMenuSettings.EnableContextMenu<ej-grid id="Grid"> <e-context-menu-settings enable-context-menu="true"> </e-context-menu-settings> </ej-grid> |
Property: ContextMenuItems@{ List<object> ContextMenuitems = new List<object>(); ContextMenuitems.Add(new{ text = "Copy with headers", target= ".e-content", id = "copywithheader"}); ’}’ <ejs-grid id="Grid" contextMenuItems="contextMenuitems"> </ejs-grid> |
Triggers when context menu item is clicked | Event: ContextClick<ej-grid id="Grid" context-click="contextClick"> </ej-grid> Script: <script> function contextClick(){} </script> |
Event: ContextMenuClick<ejs-grid id="Grid" contextMenuClick="contextMenuClick"> </ejs-grid> Script: <script> function contextMenuClick(){} </script> |
Triggers when context menu opens | Event: ContextOpen<ej-grid id="Grid" context-open="contextOpen"> </ej-grid> Script: <script> function contextOpen(){} </script> |
Event: ContextMenuOpen<ejs-grid id="Grid" contextMenuOpen="contextMenuOpen"> </ejs-grid> Script: <script> function contextMenuOpen(){} </script> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Property: ToolbarSettings.ToolbarItems<ej-grid id="Grid"> <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"print"}'/> </ej-grid> |
Property: Toolbar<ejs-grid id="Grid" toolbar ="@(new List<string>() { "Print"})"> </ejs-grid> |
|
Add | Property: ToolbarSettings.ToolbarItems<ej-grid id="Grid"> <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"add"}'/> </ej-grid> |
Property: Toolbar<ejs-grid id="Grid" toolbar ="@(new List<string>() { "Add"})"> </ejs-grid> |
Edit | Property: ToolbarSettings.ToolbarItems<ej-grid id="Grid"> <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"edit"}'/> </ej-grid> |
Property: Toolbar<ejs-grid id="Grid" toolbar ="@(new List<string>() { "Edit"})"> </ejs-grid> |
Delete | Property: ToolbarSettings.ToolbarItems<ej-grid id="Grid"> <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"delete"}'/> </ej-grid> |
Property: Toolbar<ejs-grid id="Grid" toolbar ="@(new List<string>() { "Delete"})"> </ejs-grid> |
Update | Property: ToolbarSettings.ToolbarItems<ej-grid id="Grid"> <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"update"}'/> </ej-grid> |
Property: Toolbar<ejs-grid id="Grid" toolbar ="@(new List<string>() { "Update"})"> </ejs-grid> |
Cancel | Property: ToolbarSettings.ToolbarItems<ej-grid id="Grid"> <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"cancel"}'/> </ej-grid> |
Property: Toolbar<ejs-grid id="Grid" toolbar ="@(new List<string>() { "Cancel"})"> </ejs-grid> |
ExcelExport | Property: ToolbarSettings.ToolbarItems<ej-grid id="Grid"> <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"excelExport"}'/> </ej-grid> |
Property: Toolbar<ejs-grid id="Grid" toolbar ="@(new List<string>() { "ExcelExport"})"> </ejs-grid> |
WordExport | Property: ToolbarSettings.ToolbarItems<ej-grid id="Grid"> <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"wordExport"}'/> </ej-grid> |
Not Applicable |
PdfExport | Property: ToolbarSettings.ToolbarItems<ej-grid id="Grid"> <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"pdfExport"}'/> </ej-grid> |
Property: Toolbar<ejs-grid id="Grid" toolbar ="@(new List<string>() { "PdfExport"})"> </ejs-grid> |
Refresh Toolbar | Method: refreshToolbar()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.refreshToolbar(); </script> |
Not Applicable |
Triggers when toolbar item is clicked | Event: ToolbarClick<ej-grid id="Grid" toolbar-click="toolbarClick"> </ej-grid> Script: <script> function toolbarClick(){} </script> |
Event: ToolbarClick<ejs-grid id="Grid" toolbarClick="toolbarClick"> </ejs-grid> Script: <script> function toolbarClick(){} </script> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: GridLines<ej-grid id="Grid" grid-lines="Vertical"> </ej-grid> |
Property: GridLines<ejs-grid id="Grid" gridLines="Vertical"> </ejs-grid> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: DetailsTemplate<ej-grid id="Grid" details-template="#detailsTemplate"> </ej-grid> Script: <script id="detailsTemplate" type="text/x-jsrender"> You can add template elements here </script> |
Property: DetailTemplate<ejs-grid id="Grid" detailTemplate="#detailtemplate"> </ejs-grid> Script: <script type="text/x-template" id="detailtemplate"> You can add template elements here </script> |
Default | Property: RowTemplate<ej-grid id="Grid" row-template="#rowtemplate"> </ej-grid> Script: <script id="rowtemplate" type="text/x-jsrender"> You can add template elements here </script> |
Property: RowTemplate<ejs-grid id="Grid" rowTemplate="#rowtemplate"> </ejs-grid> Script: <script type="text/x-template" id="rowtemplate"> You can add template elements here </script> |
Refresh Template | Method: refreshTemplate()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.refreshTemplate(); </script> |
Not Applicable |
Triggers when detail template row is clicked to collapse | Event: DetailsCollapse<ej-grid id="Grid" details-collapse="detailsCollapse"> </ej-grid> Script: <script> function detailsCollapse(){} </script> |
Not Applicable |
Triggers when detail template row is initialized | Event: DetailsDataBound<ej-grid id="Grid" details-data-bound="detailsDataBound"> </ej-grid> Script: <script> function detailsDataBound(){} </script> |
Not Applicable |
Triggers when detail template row is clicked to expand |
Event: DetailsExpand<ej-grid id="Grid" details-expand="detailsExpand"> </ej-grid> Script: <script> function detailsExpand(){} </script> |
Event: DetailDataBound<ejs-grid id="Grid" detailDataBound="detailDataBound"> </ejs-grid> Script: <script> function detailDataBound(){} </script> |
Triggers when refresh the template column elements in the Grid | Event: TemplateRefresh<ej-grid id="Grid" template-refresh="templateRefresh"> </ej-grid> Script: <script> function templateRefresh(){} </script> |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: AllowRowDragAndDrop<ej-grid id="Grid" allow-row-drag-and-drop="true" row-drop-settings="@(new RowDropSettings() {DropTargetID="#destGrid"})"> </ej-grid> |
Property: AllowRowDragAndDrop<ejs-grid id="Grid" allowRowDragAndDrop="true"> <e-grid-rowdropsettings targetID="DestGrid"> </e-grid-rowdropsettings> </ejs-grid> |
Triggers when the row is being dragged |
Event: RowDrag<ej-grid id="Grid" row-drag="rowDrag"> </ej-grid> Script: <script> function rowDrag(){} </script> |
Event: RowDrag<ejs-grid id="Grid" rowDrag="rowDrag"> </ejs-grid> Script: <script> function rowDrag(){} </script> |
Triggers when the row drag begins | Event: RowDragStart<ej-grid id="Grid" row-drag-start="rowDragStart"> </ej-grid> Script: <script> function rowDragStart(){} </script> |
Event: RowDragStart<ejs-grid id="Grid" rowDragStart="rowDragStart"> </ejs-grid> Script: <script> function rowDragStart(){} </script> |
Triggers when the row is dropped | Event: RowDrop<ej-grid id="Grid" row-drop="rowDrop"> </ej-grid> Script: <script> function rowDrop(){} </script> |
Event: RowDrop<ejs-grid id="Grid" rowDrop="rowDrop"> </ejs-grid> Script: <script> function rowDrop(){} </script> |
Triggers before the row is being dropped | Event: BeforeRowDrop<ej-grid id="Grid" before-row-drop="beforeRowDrop"> </ej-grid> Script: <script> function beforeRowDrop(){} </script> |
Not Applicable |
Triggers when the column is being dragged |
Event: columnDrag<ej-grid id="Grid" column-drag="columnDrag"> </ej-grid> Script: <script> function columnDrag(){} </script> |
Not Applicable |
Triggers when the column drag begins |
Event: columnDragStart<ej-grid id="Grid" column-drag-start="columnDragStart"> </ej-grid> Script: <script> function columnDragStart(){} </script> |
Not Applicable |
Triggers when the column is dropped |
Event: ColumnDrop<ej-grid id="Grid" column-drop="columnDrop"> </ej-grid> Script: <script> function columnDrop(){} </script> |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: ScrollSettings.FrozenRows<ej-grid id="Grid" allow-scrolling="true"> <e-scroll-settings frozen-columns="2" frozen-rows="2"> </ej-grid> |
Property: FrozenRows<ejs-grid id="Grid" frozenColumns="1" frozenRows="2"> </ejs-grid> |
isFrozen | Property: Columns.IsFrozen<ej-grid id="Grid"> <e-columns> <e-column field="OrderID" is-frozen="true" ></e-column> </e-columns> </ej-grid> |
Property: Columns.IsFrozen<ejs-grid id="Grid"> <e-grid-columns> <e-grid-column field="OrderID" isFrozen="true"></e-grid-column> </e-grid-columns> </ejs-grid> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: Columns.ForeignKeyValue<ej-grid id="Grid"> <e-columns> <e-column field="CustomerID" foreign-key-field="CustomerID" foreign-key-value="FirstName"> </e-column></e-columns> </ej-grid> |
Property: Columns.ForeignKeyValue<ejs-grid id="Grid"> <e-grid-columns> <e-grid-column field="CustomerID" foreignKeyField="CustomerID" foreignKeyValue="FirstName"></e-grid-column> </e-grid-columns> </ejs-grid> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: AllowTextWrap<ej-grid id="Grid" allow-text-wrap="true"> </ej-grid> |
Property: AllowTextWrap<ejs-grid id="Grid" allowTextWrap="true"> </ejs-grid> |
Both | Property: AllowTextWrap<ej-grid id="Grid" allow-text-wrap="true"> <e-text-wrap-settings wrap-mode="Both"> </e-text-wrap-settings> </ej-grid> |
Property: AllowTextWrap<ejs-grid id="Grid" allowTextWrap="true"> <e-grid-textwrapsettings wrapMode="Both"> </e-grid-textwrapsettings> </ejs-grid> |
Header | Property: AllowTextWrap<ej-grid id="Grid" allow-text-wrap="true"> <e-text-wrap-settings wrap-mode="Header"> </e-text-wrap-settings> </ej-grid> |
Property: AllowTextWrap<ejs-grid id="Grid" allowTextWrap="true"> <e-grid-textwrapsettings wrapMode="Header"> </e-grid-textwrapsettings> </ejs-grid> |
Content | Property: AllowTextWrap<ej-grid id="Grid" allow-text-wrap="true"> <e-text-wrap-settings wrap-mode="Content"> </e-text-wrap-settings> </ej-grid> |
Property: AllowTextWrap<ejs-grid id="Grid" allowTextWrap="true"> <e-grid-textwrapsettings wrapMode="Content"> </e-grid-textwrapsettings> </ejs-grid> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: IsResponsive<ej-grid id="Grid" is-responsive="true" enable-responsive-row="true"> </ej-grid> |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: EnablePersistence<ej-grid id="Grid" enable-persistence="true"> </ej-grid> |
Property: EnablePersistence<ejs-grid id="Grid" enablePersistence="true"> </ejs-grid> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: EnableRtl<ej-grid id="Grid" enable-rtl="true"> </ej-grid> |
Property: EnableRtl<ejs-grid id="Grid" enableRtl="true"> </ejs-grid> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: ClipMode<ej-grid id="Grid"> <e-columns> <e-column field="OrderID" clip-mode="Clip"></e-column> <e-column field="ShipCountry" clip-mode="Ellipsis"></e-column> <e-column field="ShipName" clip-mode="EllipsisWithTooltip"> </e-column></e-columns> </ej-grid> |
Property: ClipMode<ejs-grid id="Grid"> <e-grid-columns> <e-grid-column field="OrderID" clipMode="Clip"> </e-grid-column> <e-grid-column field="ShipCountry" clipMode="Ellipsis"> </e-grid-column> <e-grid-column field="ShipName" clipMode="EllipsisWithTooltip"> </e-grid-column></e-grid-columns> </ejs-grid> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Footer Aggregate | Property: ShowSummary<ej-grid id="Grid" show-summary="true"> <e-summary-rows> <e-summary-row title="Sum"> <e-summary-columns> <e-summary-column summary-type="Sum" format="{0:C}" display-column= "Freight" datamember="Freight"/> </e-summary-columns> </e-summary-row> </e-summary-rows> </ej-grid> |
Property: Aggregates<ejs-grid id="Grid"> <e-grid-aggregates> <e-grid-aggregate> <e-aggregate-columns> <e-aggregate-column field="Freight" type="Sum" footerTemplate="Sum:${Sum}"> </e-aggregate-column> </e-aggregate-columns> </e-grid-aggregate> </e-grid-aggregates> </ejs-grid> |
Caption Aggregate | Property: ShowSummary<ej-grid id="Grid" show-summary="true"> <e-summary-rows> <e-summary-row show-total-summary="false" show-caption-summary="true"> <e-summary-columns> <e-summary-column summary-type="Sum" prefix=@("Sum=") format="{0:C}" display-column="Freight" datamember="Freight"/> </e-summary-columns> </e-summary-row> </e-summary-rows> </ej-grid> |
Property: Aggregates<ejs-grid id="Grid"> <e-grid-aggregates> <e-grid-aggregate> <e-aggregate-columns> <e-aggregate-column field="Freight" type="Sum" groupCaptionTemplate="Sum:${Sum}"> </e-aggregate-column> </e-aggregate-columns> </e-grid-aggregate> </e-grid-aggregates> </ejs-grid> |
Get Summary values | Method: getSummaryValues(summaryCol, summaryData)<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.getSummaryValues(summaryCol, window.gridData); </script> |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Adds a grid model property which is to be ignored on exporting grid |
Method: addIgnoreOnExport(propertyNames) <ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.addIgnoreOnExport ("filterSettings"); </script> |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Add or Remove Columns | Method: columns(columnDetails, [action])()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.columns("OrderID", "remove"); gridObj.columns("CustomerID", "add"); </script> |
Property: columns Grid is initially rendered with 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)<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.getColumnByField("OrderID"); </script> |
Method: getColumnByField(fieldName)<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.getColumnByField("OrderID"); </script> |
Get Column By HeaderText | Method: getColumnByHeaderText(headerText) <ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.getColumnByHeaderText ("Order ID"); </script> |
Column object for a corresponding headerText can able to get by iterating the gridObj.columns with the headerText |
Get Column By Index | Method: getColumnByIndex(columnIndex)<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.getColumnByIndex(1); </script> |
Method: getColumnByIndex(columnIndex)<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.getColumnByIndex(1); </script> |
Get Column Fieldnames | Method: getColumnFieldNames()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.getColumnFieldNames(); </script> |
Method: getColumnFieldNames()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.getColumnFieldNames(); </script> |
Get Column Index By Field | Method: getColumnIndexByField(fieldName) <ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.getColumnIndexByField("OrderID"); </script> |
Method: getColumnIndexByField(fieldName) <ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.getColumnIndexByField("OrderID"); </script> |
Get Column Index By headerText | Method: getColumnIndexByHeaderText(headerText, [field])<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.getColumnIndexByHeaderText("Order ID"); </script> |
The Column Index for a corresponding headerText can be get by iterating the gridObj.columns with the headerText |
Set Width to columns | Method: setWidthToColumns()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.setWidthToColumns(); </script> |
Method: widthService.setWidthToColumns() <ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.widthService.setWidthToColumns() </script> |
Get HeaderText By FieldName | Method: getHeaderTextByFieldName()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.getHeaderTextByFieldName("OrderID"); </script> |
Not Applicable |
Get Hidden Columnname | Method: getHiddenColumnNames()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.getHiddenColumnNames(); </script> |
Not Applicable |
Get Visible Columns/Names | Method: getVisibleColumnNames()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.getVisibleColumnNames(); </script> |
Method: getVisibleColumns()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.getVisibleColumns(); </script> |
Select Columns | Method: selectColumns(fromIndex)<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.selectColumns(1,4); </script> |
Not Applicable |
Select Specific Columns based on Index | Method: selectColumns(columnIndex,[toIndex]) <ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.selectColumns(1,4); </script> |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
EnableHover | Property: EnableRowHover<ej-grid id="Grid" enable-row-hover="true"> </ej-grid> |
Property: EnableHover<ejs-grid id="Grid" enableHover="true"> </ejs-grid> |
Get Row Height | Method: getRowHeight()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.getRowHeight(); </script> |
Method: getRowHeight()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.getRowHeight(); </script> |
Refresh Row Height | Method: rowHeightRefresh()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.rowHeightRefresh(); </script> |
Not Applicable |
Get index by Row Element | Method: getIndexByRow($tr)<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.getIndexByRow($(".gridcontent tr").first()); </script> |
Not Applicable |
Get Row by its Index | Method: getRowByIndex(from, to)<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.getRowByIndex(3, 6); </script> |
Method: getRowByIndex(index)<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.getRowByIndex(1); </script> |
Get rendered rows | Method: getRows()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.getRows(); </script> |
Method: getRows()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.getRows(); </script> |
Triggers while hover the grid row | Event: RowHover<ej-grid id="Grid" row-hover="rowHover"> </ej-grid> Script: <script> function rowHover(){} </script> |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Hide Columns by using method | Method: hideColumns(headerText)<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.hideColumns("Order ID"); </script> |
Method: hideColumns(headerText)<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.hideColumns("Order ID"); </script> |
Show Columns by using method | Method: showColumns(headerText)<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.showColumns("Order ID"); </script> |
Method: showColumns(headerText)<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.showColumns("Order ID"); </script> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: ShowColumnChooser<ej-grid id="Grid" show-column-chooser=“true” > <e-columns> <e-column field="EmployeeID" show-in-column-chooser="false"> </e-column> <e-column field="OrderID"> </e-column></e-columns> </ej-grid> |
Property: ShowColumnChooser<ejs-grid id="Grid" showColumnChooser="true" > <e-grid-columns> <e-grid-column field="EmployeeID" showInColumnChooser="false"></e-grid-column> <e-grid-column field="OrderID"> </e-grid-column> </e-grid-columns> </ejs-grid> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Refresh Header | Method: refreshHeader()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.refreshHeader(); </script> |
Method: refreshHeader()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.refreshHeader(); </script> |
Triggers every time a request is made to access particular header cell information, element and data. | Event: MergeHeaderCellInfo<ej-grid id="Grid" merge-header-cell-info="mergeHeaderCellInfo"> </ej-grid> Script: <script> function mergeHeaderCellInfo(){} </script> |
Not Applicable |
Triggers every time a request is made to access particular cell information, element and data | Event: MergeCellInfo<ej-grid id="Grid" merge-cell-info="mergeCellInfo"> </ej-grid> Script: <script> function mergeCellInfo(){} </script> |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
To set a new DataSource Dynamically by using the method | Method: dataSource(datasource,[templateRefresh])<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.dataSource(newdataSource); </script> |
Property: dataSource<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.datasource = newdataSource </script> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Print the grid | Method: print()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.print(); </script> |
Method: print()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.print(); </script> |
Triggers before printing the grid | Event: BeforePrint<ej-grid id="Grid" before-print="beforePrint"> </ej-grid> Script: <script> function beforePrint(){} </script> |
Event: BeforePrint<ejs-grid id="Grid" beforePrint="beforePrint"> </ejs-grid> Script: <script> function beforePrint(){} </script> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Get ScrollObject | Method: getScrollObject()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.getScrollObject(); </script> |
Property: grid.scrollModule<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; var scrollObj = gridObj.scrollModule; </script> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: Columns.IsPrimaryKey<ej-grid id="Grid"> <e-columns> <e-column field="EmployeeID" is-primary-key="true"> </e-column></e-columns> </ej-grid> |
Property: Columns.IsPrimaryKey<ejs-grid id="Grid"> <e-grid-columns> <e-grid-column field="EmployeeID" isPrimaryKey="true"> </e-grid-column></e-grid-columns> </ejs-grid> |
Get the PrimaryKey fieldnames | Method: getPrimaryKeyFieldNames()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.getPrimaryKeyFieldNames(); </script> |
Method: getPrimaryKeyFieldNames() <ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.getPrimaryKeyFieldNames(); </script> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Get the Browser Details | Method: getBrowserDetails()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.getBrowserDetails(); </script> |
In Essential JS 2, it can be achieved by using Browser class of ej2-base |
Set dimension for the grid | Method: setDimension(height, width)<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.setDimension(300,400); </script> |
Not Applicable |
set maximum width for mobile | Method: setPhoneModeMaxWidth(value)<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.setPhoneModeMaxWidth(500); </script> |
Not Applicable |
Render the grid | Method: render()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.render(); </script> |
Method: render()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.render(); </script> |
Reset the model collections like pageSettings, groupSettings, filterSettings, sortSettings and summaryRows. |
Method: resetModelCollections()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.resetModelCollections(); </script> |
Not Applicable |
Destroy the grid | Method: destroy()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.destroy(); </script> |
Method: destroy()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.destroy() </script> |
Get Content Element | Method: getContent()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.getContent(); </script> |
Method: getContent()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.getContent(); </script> |
Get Content Table | Method: getContentTable()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.getContentTable(); </script> |
Method: getContentTable()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.getContentTable(); </script> |
Get Current View Data | Method: getCurrentViewData()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.getCurrentViewData(); </script> |
Method: getCurrentViewRecords()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.getCurrentViewRecords(); </script> |
Get Data Row | Method: getDataByIndex(rowIndex)<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.getDataByIndex(0); </script> |
Method: getDataRows()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.getDataRows(); </script> |
Get Fieldname by using the headertext | Method: getFieldNameByHeaderText(headerText) <ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.getFieldNameByHeaderText ("Order ID"); </script> |
Not Applicable |
Get FooterContent | Method: getFooterContent()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.getFooterContent(); </script> |
Method: getFooterContent()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.getFooterContent(); </script> |
Get FooterContent Table | Method: getFooterTable()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.getFooterTable(); </script> |
Method: getFooterContentTable()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.getFooterContentTable(); </script> |
Get HeaderContent | Method: getHeaderContent()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.getHeaderContent(); </script> |
Method: getHeaderContent()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.getHeaderContent(); </script> |
Get HeaderContent Table | Method: getHeaderTable()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.getHeaderTable(); </script> |
Method: getHeaderTable()<ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj.getHeaderTable(); </script> |
Refresh Content | Method: refreshContent()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.refreshContent(); </script> |
Method: contentModule.refreshContentRows() <ejs-grid id="Grid"> </ejs-grid> Script: <script> var gridObj = document.getElementById ('Grid').ej2_instances[0]; gridObj. contentModule.refreshContentRows(); </script> |
Refresh Data | Method: refreshData()<ej-grid id="Grid"> </ej-grid> Script: <script> var gridObj = $("#Grid").data("ejGrid"); gridObj.refreshData(); </script> |
Not Applicable |
Triggers every time a request is made to access particular cell information, element and data |
Event: QueryCellInfo<ej-grid id="Grid" query-cell-info="queryCellInfo"> </ej-grid> Script: <script> function queryCellInfo(){} </script> |
Event: QueryCellInfo<ejs-grid id="Grid" queryCellInfo="queryCellInfo"> </ejs-grid> Script: <script> function queryCellInfo(){} </script> |
Triggers every time a request is made to access row information, element and data |
Event: RowDataBound<ej-grid id="Grid" row-data-bound="rowDataBound"> </ej-grid> Script: <script> function rowDataBound(){} </script> |
Event: RowDataBound<ejs-grid id="Grid" rowDataBound="rowDataBound"> </ejs-grid> Script: <script> function rowDataBound(){} </script> |
Triggers for every grid action before it get started |
Event: ActionBegin<ej-grid id="Grid" action-begin="actionBegin"> </ej-grid> Script: <script> function actionBegin(){} </script> |
Event: ActionBegin<ejs-grid id="Grid" actionBegin="actionBegin"> </ejs-grid> Script: <script> function actionBegin(){} </script> |
Triggers for every grid action success event |
Event: ActionComplete<ej-grid id="Grid" action-complete="actionComplete"> </ej-grid> Script: <script> function actionComplete(){} </script> |
Event: ActionComplete<ejs-grid id="Grid" actionComplete="actionComplete"> </ejs-grid> Script: <script> function actionComplete(){} </script> |
Triggers for every grid server failure event |
Event: ActionFailure<ej-grid id="Grid" action-failure="actionFailure"> </ej-grid> Script: <script> function actionFailure(){} </script> |
Event: ActionFailure<ejs-grid id="Grid" actionFailure="actionFailure"> </ejs-grid> Script: <script> function actionFailure(){} </script> |
Triggers when the grid is bound with data during rendering |
Event: DataBound<ej-grid id="Grid" data-bound="dataBound"> </ej-grid> Script: <script> function dataBound(){} </script> |
Event: DataBound<ejs-grid id="Grid" dataBound="dataBound"> </ejs-grid> Script: <script> function dataBound(){} </script> |
Triggers when the grid is going to destroy |
Event: Destroy<ej-grid id="Grid" destroy="destroy"> </ej-grid> Script: <script> function destroy(){} </script> |
Event: Destroyed<ejs-grid id="Grid" destroyed="destroyed"> </ejs-grid> Script: <script> function destroyed(){} </script> |
Triggers when initial load of the grid | Event: Load<ej-grid id="Grid" load="load"> </ej-grid> Script: <script> function load(){} </script> |
Event: Load<ejs-grid id="Grid" load="load"> </ejs-grid> Script: <script> function load(){} </script> |
Triggers when the grid is rendered completely | Event: Create<ej-grid id="Grid" create="create"> </ej-grid> Script: <script> function create(){} </script> |
Event: Created<ejs-grid id="Grid" created="created"> </ejs-grid> Script: <script> function created(){} </script> |
Triggers when the record is clicked | Event: RecordClick<ej-grid id="Grid" record-click="recordClick"> </ej-grid> Script: <script> function recordClick(){} </script> |
Not Applicable |
Triggers when right clicked on grid element | Event: RightClick<ej-grid id="Grid" right-click="rightClick"> </ej-grid> Script: <script> function rightClick(){} </script> |
Not Applicable |
Triggers when the record is double clicked |
Event: RecordDoubleClick<ej-grid id="Grid" record-double-click="recordDoubleClick"> </ej-grid> Script: <script> function recordDoubleClick(){} </script> |
Event: RecordDoubleClick<ejs-grid id="Grid" recordDoubleClick="recordDoubleClick"> </ejs-grid> Script: <script> function recordDoubleClick(){} </script> |