Migration from Essential® JS 1

8 Dec 202424 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

@(Html.EJ().Grid<object>("Grid")
 .AllowSorting().Columns(col =>{
 col.Field("OrderID").Add();
})
) 		Property: AllowSorting

@Html.EJS().Grid("Grid")
 .AllowSorting().Columns(col =>{
  col.Field("OrderID").Add();
}).Render()
Clear the Sorted columns Method: clearSorting()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.clearSorting();
</script> 		Method: clearSorting()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.clearSorting()
</script>
Get the Sorted Columns by using the Fieldname Method: getsortColumnByField(field)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
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.columnswith the fieldname
Remove the Sorted Columns Method: removeSortedColumns(fieldName)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.removeSortedColumns("OrderID");
</script> 		Method: removeSortColumn(fieldName)

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
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])

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.sortColumn("OrderID", "ascending");
</script> 		Method: sortColumn(columnName, Direction)

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.sortColumn("OrderID", "ascending");
</script>

Grouping

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: AllowGrouping

@(Html.EJ().Grid<object>("Grid")
 .AllowGrouping().Columns(col =>{
 col.Field("OrderID").Add();
})
) 		Property: AllowGrouping

@Html.EJS().Grid("Grid")
 .AllowGrouping().Columns(col =>{
  col.Field("OrderID").Add();
}).Render()
Group Columns initially Property: AllowGrouping.GroupedColumns

@(Html.EJ().Grid<object>("Grid")
 .AllowGrouping()
.GroupSettings(group => { group
.GroupedColumns(col => { col.Add("ShipCountry"); }); })
.Columns(col =>{
 col.Field("OrderID").Add();
  col.Field("ShipCountry").Add();
  col.Field("ShipCity").Add();
})
) 		Property: AllowGrouping.Columns

@Html.EJS().Grid("Grid")
.AllowGrouping()
.GroupSettings(group=>
group.Columns(new string[] { "ShipCountry" }))
.Columns(col =>{
  col.Field("OrderID").Add();
  col.Field("ShipCountry").Add();
  col.Field("ShipCity").Add();
}).Render()
Caption Template Property: GroupSettings.CaptionFormat

@(Html.EJ().Grid<object>("Grid")
.AllowGrouping()
.GroupSettings(group =>{
group.CaptionFormat("#template"); }))
Script:
<script id="template" type="text/x-jsrender">
You can add template elements here
</script> 		Property: GroupSettings.CaptionTemplate

@Html.EJS().Grid("Grid")
 .AllowGrouping().GroupSettings(
group =>{group.Columns(
new string[] { "Freight" })
  .CaptionTemplate("#captiontemplate"); })
.Render()
Script:
<script>
<script id="captiontemplate"
type="text/x-template">
You can add template elements here
</script>
Show Drop Area Property: AllowGrouping.ShowDropArea

@(Html.EJ().Grid<object>("Grid")
.AllowGrouping()
.GroupSettings(group =>{
group.ShowDropArea(false) }); })
.Columns(col =>{
 col.Field("OrderID").Add();
  col.Field("ShipCity").Add();
})
) 		Property: AllowGrouping.showDropArea

@Html.EJS().Grid("Grid")
 .AllowGrouping()
.GroupSettings(group=>
group.ShowDropArea(false))
.Columns(col =>{
  col.Field("OrderID").Add();
  col.Field("ShipCity").Add();
}).Render()
Collapse all group caption rows Method: collapseAll()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.collapseAll();
</script> 		Method: collapseAll()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.groupModule.collapseAll()
</script>
Expand all group caption rows Method: expandAll()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.expandAll();
</script> 		Method: expandAll()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
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)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.expandCollapse($("tr td.recordplusexpand > div").first());
</script> 		Method: expandCollapseRows()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
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()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.collapseGroupDropArea();
</script> 		Not Applicable
Expand the group drop area in grid Method: expandGroupDropArea()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.expandGroupDropArea();
</script> 		Not Applicable
Group a column by using the method Method: groupColumn(fieldName)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.groupColumn("OrderID");
</script> 		Method: groupColumn(fieldName)

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
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)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.ungroupColumn("OrderID");
</script> 		Method: ungroupColumn(fieldName)

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.ungroupColumn("OrderID")
</script>

Filtering

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: AllowFiltering

@(Html.EJ().Grid<object>("Grid")
.AllowFiltering().Columns(col =>{
 col.Field("OrderID").Add();
})
) 		Property: AllowFiltering

@Html.EJS().Grid("Grid")
 .AllowFiltering().Columns(col =>{
  col.Field("OrderID").Add();
}).Render()
Menu Filtering Property: FilterSettings.FilterType

@(Html.EJ().Grid<object>("Grid")
.AllowFiltering()
.FilterSettings(filter =>{
filter.FilterType(FilterType.Menu); })
.Columns(col =>{
 col.Field("OrderID").Add();
})) 		Property: FilterSettings.Type

@Html.EJS().Grid("Grid")
 .AllowFiltering().FilterSettings(filter=>
filter.Type(Syncfusion.EJ2.Grids
.FilterType.Menu))
.Columns(col =>{
  col.Field("OrderID").Add();
  col.Field("ShipCountry").Add();
  col.Field("ShipCity").Add();
}).Render()
Excel Filtering Property: FilterSettings.FilterType

@(Html.EJ().Grid<object>("Grid")
.AllowFiltering()
.FilterSettings(filter => {
filter.FilterType(FilterType.Excel); })
.Columns(col =>{
 col.Field("OrderID").Add();
})) 		Property: FilterSettings.Type

@Html.EJS().Grid("Grid")
 .AllowFiltering().FilterSettings(filter=>
filter.Type(Syncfusion.EJ2.Grids
.FilterType.Excel))
.Columns(col =>{
  col.Field("OrderID").Add();
  col.Field("ShipCountry").Add();
  col.Field("ShipCity").Add();
}).Render()
Clear the Filtered values Method: clearFiltering(field) - field is optional

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.clearFiltering();
<script> 		Method: clearFiltering()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
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])

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
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)

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.filterByColumn("OrderID",
equal",10248)
</script>
Filter columns by Collection Method: filterColumn(filterCollection)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
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

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
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()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getFilteredRecords();
</script> 		Not Applicable

Searching

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: ToolbarSettings.ToolbarItems

@(Html.EJ().Grid<object>("Grid")
 .ToolbarSettings(toolBar =>
toolBar.ShowToolbar()
.ToolbarItems(items =>
{items.AddTool(ToolBarItems.Search);}))
.Columns(col =>{
 col.Field("OrderID").Add();
  col.Field("ShipCity").Add();
})
) 		Property: Toolbar

@Html.EJS().Grid("Grid")
 .Toolbar(new List<string>() { "Search" })
.Columns(col =>{
  col.Field("OrderID").Add();
  col.Field("ShipCity").Add();
}).Render()
Clear the Searched values Method: clearSearching()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.clearSearching();
</script> 		Method: searchModule.search()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.searchModule.search("");
</script>
Search a value Method: search(searchString)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.search("France");
</script> 		Method: searchModule.search()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.searchModule.search("France");
</script>

Paging

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: AllowPaging

@(Html.EJ().Grid<object>("Grid")
 .AllowPaging().Columns(col =>{
 col.Field("OrderID").Add();
})
) 		Property: AllowPaging

@Html.EJS().Grid("Grid")
 .AllowPaging().Columns(col =>{
  col.Field("OrderID").Add();
}).Render()
Customize Paging Property: PageSettings.PageSize

@(Html.EJ().Grid<object>("Grid")
 .AllowPaging()
.PageSettings(page=>{ page.PageSize(8).PageSizeList(new List<int>() {5, 10 });})
.Columns(col =>{
 col.Field("OrderID").Add();
  col.Field("ShipCity").Add();
})
) 		Property: PageSettings.PageSize

@Html.EJS().Grid("Grid")
 .AllowPaging().PageSettings(page
=> page.PageSize(8).PageSizes(new string[] {"5","10"}))
.Columns(col =>{
  col.Field("OrderID").Add();
  col.Field("ShipCity").Add();
}).Render()
Change Page Size Method: changePageSize(pageSize)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.changePageSize(7);
</script> 		Property: pageSettings.pageSize

Pagesize can be modified dynamically by using the below code
@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
PageSettings.PageSize = 7;
</script>
Get Current Page Index Method: getCurrentIndex()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getCurrentIndex();
</script> 		Property: pageSettings.currentPage

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
var currentPage = gridObj.pageSettings.currentPage;
</script>
Get Pager Element Method: getPager()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getPager();
</script> 		Method: getPager()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getPager();
</script>
Send a paging request to specified Page Method: gotoPage(pageIndex)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.gotoPage(3);
</script> 		Method: gotoPage(pageIndex)

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
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)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.
calculatePageSizeByParentHeight(400);
</script> 		Not Applicable

