Cell Selection
21 Dec 20222 minutes to read
Cell selection can be done through simple mouse down or arrow keys (up, down, left, and right).
The grid supports two types of cell selection mode that can be set by using the CellSelectionMode
property of SelectionSettings
. They are:
- Flow: The Flow value is set by default. The range of cells are selected between the start index and end index that includes in between cells of rows.
- Box: Range of cells are selected from the start and end column indexes that includes in between cells of rows within the range.
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.datasource).AllowSelection().Columns(col =>
{
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().SelectionSettings(select => select.CellSelectionMode(Syncfusion.EJ2.Grids.CellSelectionMode.Flow).Mode(Syncfusion.EJ2.Grids.SelectionMode.Cell).Type(Syncfusion.EJ2.Grids.SelectionType.Multiple)).PageSettings(page => page.PageCount(2)).Render()
public IActionResult Index()
{
var orders = OrderDetails.GetAllRecords();
ViewBag.datasource = orders;
return View();
}
NOTE
Cell selection requires the
Mode
to be Cell or Both, andType
should be Multiple.
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.