Selection

7 Dec 20232 minutes to read

Selection provides an option to highlight a row or a cell. It can be done through simple mouse down or arrow keys. To disable selection in the Grid, set the AllowSelection to false.

The grid supports two types of selection that can be set by using the Type property of SelectionSettings. They are:

  • Single: The Single value is set by default, and it only allows selection of a single row or a cell or a column.
  • Multiple: Allows you to select multiple rows or cells or columns. To perform the multi-selection, press and hold CTRL key and click the desired rows or cells or columns. To select range of rows or cells or columns, press and hold the SHIFT key and click the rows or cells or columns.
@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)).PageSettings(page => page.PageCount(2)).Render()
public IActionResult Index()
 {
    var orders = OrderDetails.GetAllRecords();
    ViewBag.datasource = orders;            
    return View();
 }

Selection mode

The grid supports three types of selection mode that can be set by using the Mode property of SelectionSettings. They are:

  • Row: The Row value is set by default, and allows you to select only rows.
  • Cell: Allows you to select only cells.
  • Both: Allows you to select rows and cells at the same time.
@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.Mode(Syncfusion.EJ2.Grids.SelectionMode.Both)).PageSettings(page => page.PageCount(2)).Render()
public IActionResult Index()
 {
    var orders = OrderDetails.GetAllRecords();
    ViewBag.datasource = orders;            
    return View();
 }

Touch interaction

When you tap a grid row on touchscreen device, the tapped row is selected. It also shows a popup
selection
for multi-row selection. To select multiple rows or cells, tap the popup
mselection and then tap the desired rows or cells.

NOTE

Multi-selection requires the selection Type to be Multiple.

The following screenshot represents a grid touch selection in the device.

Touch interaction