Selection

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: AllowSelection

@(Html.EJ().Grid<object>("Grid")
 .AllowSelection().Columns(col =>{
 col.Field("OrderID").Add();
})
) 		Property: AllowSelection

@Html.EJS().Grid("Grid")
 .AllowSelection().Columns(col =>{
  col.Field("OrderID").Add();
}).Render()
Single Selection Property: SelectionType

@(Html.EJ().Grid<object>("Grid")
 .AllowSelection()
.SelectionType(SelectionType.Single)
.Columns(col =>{
 col.Field("OrderID").Add();
  col.Field("ShipCity").Add();
})
) 		Property: SelectionSettings.Type

@Html.EJS().Grid("Grid")
 .AllowSelection()
.SelectionSettings(select =>
select.Type(Syncfusion.EJ2
.Grids.SelectionType.Single))
.Columns(col =>{
  col.Field("OrderID").Add();
  col.Field("ShipCity").Add();
}).Render()
Multiple Selection Property: SelectionType

@(Html.EJ().Grid<object>("Grid")
 .AllowSelection()
.SelectionType(SelectionType.Multiple)
.Columns(col =>{
 col.Field("OrderID").Add();
  col.Field("ShipCity").Add();
})
) 		Property: SelectionSettings.Type

@Html.EJS().Grid("Grid")
 .AllowSelection()
.SelectionSettings(select =>
select.Type(Syncfusion.EJ2
.Grids.SelectionType.Multiple))
.Columns(col =>{
  col.Field("OrderID").Add();
  col.Field("ShipCity").Add();
}).Render()
Row Selection Property: SelectionSettings.SelectionMode

@(Html.EJ().Grid<object>("Grid")
 .AllowSelection()
.SelectionSettings(select => {
select.SelectionMode(mode => {
mode.AddMode(SelectionMode.Row); }); })
.Columns(col =>{
 col.Field("OrderID").Add();
 col.Field("ShipCity").Add();
})
) 		Property: SelectionSettings.Mode

@Html.EJS().Grid("Grid")
 .AllowSelection()
.SelectionSettings(select =>
select.Mode(Syncfusion.EJ2
.Grids.SelectionMode.Row))
.Columns(col =>{
  col.Field("OrderID").Add();
  col.Field("ShipCity").Add();
}).Render()
Cell Selection Property: SelectionSettings.SelectionMode

@(Html.EJ().Grid<object>("Grid")
 .AllowSelection()
.SelectionSettings(select => {
select.SelectionMode(mode => {
mode.AddMode(SelectionMode.Cell); }); })
.Columns(col =>{
 col.Field("OrderID").Add();
  col.Field("ShipCity").Add();
})
) 		Property: SelectionSettings.Mode

@Html.EJS().Grid("Grid")
 .AllowSelection()
.SelectionSettings(select =>
select.Mode(Syncfusion.EJ2
.Grids.SelectionMode.Cell))
.Columns(col =>{
  col.Field("OrderID").Add();
  col.Field("ShipCity").Add();
}).Render()
Clear the selected Cells Method: clearCellSelection()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.clearCellSelection();
</script> 		Method: clearCellSelection()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.selectionModule
.clearCellSelection()
</script>
Clear the selected Columns Method: clearColumnSelection([index])-
index is optional

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.clearColumnSelection();
</script> 		Not Applicable
Get the selected Records Method: getSelectedRecords()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getSelectedRecords();
</script> 		Method: getSelectedRecords()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document
.getElementById('Grid')
.ej2_instances[0]
gridObj.getSelectedRecords();
</script>
Get the selected Rows Method: getSelectedRows()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getSelectedRows();
</script> 		Method: getSelectedRows()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document
.getElementById('Grid')
.ej2_instances[0]
gridObj.getSelectedRows();
</script>
Select Cells Method: selectCells(rowCellIndexes)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.selectCells([[1, [4, 3, 2]]]);
</script> 		Method: selectionModule.selectCells();

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
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)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.selectRows(1, 4);
</script> 		Method: selectionModule.selectRows()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.selectionModule.
selectRows([0, 2])
</script>
Triggers when a
cell is selected		 Event: CellSelected

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.CellSelected("cellSelected");}))
Script:
<script>
function cellSelected(){}
</script> 		Event: CellSelected

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.CellSelected("cellSelected")
.Render()
Script:
<script>
function cellSelected(){}
</script>
Triggers before the cell is being selected Event: CellSelecting

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.CellSelecting("cellSelecting");}))
Script:
<script>
function cellSelecting(){}
</script> 		Event: CellSelecting

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.CellSelecting("cellSelecting")
.Render()
Script:
<script>
function cellSelecting(){}
</script>
Triggers when a
cell is deselected		 Event: CellDeselected

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.CellDeselected("cellDeselected");}))
Script:
<script>
function cellDeselected(){}
</script> 		Event: CellDeselected

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.CellDeselected("cellDeselected")
.Render()
Script:
<script>
function cellDeselected(){}
</script>
Triggers before the cell is being deselected Event: CellDeselecting

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.CellDeselecting("cellDeselecting");}))
Script:
<script>
function cellDeselecting(){}
</script> 		Event: CellDeselecting

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.CellDeselecting("cellDeselecting")
.Render()
Script:
<script>
function cellDeselecting(){}
</script>
Triggers when the
row is selected		 Event: RowSelected

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.RowSelected("rowSelected");}))
Script:
<script>
function rowSelected(){}
</script> 		Event: RowSelected

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.RowSelected("rowSelected")
.Render()
Script:
<script>
function rowSelected(){}
</script>
Triggers before the row is being selected Event: RowSelecting

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.RowSelecting("rowSelecting");}))
Script:
<script>
function rowSelecting(){}
</script> 		Event: RowSelecting

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.RowSelecting("rowSelecting")
.Render()
Script:
<script>
function rowSelecting(){}
</script>
Triggers when the
row is deselected		 Event: RowDeselected

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.RowDeselected("rowDeselected");}))
Script:
<script>
function rowDeselected(){}
</script> 		Event: RowDeselected

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.RowDeselected("rowDeselected")
.Render()
Script:
<script>
function rowDeselected(){}
</script>
Triggers before the row is being deselected Event: RowDeselecting

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.RowDeselecting("rowDeselecting");}))
Script:
<script>
function rowDeselecting(){}
</script> 		Event: RowDeselecting

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.RowDeselecting("rowDeselecting")
.Render()
Script:
<script>
function rowDeselecting(){}
</script>
Triggers when the column is selected Event: ColumnSelected

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.ColumnSelected("columnSelected");}))
Script:
<script>
function columnSelected(){}
</script> 		Not Applicable
Triggers before the column is being selected Event: ColumnSelecting

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.ColumnSelecting("columnSelecting");}))
Script:
<script>
function columnSelecting(){}
</script> 		Not Applicable
Triggers when the column is deselected Event: ColumnDeselected

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.ColumnDeselected("columnDeselected");}))
Script:
<script>
function columnDeselected(){}
</script> 		Not Applicable
Triggers before the column is being deselected Event: ColumnDeselecting

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.ColumnDeselecting("columnDeselecting");}))
Script:
<script>
function columnDeselecting(){}
</script> 		Not Applicable

