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