Selection

2 Mar 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 selection for multi-row selection.
To select multiple rows or cells, tap the popupmselection and then tap the desired rows or cells.

Multi-selection requires the selection type to be Multiple.

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

Touch interaction