Editing

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: EditSettings

@(Html.EJ().Grid<object>("Grid")
 .EditSettings(edit => { edit.AllowAdding()
.AllowDeleting().AllowEditing(); })
 col.Field("OrderID").Add();
})
) 		Property: EditSettings

@Html.EJS().Grid("Grid")
 .EditSettings(edit => { edit.AllowAdding
(true).AllowEditing(true).AllowDeleting(true) })
.Columns(col =>{
  col.Field("OrderID").Add();
}).Render()
Inline Editing Property: EditSettings.EditMode

@(Html.EJ().Grid<object>("Grid")
 .EditSettings(edit => { edit.AllowAdding()
.AllowDeleting().AllowEditing()
.EditMode(EditMode.Normal); })
 col.Field("OrderID").Add();
})
) 		Property: EditSettings.Mode

@Html.EJS().Grid("Grid")
 .EditSettings(edit => { edit.AllowAdding(true).
AllowEditing(true).AllowDeleting(true).Mode
(Syncfusion.EJ2.Grids.EditMode.Normal); })
.Columns(col =>{
  col.Field("OrderID").Add();
}).Render()
Dialog Editing Property: EditSettings.EditMode

@(Html.EJ().Grid<object>("Grid")
 .EditSettings(edit => { edit.AllowAdding()
.AllowDeleting().AllowEditing()
.EditMode(EditMode.Dialog); })
 col.Field("OrderID").Add();
})
) 		Property: EditSettings.Mode

@Html.EJS().Grid("Grid")
 .EditSettings(edit => { edit.AllowAdding(true).
AllowEditing(true).AllowDeleting(true).Mode
(Syncfusion.EJ2.Grids.EditMode.Dialog); })
.Columns(col =>{
  col.Field("OrderID").Add();
}).Render()
Batch Editing Property: EditSettings.EditMode

@(Html.EJ().Grid<object>("Grid")
 .EditSettings(edit => { edit.AllowAdding()
.AllowDeleting().AllowEditing()
.EditMode(EditMode.Batch); })
 col.Field("OrderID").Add();
})
) 		Property: EditSettings.Mode

@Html.EJS().Grid("Grid")
 .EditSettings(edit => { edit.AllowAdding(true).
AllowEditing(true).AllowDeleting(true).Mode
(Syncfusion.EJ2.Grids.EditMode.Batch); })
.Columns(col =>{
  col.Field("OrderID").Add();
}).Render()
Add a new Record Method: addRecord([data,[serverChange]])

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.addRecord({"OrderID":12333});
</script> 		Method: addRecord(data(optional), index(optional))

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.addRecord();
</script>
Batch Cancel Method: batchCancel()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.batchCancel();
</script> 		Not Applicable
Batch Save Method: batchSave()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.batchSave();
</script> 		Method: batchSave()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
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])

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.saveCell();
</script> 		Method: saveCell()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.editModule.saveCell()
</script>
End Edit Method: endEdit()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.endEdit();
</script> 		Method: endEdit()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.endEdit()
</script>
Cancel Edit Method: cancelEdit()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.cancelEdit();
</script> 		Method: closeEdit()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.closeEdit()
</script>
Delete Record Method: deleteRecord(fieldName, data)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.deleteRecord("OrderID",
{ OrderID: 10249, EmployeeID: 3 });
</script> 		Method: deleteRecord(field, data)- Field and
* data are optional*

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.deleteRecord()
</script>
Delete Row Method: deleteRow($tr)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.deleteRow($(".gridcontent tr").first());
</script> 		Method: deleteRow(tr)

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
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)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.editCell(2, "OrderID");
</script> 		Method: editModule.editCell(index, field)

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.editModule.editCell(0,gridObj
.columns[0].field)
</script>
Edit Form Validation Method: editFormValidate()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.editFormValidate();
</script> 		Method: editModule.formObj.validate()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.editModule.formObj.validate()
</script>
Get Batch Changes Method: getBatchChanges()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getBatchChanges();
</script> 		Method: editModule.getBatchChanges()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.editModule.getBatchChanges()
</script>
Refresh Batch Edit Changes Method: refreshBatchEditChanges()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.refreshBatchEditChanges();
</script> 		Not Applicable
Set Default Data for adding Method: setDefaultData(defaultData)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
var defaultData = {OrderID:"10000"};
gridObj.setDefaultData(defaultData);
</script> 		Method: editModule.addRecord()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.editModule.addRecord({OrderID:10000})
</script>
Start Edit Method: startEdit($tr)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.startEdit($(".gridcontent tr")
.first());
</script> 		Method: startEdit()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.startEdit(gridObj.selectRow(0))
</script>
Update Record Method: updateRecord(fieldName, data)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.updateRecord("OrderID",
{ OrderID: 10249, EmployeeID: 3 });
</script> 		Not Applicable
Set Cell value Method: setCellText()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.setCellText(0, 1, "France");
</script> 		Method: setCellValue(key, field, value)

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.setCellValue(10248,"CustomerID","A")
</script>
Get Currently edited cell value Method: getCurrentEditCellData()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getCurrentEditCellData();
</script> 		Method: getCurrentEditCellData()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.
editModule.getCurrentEditCellData();
</script>
Triggers when adding a
record in batch editing		 Event: BatchAdd

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.batchAdd("BatchAdd");}))
Script:
<script>
function batchAdd(){}
</script> 		Event: BatchAdd

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.BatchAdd("batchAdd")
.Render()
Script:
<script>
function batchAdd(){}
</script>
Triggers when deleting a
record in batch editing		 Event: BatchDelete

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.BatchDelete("batchDelete");}))
Script:
<script>
function batchDelete(){}
</script> 		Event: BatchDelete

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.BatchDelete("batchDelete")
.Render()
Script:
<script>
function batchDelete(){}
</script>
Triggers before adding a record in batch editing Event: BeforeBatchAdd

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.BeforeBatchAdd("beforeBatchAdd");}))
Script:
<script>
function beforeBatchAdd(){}
</script> 		Event: BeforeBatchAdd

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.BeforeBatchAdd("beforeBatchAdd")
.Render()
Script:
<script>
function beforeBatchAdd(){}
</script>
Triggers before deleting a record in batch editing Event: BeforeBatchDelete

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.BeforeBatchDelete("beforeBatchDelete");}))
Script:
<script>
function beforeBatchDelete(){}
</script> 		Event: BeforeBatchDelete

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.BeforeBatchDelete("beforeBatchDelete")
.Render()
Script:
<script>
function beforeBatchDelete(){}
</script>
Triggers before saving a record in batch editing Event: BeforeBatchSave

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.BeforeBatchSave("beforeBatchSave");}))
Script:
<script>
function beforeBatchSave(){}
</script> 		Event: BeforeBatchSave

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.BeforeBatchSave("beforeBatchSave")
.Render()
Script:
<script>
function beforeBatchSave(){}
</script>
Triggers before the
record in being edited		 Event: BeginEdit

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.BeginEdit("beginEdit");}))
Script:
<script>
function beginEdit(){}
</script> 		Event: BeginEdit

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.BeginEdit("beginEdit")
.Render()
Script:
<script>
function beginEdit(){}
</script>
Triggers when the
cell is being edited		 Event: CellEdit

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.CellEdit("cellEdit");}))
Script:
<script>
function cellEdit(){}
</script> 		Event: CellEdit

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.CellEdit("cellEdit")
.Render()
Script:
<script>
function cellEdit(){}
</script>
Triggers when the
cell is saved		 Event: CellSave

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.CellSave("cellSave");}))
Script:
<script>
function cellSave(){}
</script> 		Event: CellSave

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.cellSave("cellSave")
.Render()
Script:
<script>
function cellSave(){}
</script>
Triggers when the record is added Event: EndAdd

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.EndAdd("endAdd");}))
Script:
<script>
function endAdd(){}
</script> 		Event: ActionComplete

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.ActionComplete("actionComplete")
.Render()
Script:
<script>
function actionComplete(){}
</script>
Triggers when the record is deleted Event: EndDelete

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.EndDelete("endDelete");}))
Script:
<script>
function endDelete(){}
</script> 		Event: ActionComplete

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.ActionComplete("actionComplete")
.Render()
Script:
<script>
function actionComplete(){}
</script>
Triggers after the record is edited Event: EndEdit

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.EndEdit("endEdit");}))
Script:
<script>
function endEdit(){}
</script> 		Event: ActionComplete

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.ActionComplete("actionComplete")
.Render()
Script:
<script>
function actionComplete(){}
</script>

