Checkbox Selection in ASP.NET MVC Grid Component
21 Dec 20223 minutes to read
Checkbox selection provides an option to select multiple grid records with help of checkbox in each row.
To render the checkbox in each grid row, you need to use checkbox column with type as checkbox using the column Type
property.
@Html.EJS().Grid("CheckboxSelection").DataSource((IEnumerable<object>)ViewBag.datasource).Columns(col =>
{
col.Type("checkbox").Width("50").Add();
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
}).AllowPaging().PageSettings(page => page.PageCount(2)).Render()
public IActionResult Index()
{
var orders = InventorDetails.GetAllRecords();
ViewBag.datasource = orders;
return View();
}
NOTE
By default, selection is allowed by clicking a grid row or checkbox in that row. To allow selection only through checkbox, you can set the
CheckboxOnly
property ofSelectionSettings
to true.
Selection can be persisted in all the operations using thePersistSelection
property ofSelectionSettings
. For persisting selection on the grid, any one of the columns should be defined as a primary key using theIsPrimaryKey
property.
Checkbox selection mode
In checkbox selection, selection can also be done by clicking on rows. This selection provides two types of Checkbox Selection mode which can be set by using the following API, checkboxMode
. The modes are;
- Default: This is the default value of the checkboxMode. In this mode, user can select multiple rows by clicking rows one by one.
- ResetOnRowClick: In ResetOnRowClick mode, when user clicks on a row it will reset previously selected row. Also you can perform multiple-selection in this mode by press and hold CTRL key and click the desired rows. To select range of rows, press and hold the SHIFT key and click the rows.
@Html.EJS().Grid("SelectionAPI").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowSelection().Columns(col =>
{
col.Type("checkbox").Width("50").Add();
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.CheckboxMode(Syncfusion.EJ2.Grids.CheckboxSelectionType.ResetOnRowClick).Type(Syncfusion.EJ2.Grids.SelectionType.Multiple)).Render()
public IActionResult Index()
{
var orders = InventorDetails.GetAllRecords();
ViewBag.datasource = orders;
return View();
}
Prevent specific rows from being selected in checkbox selection
You can prevent specific rows from being selected in the checkbox selection mode by hiding the checkboxes using the RowDataBound event. You achieve this by setting the isSelectable
argument as false in the RowDataBound
event based on certain conditions as per the needs of the application.
In the following sample, the selection of specific rows has been prevented based on the isSelectable
argument in the RowDataBound
event.
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
col.Type("checkbox").Width("120").Add();
col.Field("List").HeaderText("List").Width("120").Add();
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("150").Add();
col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
col.Field("EmployeeID").HeaderText("Employee ID").Width("150").Add();
col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
}).SelectionSettings(select => select.PersistSelection(true)).AllowFiltering().FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.CheckBox)).PageSettings(page => { page.PageSize(20); }).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel", "Search" }).RowDataBound("rowDataBound").Render()
<script>
function rowDataBound(args) {
args.isSelectable = args.data.List % 5 === 0;
}
</script>
public IActionResult Index()
{
ViewBag.DataSource = OrderDetails.GetAllRecords();
return View();
}