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
for multi-row selection. To select multiple rows or cells, tap the popup
and then tap the desired rows or cells.
NOTE
Multi-selection requires the selection
Type
to beMultiple
.
The following screenshot represents a grid touch selection in the device.