Resizing

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: AllowResizing

@(Html.EJ().Grid<object>("Grid")
 .AllowResizing().Columns(col =>{
 col.Field("OrderID").Add();
})
) 		Property: AllowResizing

@Html.EJS().Grid("Grid")
 .AllowResizing().Columns(col =>{
  col.Field("OrderID").Add();
}).Render()
Resize a column by using the method Method: resizeColumns(column,width)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
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.
@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
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

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.ResizeStart("resizeStart");}))
Script:
<script>
function resizeStart(){}
</script> 		Event: ResizeStart

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.ResizeStart("resizeStart")
.Render()
Script:
<script>
function resizeStart(){}
</script>
Triggers when a column is resized Event: Resized

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.Resized("resized");}))
Script:
<script>
function resized(){}
</script> 		Event: ResizeStop

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.ResizeStop("resizeStop")
.Render()
Script:
<script>
function resizeStop(){}
</script>
Triggers when a column resize stops Event: ResizeEnd

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.ResizeEnd("resizeEnd");}))
Script:
<script>
function resizeEnd(){}
</script> 		Not Applicable

Reordering

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: AllowReordering

@(Html.EJ().Grid<object>("Grid")
 .AllowReordering().Columns(col =>{
 col.Field("OrderID").Add();
})
) 		Property: AllowReordering

@Html.EJS().Grid("Grid")
 .AllowReordering().Columns(col =>{
  col.Field("OrderID").Add();
}).Render()
Reorder Columns Method: reorderColumns(fromFieldName, toFieldName)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.reorderColumns("OrderID", "CustomerID");
</script> 		Method: reorderColumns(fromFieldName, toFieldName)

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.reorderColumns("OrderID", "CustomerID");
</script>
Reorder Rows Method: reorderRows(indexes, toIndex)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.reorderRows([0,1],3);
</script> 		Not Applicable

Context Menu

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: ContextMenuSettings.EnableContextMenu

@(Html.EJ().Grid<object>("Grid")
 .ContextMenuSettings(contextMenu =>{contextMenu.EnableContextMenu();})
.Columns(col =>{
 col.Field("OrderID").Add();
})
) 		Property: ContextMenuItems

@Html.EJS().Grid("Grid")
 .ContextMenuItems(new List<object>() { "AutoFit", "AutoFitAll" })
.Columns(col =>{
  col.Field("OrderID").Add();
}).Render()
Triggers when context menu item is clicked Event: ContextClick

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.ContextClick("contextClick");}))
Script:
<script>
function contextClick(){}
</script> 		Event: ContextMenuClick

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.ContextMenuClick("contextMenuClick")
.Render()
Script:
<script>
function contextMenuClick(){}
</script>
Triggers when context menu opens Event: ContextOpen

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.ContextOpen("contextOpen");}))
Script:
<script>
function contextOpen(){}
</script> 		Event: ContextMenuOpen

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.ContextMenuOpen("contextMenuOpen")
.Render()
Script:
<script>
function contextMenuOpen(){}
</script>

Toolbar

Behavior API in Essential® JS 1 API in Essential® JS 2
Print Property: ToolbarSettings.ToolBarItems

@(Html.EJ().Grid<object>("Grid")
 .ToolbarSettings(toolbar =>{
toolbar.ShowToolbar()
.ToolbarItems(items=>{
items.AddTool(ToolBarItems.PrintGrid);});
})
.Columns(col =>{
 col.Field("OrderID").Add();
})
) 		Property: Toolbar

@Html.EJS().Grid("Grid")
 .Toolbar(new List<string>() { "Print" })
.Columns(col =>{
  col.Field("OrderID").Add();
}).Render()
Add Property: ToolbarSettings.ToolBarItems

@(Html.EJ().Grid<object>("Grid")
 .ToolbarSettings(toolbar =>{
toolbar.ShowToolbar()
.ToolbarItems(items=>{
items.AddTool(ToolBarItems.Add);});
})
.Columns(col =>{
 col.Field("OrderID").Add();
})
) 		Property: Toolbar

@Html.EJS().Grid("Grid")
 .Toolbar(new List<string>() { "Add" })
.Columns(col =>{
  col.Field("OrderID").Add();
}).Render()
Edit Property: ToolbarSettings.ToolBarItems

