Selection in Grid Control
21 Dec 20223 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
property to false.
The grid supports two types of selection that can be set by using the type
property of e-grid-selectionsettings tag helper. 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.
<ejs-grid id="Grid" dataSource="@ViewBag.datasource" allowSelection="true" allowPaging="true">
<e-grid-selectionsettings type="Multiple"></e-grid-selectionsettings>
<e-grid-pagesettings pageCount="2"></e-grid-pagesettings>
<e-grid-columns>
<e-grid-column field="Inventor" headerText="Inventor Name" width="140"></e-grid-column>
<e-grid-column field="NumberofPatentFamilies" headerText="No of Patent Families" width="185" textAlign="Right"></e-grid-column>
<e-grid-column field="Country" headerText="Country" width="120"></e-grid-column>
<e-grid-column field="Active" headerText="Active" width="130"></e-grid-column>
</e-grid-columns>
</ejs-grid>
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 e-grid-selectionsettings tag helper. 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.
<ejs-grid id="Grid" dataSource="@ViewBag.datasource" allowSelection="true" allowPaging="true">
<e-grid-selectionsettings mode="Both"></e-grid-selectionsettings>
<e-grid-pagesettings pageCount="2"></e-grid-pagesettings>
<e-grid-columns>
<e-grid-column field="Inventor" headerText="Inventor Name" width="140"></e-grid-column>
<e-grid-column field="NumberofPatentFamilies" headerText="No of Patent Families" width="185" textAlign="Right"></e-grid-column>
<e-grid-column field="Country" headerText="Country" width="120"></e-grid-column>
<e-grid-column field="Active" headerText="Active" width="130"></e-grid-column>
</e-grid-columns>
</ejs-grid>
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 be Multiple.
The following screenshot represents a grid touch selection in the device.