Row Selection in ASP.NET MVC Grid Component
21 Dec 20226 minutes to read
Select row at initial rendering
To select a row at initial rendering, set the SelectedRowIndex
value.
@Html.EJS().Grid("SelectionAPI").DataSource((IEnumerable<object>)ViewBag.datasource).AllowSelection().Columns(col =>
{
col.Field("Inventor").HeaderText("Inventor Name").Width("180").Add();
col.Field("NumberofPatentFamilies").HeaderText("No of Patent Families").Width("195").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Country").HeaderText("Country").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Active").HeaderText("Active").Width("130").Add();
}).AllowPaging().SelectedRowIndex(2).SelectionSettings(select => select.Type(Syncfusion.EJ2.Grids.SelectionType.Multiple).Mode(Syncfusion.EJ2.Grids.SelectionMode.Both)).PageSettings(page => page.PageCount(2)).Render()
public IActionResult Index()
{
var orders = InventorDetails.GetAllRecords();
ViewBag.datasource = orders;
return View();
}
Get selected row indexes
You can get the selected row indexes by using the getSelectedRowIndexes
method.
@Html.EJS().Grid("SelectionAPI").DataSource((IEnumerable<object>)ViewBag.datasource).RowSelected("rowSelected").AllowSelection().Columns(col =>
{
col.Field("Inventor").HeaderText("Inventor Name").Width("180").Add();
col.Field("NumberofPatentFamilies").HeaderText("No of Patent Families").Width("195").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Country").HeaderText("Country").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Active").HeaderText("Active").Width("130").Add();
}).AllowPaging().SelectionSettings(select => select.Type(Syncfusion.EJ2.Grids.SelectionType.Multiple)).PageSettings(page => page.PageCount(2)).Render()
<script>
function rowSelected(args) {
var grid = document.getElementById("SelectionAPI").ej2_instances[0];
var selectedrowindex = grid.getSelectedRowIndexes(); // get the selected row indexes.
alert(selectedrowindex); // to alert the selected row indexes.
var selectedrecords = grid.getSelectedRecords(); // get the selected records.
}
</script>
public IActionResult Index()
{
var orders = OrderDetails.GetAllRecords();
ViewBag.datasource = orders;
return View();
}
Simple multiple row selection
You can select multiple rows by clicking on rows one by one. This will not deselect the previously selected rows. To deselect the previously selected row, you can click on the selected row. You can enable this behavior by using EnableSimpleMultiRowSelection
property of SelectionSettings
.
@Html.EJS().Grid("SelectionAPI").DataSource((IEnumerable<object>)ViewBag.datasource).AllowSelection().Columns(col =>
{
col.Field("Inventor").HeaderText("Inventor Name").Width("180").Add();
col.Field("NumberofPatentFamilies").HeaderText("No of Patent Families").Width("195").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Country").HeaderText("Country").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Active").HeaderText("Active").Width("130").Add();
}).AllowPaging().SelectionSettings(select => select.EnableSimpleMultiRowSelection(true).Type(Syncfusion.EJ2.Grids.SelectionType.Multiple)).Render()
public IActionResult Index()
{
var orders = InventorDetails.GetAllRecords();
ViewBag.datasource = orders;
return View();
}
Toggle selection
The Toggle selection allows to perform selection and unselection of the particular row or cell or column. To enable toggle selection, set EnableToggle
property of the SelectionSettings
as true. If you click on the selected row or cell or column then it will be unselected and vice versa.
@Html.EJS().Grid("SelectionAPI").DataSource((IEnumerable<object>)ViewBag.datasource).AllowSelection().Columns(col =>
{
col.Field("Inventor").HeaderText("Inventor Name").Width("180").Add();
col.Field("NumberofPatentFamilies").HeaderText("No of Patent Families").Width("195").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Country").HeaderText("Country").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Active").HeaderText("Active").Width("130").Add();
}).AllowPaging().SelectionSettings(select => select.Type(Syncfusion.EJ2.Grids.SelectionType.Multiple).EnableToggle(true)).PageSettings(page => page.PageCount(2)).Render()
public IActionResult Index()
{
var orders = OrderDetails.GetAllRecords();
ViewBag.datasource = orders;
return View();
}
NOTE
If multi selection is enabled, then first click on any selected row (without pressing Ctrl key), it will clear the multi selection and in second click on the same row, it will be unselected.
Clear selection programmatically
You can clear the Grid selection programmatically by using the clearSelection
method.
In the demo below, we initially selected the third row using SelectedRowIndex. You can clear this selection by calling the clearSelection
method in the button click event.
@Html.EJS().Button("Button").Content("Clear Selection").CssClass("e-flat").Render()
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowSelection().Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").IsPrimaryKey(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
}).AllowPaging().SelectedRowIndex(2).SelectionSettings(select => select.Type(Syncfusion.EJ2.Grids.SelectionType.Multiple)).Render()
<script>
document.getElementById('Button').onclick = () => {
var grid = document.getElementById("Grid").ej2_instances[0];
grid.clearSelection();
}
</script>
public IActionResult Index()
{
var orders = InventorDetails.GetAllRecords();
ViewBag.Datasource = orders;
return View();
}
Get selected records on various pages
Enabling the SelectionSettings.PersistSelection property will persist the selection in all Grid operations.
So the selection will be maintained on every page even after navigating to another page.
You can get the selected records using the getSelectedRecords
method.
@Html.EJS().Button("Button").Content("Clear Selection").CssClass("e-flat").Render()
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowSelection().Columns(col =>
{
col.Type("checkbox").Width("150").Add();
col.Field("OrderID").HeaderText("Order ID").Width("120").IsPrimaryKey(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
}).AllowPaging().PageSettings(page => page.PageCount(2)).SelectionSettings(select => select.Type(Syncfusion.EJ2.Grids.SelectionType.Multiple).PersistSelection(true)).Render()
<script>
document.getElementById('Button').onclick = () => {
var grid = document.getElementById("Grid").ej2_instances[0];
var selectedrecords = grid.getSelectedRecords();
var selectedRecordsCount = selectedrecords.length;
alert(selectedRecordsCount);
}
</script>
public IActionResult Index()
{
var orders = InventorDetails.GetAllRecords();
ViewBag.datasource = orders;
return View();
}