@(Html.EJ().Grid<object>("Grid")
 .ToolbarSettings(toolbar =>{
toolbar.ShowToolbar()
.ToolbarItems(items =>{
items.AddTool(ToolBarItems.Edit);});
})
.Columns(col =>{
 col.Field("OrderID").Add();
})
) 		Property: Toolbar

@Html.EJS().Grid("Grid")
 .Toolbar(new List<string>() { "Edit" })
.Columns(col =>{
  col.Field("OrderID").Add();
}).Render()
Delete Property: ToolbarSettings.ToolBarItems

@(Html.EJ().Grid<object>("Grid")
 .ToolbarSettings(toolbar =>{
toolbar.ShowToolbar()
.ToolbarItems(items=>{
items.AddTool(ToolBarItems.Delete);});
})
.Columns(col =>{
 col.Field("OrderID").Add();
})
) 		Property: Toolbar

@Html.EJS().Grid("Grid")
 .Toolbar(new List<string>() { "Delete" })
.Columns(col =>{
  col.Field("OrderID").Add();
}).Render()
Update Property: ToolbarSettings.ToolBarItems

@(Html.EJ().Grid<object>("Grid")
 .ToolbarSettings(toolbar =>{
toolbar.ShowToolbar()
.ToolbarItems(items=>{
items.AddTool(ToolBarItems.Update);});
})
.Columns(col =>{
 col.Field("OrderID").Add();
})
) 		Property: Toolbar

@Html.EJS().Grid("Grid")
 .Toolbar(new List<string>() { "Update" })
.Columns(col =>{
  col.Field("OrderID").Add();
}).Render()
Cancel Property: ToolbarSettings.ToolBarItems

@(Html.EJ().Grid<object>("Grid")
 .ToolbarSettings(toolbar =>{
toolbar.ShowToolbar()
.ToolbarItems(items=>{
items.AddTool(ToolBarItems.Cancel);});
})
.Columns(col =>{
 col.Field("OrderID").Add();
})
) 		Property: Toolbar

@Html.EJS().Grid("Grid")
 .Toolbar(new List<string>() { "Cancel" })
.Columns(col =>{
  col.Field("OrderID").Add();
}).Render()
ExcelExport Property: ToolbarSettings.ToolBarItems

@(Html.EJ().Grid<object>("Grid")
 .ToolbarSettings(toolbar =>{
toolbar.ShowToolbar()
.ToolbarItems(items=>{
items.AddTool(ToolBarItems.ExcelExport);});
})
.Columns(col =>{
 col.Field("OrderID").Add();
})
) 		Property: Toolbar

@Html.EJS().Grid("Grid")
 .Toolbar(new List<string>() { "ExcelExport" })
.Columns(col =>{
  col.Field("OrderID").Add();
}).Render()
WordExport Property: ToolbarSettings.ToolBarItems

@(Html.EJ().Grid<object>("Grid")
 .ToolbarSettings(toolbar =>{
toolbar.ShowToolbar()
.ToolbarItems(items=>{
items.AddTool(ToolBarItems.WordExport);});
})
.Columns(col =>{
 col.Field("OrderID").Add();
})
) 		Not Applicable
PdfExport Property: ToolbarSettings.ToolBarItems

@(Html.EJ().Grid<object>("Grid")
 .ToolbarSettings(toolbar =>{
toolbar.ShowToolbar()
.ToolbarItems(items=>{
items.AddTool(ToolBarItems.PdfExport);});
})
.Columns(col =>{
 col.Field("OrderID").Add();
})
) 		Property: Toolbar

@Html.EJS().Grid("Grid")
 .Toolbar(new List<string>() { "PdfExport" })
.Columns(col =>{
  col.Field("OrderID").Add();
}).Render()
Refresh Toolbar Method: refreshToolbar()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.refreshToolbar();
</script> 		Not Applicable
Triggers when toolbar item is clicked Event: ToolbarClick

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve=>{
eve.ToolbarClick("toolbarClick");}))
Script:
<script>
function toolbarClick(){}
</script> 		Event: ToolbarClick

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.ToolbarClick("toolbarClick")
.Render()
Script:
<script>
function toolbarClick(){}
</script>

GridLines

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: GridLines

@(Html.EJ().Grid<object>("Grid")
 .GridLines(GridLines.Vertical)
.Columns(col =>{
 col.Field("OrderID").Add();
})
) 		Property: GridLines

@Html.EJS().Grid("Grid")
 .GridLines(Syncfusion.EJ2
.Grids.GridLine.Vertical).Columns(col =>{
  col.Field("OrderID").Add();
}).Render()

Templates

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: DetailsTemplate

@(Html.EJ().Grid<object>("Grid")
 .DetailsTemplate("#detailsTemplate"))
Script:
<script id="detailsTemplate" type="text/x-jsrender">
You can add template elements here
</script> 		Property: DetailTemplate

@Html.EJS().Grid("Grid")
 .DetailTemplate("#detailtemplate")
.Render()
Script:
<script type="text/x-template" id="detailtemplate">
You can add template elements here
</script>
Default Property: RowTemplate

@(Html.EJ().Grid<object>("Grid")
 .RowTemplate("#templateData"))
Script:
<script id="templateData" type="text/x-jsrender">
You can add template elements here
</script> 		Property: RowTemplate

@Html.EJS().Grid("Grid")
 .RowTemplate("#rowtemplate")
.Render()
Script:
<script id="rowtemplate" type="text/x-template">
You can add template elements here
</script>
Refresh Template Method: refreshTemplate()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.refreshTemplate();
</script> 		Not Applicable
Triggers when detail template row is clicked to collapse Event: DetailsCollapse

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.DetailsCollapse("detailsCollapse");}))
Script:
<script>
function detailsCollapse(){}
</script> 		Not Applicable
Triggers when detail template row is initialized Event: DetailsDataBound

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.DetailsDataBound("detailsDataBound");}))
Script:
<script>
function detailsDataBound(){}
</script> 		Not Applicable
Triggers when detail template
row is clicked to expand		 Event: DetailsExpand

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.DetailsExpand("detailsExpand");}))
Script:
<script>
function detailsExpand(){}
</script> 		Event: DetailDataBound

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.DetailDataBound("detailDataBound")
.Render()
Script:
<script>
function detailDataBound(){}
</script>
Triggers when refresh the template column elements in the Grid Event: TemplateRefresh

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.TemplateRefresh("templateRefresh");}))
Script:
<script>
function templateRefresh(){}
</script> 		Not Applicable

Row/Column Drag and Drop

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: AllowRowDragAndDrop

@(Html.EJ().Grid<object>("Grid")
 .AllowRowDragAndDrop()
.RowDropSettings(drop =>
drop.RowDropMapper("RowDropHandler")
.DropTargetID("#DestGrid"))
.Columns(col =>{
 col.Field("OrderID").Add();
})
) 		Property: AllowRowDragAndDrop

@Html.EJS().Grid("Grid")
 .AllowRowDragAndDrop(true)
.RowDropSettings(new Syncfusion.EJ2.Grids.GridRowDropSettings() { TargetID = "RowDragDrop" })
.Columns(col =>{
  col.Field("OrderID").Add();
}).Render()
Triggers when the row is
being dragged		 Event: RowDrag

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.RowDrag("rowDrag");}))
Script:
<script>
function rowDrag(){}
</script> 		Event: RowDrag

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.RowDrag("rowDrag")
.Render()
Script:
<script>
function rowDrag(){}
</script>
Triggers when the row drag begins Event: RowDragStart

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.RowDragStart("rowDragStart");}))
Script:
<script>
function rowDragStart(){}
</script> 		Event: RowDragStart

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.RowDragStart("rowDragStart")
.Render()
Script:
<script>
function rowDragStart(){}
</script>
Triggers when the row is dropped Event: RowDrop

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.RowDrop("rowDrop");}))
Script:
<script>
function rowDrop(){}
</script> 		Event: RowDrop

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.RowDrop("rowDrop")
.Render()
Script:
<script>
function rowDrop(){}
</script>
Triggers before the row is being dropped Event: BeforeRowDrop

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.BeforeRowDrop("beforeRowDrop");}))
Script:
<script>
function beforeRowDrop(){}
</script> 		Not Applicable
Triggers when the
column is being dragged		 Event: columnDrag

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.ColumnDrag("columnDrag");}))
Script:
<script>
function columnDrag(){}
</script> 		Not Applicable
Triggers when the
column drag begins		 Event: columnDragStart

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.columnDragStart("columnDragStart");}))
Script:
<script>
function columnDragStart(){}
</script> 		Not Applicable
Triggers when the
column is dropped		 Event: ColumnDrop

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.ColumnDrop("columnDrop");}))
Script:
<script>
function columnDrop(){}
</script> 		Not Applicable

Frozen Rows and Columns

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: ScrollSettings.FrozenRows

@(Html.EJ().Grid<object>("Grid")
 .AllowScrolling()
.ScrollSettings(scroll => { scroll.Height(337)
.Width(700).FrozenRows(2)
.FrozenColumns(2); })
) 		Property: FrozenRows

@Html.EJS().Grid("Grid")
 .FrozenRows(2).FrozenColumns(1)
.Render()
isFrozen Property: Columns.IsFrozen

@(Html.EJ().Grid<object>("Grid")
 .Columns(col =>{
 col.Field("OrderID").
IsFrozen(true).Add();
})
) 		Property: Columns.IsFrozen

@Html.EJS().Grid("Grid")
 .Columns(col =>{
  col.Field("OrderID").IsFrozen(true).Add();
}).Render()

ForeignKey

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: Columns.ForeignKeyValue

@(Html.EJ().Grid<object>("Grid")
.Columns(col =>{
 col.Field("OrderID").Add();
 col.Field("EmployeeID")
.ForeignKeyField("EmployeeID")
.ForeignKeyValue("FirstName")
.DataSource((IEnumerable<object>)
ViewBag.dataSource2).Add();
})
) 		Property: Columns.ForeignKeyValue

@Html.EJS().Grid("Grid")
 .Columns(col =>{
  col.Field("OrderID").Add();
  col.Field("CustomerID")
.ForeignKeyField("CustomerID")
.ForeignKeyValue("ContactName")
.DataSource((IEnumerable<object>)
ViewBag.dataSource2).Add();
}).Render()

Auto Wrap

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: AllowTextWrap

@(Html.EJ().Grid<object>("Grid")
 .AllowTextWrap().Columns(col =>{
 col.Field("OrderID").Add();
})
) 		Property: AllowTextWrap

@Html.EJS().Grid("Grid")
 .AllowTextWrap().Columns(col =>{
  col.Field("OrderID").Add();
}).Render()
Both Property: AllowTextWrap

@(Html.EJ().Grid<object>("Grid")
 .AllowTextWrap()
.TextWrapSettings(wrap => {wrap.WrapMode(WrapMode.Both); })
.Columns(col =>{
 col.Field("OrderID").Add();
})
) 		Property: AllowTextWrap

@Html.EJS().Grid("Grid")
 .AllowTextWrap()
.TextWrapSettings(text => {
text.WrapMode
(Syncfusion.EJ2.Grids.WrapMode.Both);})
.Columns(col =>{
  col.Field("OrderID").Add();
}).Render()
Header Property: AllowTextWrap

@(Html.EJ().Grid<object>("Grid")
 .AllowTextWrap()
.TextWrapSettings(wrap => {wrap.WrapMode(WrapMode.Header); })
.Columns(col =>{
 col.Field("OrderID").Add();
})
) 		Property: AllowTextWrap

@Html.EJS().Grid("Grid")
 .AllowTextWrap()
.TextWrapSettings(text => {
text.WrapMode
(Syncfusion.EJ2.Grids.WrapMode.Header);})
.Columns(col =>{
  col.Field("OrderID").Add();
}).Render()
Content Property: AllowTextWrap

@(Html.EJ().Grid<object>("Grid")
 .AllowTextWrap()
.TextWrapSettings(wrap => {wrap.WrapMode(WrapMode.Content); })
.Columns(col =>{
 col.Field("OrderID").Add();
})
) 		Property: AllowTextWrap

@Html.EJS().Grid("Grid")
 .AllowTextWrap()
.TextWrapSettings(text => {
text.WrapMode
(Syncfusion.EJ2.Grids.WrapMode.Content);})
.Columns(col =>{
  col.Field("OrderID").Add();
}).Render()

Responsive

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: IsResponsive

@(Html.EJ().Grid<object>("Grid")
 .IsResponsive(true)
.EnableResponsiveRow(true)
.Columns(col =>{
 col.Field("OrderID").Add();
})
) 		Not Applicable

State Persistence

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: EnablePersistence

@(Html.EJ().Grid<object>("Grid")
 .EnablePersistence()
.Columns(col =>{
 col.Field("OrderID").Add();
})
) 		Property: EnablePersistence

@Html.EJS().Grid("Grid")
 .EnablePersistence()
.Columns(col =>{
  col.Field("OrderID").Add();
}).Render()

Right to Left - RTL

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: EnableRtl

@(Html.EJ().Grid<object>("Grid")
 .EnableRtl()
.Columns(col =>{
 col.Field("OrderID").Add();
})
) 		Property: EnableRtl

@Html.EJS().Grid("Grid")
 .EnableRtl()
.Columns(col =>{
  col.Field("OrderID").Add();
}).Render()

ToolTip

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: ClipMode

@(Html.EJ().Grid<object>("Grid")
 .Columns(col =>{
col.Field("OrderID")
.ClipMode(ClipMode.Clip).Add();
col.Field("CustomerID")
.ClipMode(ClipMode.Ellipsis).Add();
col.Field("ShipCity")
.ClipMode(ClipMode.EllipsisWithTooltip).Add();
})
) 		Property: ClipMode

@Html.EJS().Grid("Grid")
 .EnableRtl()
.Columns(col =>{
col.Field("OrderID")
.ClipMode(Syncfusion.EJ2.Grids
.ClipMode.Clip)
.Add();
col.Field("CustomerID")
.ClipMode(Syncfusion.EJ2.Grids
.ClipMode.Ellipsis)
.Add();
col.Field("ShipCity")
.ClipMode(Syncfusion.EJ2.Grids
.ClipMode.EllipsisWithTooltip)
.Add();
}).Render()

Aggregate/Summary

Behavior API in Essential® JS 1 API in Essential® JS 2
Footer Aggregate Property: ShowSummary

@(Html.EJ().Grid<object>("Grid")
 .ShowSummary()
.SummaryRow(row =>{
row.Title("Sum")
.SummaryColumns(col => {
col.SummaryType(SummaryType.Sum)
.Format("{0:C}")
.DisplayColumn("Freight")
.DataMember("Freight").Add();
}).Add();
) 		Property: Aggregates

@Html.EJS().Grid("Grid")
 .Aggregates(agg=>{
agg.Columns(new List<Syncfusion.EJ2
.Grids.GridAggregateColumn>(){
new Syncfusion.EJ2
.Grids.GridAggregateColumn() {
Field = "Freight", Format = "C2",
Type = "Sum", FooterTemplate = "Sum: ${Sum}" } }).Add();
}).Render()
Caption Aggregate Property: ShowSummary

@(Html.EJ().Grid<object>("Grid")
 .ShowSummary()
.SummaryRow(row =>{
row.ShowTotalSummary(false)
.ShowCaptionSummary(true)
.SummaryColumns(col =>{
col.SummaryType(SummaryType.Average)
.Format("{0:C2}")
.DisplayColumn("Freight")
.DataMember("Freight")
.Prefix("Average").Add();
}).Add();
}) 		Property: Aggregates

@Html.EJS().Grid("Grid")
 .Aggregates(agg=>{
agg.Columns(new List<Syncfusion.EJ2
.Grids.GridAggregateColumn>(){
new Syncfusion.EJ2
.Grids.GridAggregateColumn() {
Field = "Freight", Format = "C2",
Type = "Sum", GroupCaptionTemplate = "Sum: ${Sum}" } }).Add();
}).Render()
Get Summary values Method: getSummaryValues(summaryCol, summaryData)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getSummaryValues(summaryCol, window.gridData);
</script> 		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)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.addIgnoreOnExport
("filterSettings");
</script> 		Not Applicable

Columns

Behavior API in Essential® JS 1 API in Essential® JS 2
Add or Remove Columns Method: columns(columnDetails, [action])()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.columns("OrderID", "remove");
gridObj.columns("CustomerID", "add");
</script> 		Property: columns

Grid is initially rendered with OrderIDand CustomerIdcolumns.
Then if you want to add ShipAddresscolumn, you have to reset the value for columnproperty as gridObj.columns = [{field:"OrderID"}, {field:"CustomerId"}, {field:"ShipAddress"}];Then to remove the CustomerIdcolumn, reset the columnproperty as, gridObj.columns = [{field:"OrderID"}, {field:"ShipAddress"}];
Get Column By Field Method: getColumnByField(fieldName)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getColumnByField("OrderID");
</script> 		Method: getColumnByField(fieldName)

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getColumnByField("OrderID")
</script>
Get Column By HeaderText Method:
getColumnByHeaderText(headerText)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
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)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getColumnByIndex(1);
</script> 		Method: getColumnByIndex(columnIndex)

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getColumnByIndex(1)
</script>
Get Column Fieldnames Method: getColumnFieldNames()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getColumnFieldNames();
</script> 		Method: getColumnFieldNames()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getColumnFieldNames()
</script>
Get Column Index By Field Method:
getColumnIndexByField(fieldName)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getColumnIndexByField("OrderID");
</script> 		Method:
getColumnIndexByField(fieldName)

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getColumnIndexByField("OrderID");
</script>
Get Column Index By headerText Method: getColumnIndexByHeaderText(headerText, [field])

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
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()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.setWidthToColumns();
</script> 		Method:
widthService.setWidthToColumns()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.widthService.setWidthToColumns()
</script>
Get HeaderText By FieldName Method: getHeaderTextByFieldName()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getHeaderTextByFieldName("OrderID");
</script> 		Not Applicable
Get Hidden Columnname Method: getHiddenColumnNames()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getHiddenColumnNames();
</script> 		Not Applicable
Get Visible Columns/Names Method: getVisibleColumnNames()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getVisibleColumnNames();
</script> 		Method: getVisibleColumns()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getVisibleColumns();
</script>
Select Columns Method: selectColumns(fromIndex)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.selectColumns(1,4);
</script> 		Not Applicable
Select Specific Columns based on Index Method:
selectColumns(columnIndex,[toIndex])

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.selectColumns(1,4);
</script> 		Not Applicable

Row

Behavior API in Essential® JS 1 API in Essential® JS 2
EnableRowHover Property: EnableRowHover

@(Html.EJ().Grid<object>("Grid")
 .EnableRowHover()
.Columns(col =>{
 col.Field("OrderID").Add();
})
) 		Property: EnableHover

@Html.EJS().Grid("Grid")
 .EnableHover()
.Columns(col =>{
  col.Field("OrderID").Add();
}).Render()
Get Row Height Method: getRowHeight()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getRowHeight();
</script> 		Method: getRowHeight()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getRowHeight();
</script>
Refresh Row Height Method: rowHeightRefresh()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.rowHeightRefresh();
</script> 		Not Applicable
Get index by Row Element Method: getIndexByRow($tr)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getIndexByRow($(".gridcontent tr").first());
</script> 		Not Applicable
Get Row by its Index Method: getRowByIndex(from, to)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getRowByIndex(3, 6);
</script> 		Method: getRowByIndex(index)

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getRowByIndex(1);
</script>
Get rendered rows Method: getRows()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getRows();
</script> 		Method: getRows()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getRows();
</script>
Triggers while hover the grid row Event: RowHover

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.RowHover("rowHover");}))
Script:
<script>
function rowHover(){}
</script> 		Not Applicable

Show/Hide Columns

Behavior API in Essential® JS 1 API in Essential® JS 2
Hide Columns by using method Method: hideColumns(headerText)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.hideColumns("Order ID");
</script> 		Method: hideColumns(headerText)

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.hideColumns("Order ID");
</script>
Show Columns by using method Method: showColumns(headerText)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.showColumns("Order ID");
</script> 		Method: showColumns(headerText)

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.showColumns("Order ID");
</script>

Column Chooser

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: ShowColumnChooser

@(Html.EJ().Grid<object>("Grid")
.ShowColumnChooser()
 .Columns(col =>{
 col.Field("OrderID")
.ShowInColumnChooser(false).Add();
col.Field("Freight").Add();
})
) 		Property: ShowColumnChooser

@Html.EJS().Grid("Grid")
 .ShowColumnChooser()
.Columns(col =>{
  col.Field("OrderID")
.ShowInColumnChooser(false)
.Add();
col.Field("City").Add();
}).Render()
Behavior API in Essential® JS 1 API in Essential® JS 2
Refresh Header Method: refreshHeader()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.refreshHeader();
</script> 		Method: refreshHeader()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
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

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.MergeHeaderCellInfo("mergeHeaderCellInfo");}))
Script:
<script>
function mergeHeaderCellInfo(){}
</script> 		Not Applicable
Triggers every time a request is made to access particular cell information, element and data Event: MergeCellInfo

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.MergeCellInfo("mergeCellInfo");}))
Script:
<script>
function mergeCellInfo(){}
</script> 		Not Applicable

DataSource

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])

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.dataSource(newdataSource);
</script> 		Property: dataSource

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.datasource = newdataSource
</script>

Print

Behavior API in Essential® JS 1 API in Essential® JS 2
Print the grid Method: print()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.print();
</script> 		Method: print()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.print();
</script>
Triggers before printing the grid Event: BeforePrint

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.BeforePrint("beforePrint");}))
Script:
<script>
function beforePrint(){}
</script> 		Event: BeforePrint

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.BeforePrint("beforePrint")
.Render()
Script:
<script>
function beforePrint(){}
</script>

Scrolling

Behavior API in Essential® JS 1 API in Essential® JS 2
Get ScrollObject Method: getScrollObject()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getScrollObject();
</script> 		Property: grid.scrollModule

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
var scrollObj = gridObj.scrollModule;
</script>

PrimaryKey

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: Columns.IsPrimaryKey

@(Html.EJ().Grid<object>("Grid")
 .Columns(col =>{
 col.Field("OrderID")
.IsPrimaryKey(true).Add();
col.Field("Freight").Add();
})
) 		Property: Columns.IsPrimaryKey

@Html.EJS().Grid("Grid")
.Columns(col =>{
  col.Field("OrderID")
.IsPrimaryKey(true)
.Add();
col.Field("City").Add();
}).Render()
Get the PrimaryKey fieldnames Method: getPrimaryKeyFieldNames()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getPrimaryKeyFieldNames();
</script> 		Method:
getPrimaryKeyFieldNames()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getPrimaryKeyFieldNames();
</script>

Grid

Behavior API in Essential® JS 1 API in Essential® JS 2
Get the Browser Details Method: getBrowserDetails()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getBrowserDetails();
</script> 		In Essential JS 2, it can be
achieved by using Browserclass of ej2-base
Set dimension for the grid Method: setDimension(height, width)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.setDimension(300,400);
</script> 		Not Applicable
set maximum width for mobile Method: setPhoneModeMaxWidth(value)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.setPhoneModeMaxWidth(500);
</script> 		Not Applicable
Render the grid Method: render()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.render();
</script> 		Method: render()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
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()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.resetModelCollections();
</script> 		Not Applicable
Destroy the grid Method: destroy()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.destroy();
</script> 		Method: destroy()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.destroy()
</script>
Get Content Element Method: getContent()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getContent();
</script> 		Method: getContent()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getContent();
</script>
Get Content Table Method: getContentTable()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getContentTable();
</script> 		Method: getContentTable()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getContentTable();
</script>
Get Current View Data Method: getCurrentViewData()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getCurrentViewData();
</script> 		Method: getCurrentViewRecords()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getCurrentViewRecords();
</script>
Get Data Row Method: getDataByIndex(rowIndex)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getDataByIndex(0);
</script> 		Method: getDataRows()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getDataRows();
</script>
Get Fieldname by using the headertext Method:
getFieldNameByHeaderText(headerText)

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getFieldNameByHeaderText
("Order ID");
</script> 		Not Applicable
Get FooterContent Method: getFooterContent()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getFooterContent();
</script> 		Method: getFooterContent()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getFooterContent();
</script>
Get FooterContent Table Method: getFooterTable()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getFooterTable();
</script> 		Method: getFooterContentTable()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getFooterContentTable();
</script>
Get HeaderContent Method: getHeaderContent()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getHeaderContent();
</script> 		Method: getHeaderContent()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getHeaderContent();
</script>
Get HeaderContent Table Method: getHeaderTable()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.getHeaderTable();
</script> 		Method: getHeaderTable()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.getHeaderTable();
</script>
Refresh Content Method: refreshContent()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
Script:
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.refreshContent();
</script> 		Method:
contentModule.refreshContentRows()

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Render()
Script:
<script>
var gridObj = document.getElementById
('Grid').ej2_instances[0];
gridObj.
contentModule.refreshContentRows();
</script>
Refresh Data Method: refreshData()

@(Html.EJ().Grid<object>
("Grid").Datasource
((IEnumerable<object>)
ViewBag.dataSource))
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

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.QueryCellInfo("queryCellInfo");}))
Script:
<script>
function queryCellInfo(){}
</script> 		Event: QueryCellInfo

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.QueryCellInfo("queryCellInfo")
.Render()
Script:
<script>
function queryCellInfo(){}
</script>
Triggers every time a request is
made to access row information,
element and data		 Event: RowDataBound

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.RowDataBound("rowDataBound");}))
Script:
<script>
function rowDataBound(){}
</script> 		Event: RowDataBound

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.RowDataBound("rowDataBound")
.Render()
Script:
<script>
function rowDataBound(){}
</script>
Triggers for every grid
action before it get started		 Event: ActionBegin

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.ActionBegin("actionBegin");}))
Script:
<script>
function actionBegin(){}
</script> 		Event: ActionBegin

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.ActionBegin("actionBegin")
.Render()
Script:
<script>
function actionBegin(){}
</script>
Triggers for every grid
action success event		 Event: ActionComplete

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.ActionComplete("actionComplete");}))
Script:
<script>
function actionComplete(){}
</script> 		Event: ActionComplete

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.ActionComplete("actionComplete")
.Render()
Script:
<script>
function actionComplete(){}
</script>
Triggers for every grid
server failure event		 Event: ActionFailure

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.ActionFailure("actionFailure");}))
Script:
<script>
function actionFailure(){}
</script> 		Event: ActionFailure

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.ActionFailure("actionFailure")
.Render()
Script:
<script>
function actionFailure(){}
</script>
Triggers when the grid is bound
with data during rendering		 Event: DataBound

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.DataBound("dataBound");}))
Script:
<script>
function dataBound(){}
</script> 		Event: DataBound

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.DataBound("dataBound")
.Render()
Script:
<script>
function dataBound(){}
</script>
Triggers when the grid is
going to destroy		 Event: Destroy

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.Destroy("destroy");}))
Script:
<script>
function destroy(){}
</script> 		Event: Destroyed

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Destroyed("destroyed")
.Render()
Script:
<script>
function destroyed(){}
</script>
Triggers when initial load of the grid Event: Load

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.Load("load");}))
Script:
<script>
function load(){}
</script> 		Event: Load

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Load("load")
.Render()
Script:
<script>
function load(){}
</script>
Triggers when the grid is rendered completely Event: Create

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.Create("create");}))
Script:
<script>
function create(){}
</script> 		Event: Created

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.Created("created")
.Render()
Script:
<script>
function created(){}
</script>
Triggers when the record is clicked Event: RecordClick

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.RecordClick("recordClick");}))
Script:
<script>
function recordClick(){}
</script> 		Not Applicable
Triggers when right clicked on grid element Event: RightClick

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.RightClick("rightClick");}))
Script:
<script>
function rightClick(){}
</script> 		Not Applicable
Triggers when the
record is double clicked		 Event: RecordDoubleClick

@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)
ViewBag.dataSource)
.ClientSideEvents(eve =>{
eve.RecordDoubleClick
("recordDoubleClick");}))
Script:
<script>
function recordDoubleClick(){}
</script> 		Event: RecordDoubleClick

@Html.EJS().Grid("Grid")
.DataSource((IEnumerable<object>)
ViewBag.dataSource)
.RecordDoubleClick
("recordDoubleClick")
.Render()
Script:
<script>
function recordDoubleClick(){}
</script>