Search results

Selection

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 SelectionSettings.Type. They are:

  • Single: The Single value is set by default, and it only allows selection of a single row or a cell.
  • Multiple: Allows you to select multiple rows or cells. To perform the multi-selection, press and hold CTRL key and click the desired rows or cells. To select range of rows or cells, press and hold the SHIFT key and click the rows or cells.
tagHelper
selection.cs
<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 SelectionSettings.Mode. 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.
tagHelper
selection-mode.cs
<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();
        }

Cell selection

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 SelectionSettings.CellSelectionMode. 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.
tagHelper
cell-selection.cs
<ejs-grid id="Grid" dataSource="ViewBag.datasource" allowSelection="true" allowPaging="true">
        <e-grid-selectionsettings cellSelectionMode="Box" mode="Cell" 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 = InventorDetails.GetAllRecords();
            ViewBag.datasource = orders;            
            return View();
        }

Cell selection requires the SelectionSettings.Mode to be Cell or Both, and Type should be Multiple.

Checkbox selection

Checkbox selection provides an option to select multiple grid records with help of checkbox in each row.

To render the checkbox in each grid row, you need to use checkbox column with type as checkbox using the column Type property.

tagHelper
checkbox.cs
<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 type="checkbox" width="50"></e-grid-column>
        <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 = InventorDetails.GetAllRecords();
            ViewBag.datasource = orders;            
            return View();
        }

By default, selection is allowed by clicking a grid row or checkbox in that row. To allow selection only through checkbox, you can set the SelectionSettings.CheckboxOnly property to true. Selection can be persisted in all the operations using the SelectionSettings.PersistSelection property. For persisting selection on the grid, any one of the columns should be defined as a primary key using the Columns.IsPrimaryKey property.

Checkbox selection Mode

In checkbox selection, selection can also be done by clicking on rows. This selection provides two types of Checkbox Selection mode which can be set by using the following API, selectionSettings.checkboxMode. The modes are;

  • Default: This is the default value of the checkboxMode. In this mode, user can select multiple rows by clicking rows one by one.
  • ResetOnRowClick: In ResetOnRowClick mode, when user clicks on a row it will reset previously selected row. Also you can perform multiple-selection in this mode by press and hold CTRL key and click the desired rows. To select range of rows, press and hold the SHIFT key and click the rows.
tagHelper
windows.cs
<ejs-grid id="Grid" dataSource="ViewBag.datasource" allowSelection="true" allowPaging="true">
    <e-grid-selectionsettings checkboxMode="ResetOnRowClick" type="Multiple"></e-grid-selectionsettings>
    <e-grid-pagesettings pageCount="2"></e-grid-pagesettings>
    <e-grid-columns>
        <e-grid-column type="checkbox" width="50"></e-grid-column>
        <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 = InventorDetails.GetAllRecords();
            ViewBag.datasource = orders;            
            return View();
        }

Select row at Initial rendering

To select a row at initial rendering, set the SelectedRowIndex value.

tagHelper
select-row.cs
<ejs-grid id="Grid" dataSource="ViewBag.datasource" allowSelection="true" selectedRowIndex="1" allowPaging="true">
    <e-grid-selectionsettings type="Multiple" 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 = InventorDetails.GetAllRecords();
            ViewBag.datasource = orders;            
            return View();
        }

Get selected row indexes

You can get the selected row indexes by using the getSelectedRowIndexes method.

tagHelper
selected-row-index.cs
<ejs-grid id="Grid" dataSource="ViewBag.datasource" rowSelected="rowSelected" 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>

 <script>
 function rowSelected(args){

var selectedrowindex= grid.getSelectedRowIndexes();  // get the selected row indexes.
    alert(selectedrowindex); // to alert the selected row indexes.
    var selectedrecords = grid.getSelectedRecords();  // get the selected records.

 }
 </script>
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

Multiple Selection based on condition

You can select multiple grid rows based on condition by using the selectRows method.

In the following code, the rows which contains ShipCountry value as Brazil are selected at initial rendering.

tagHelper
conditional-selection.cs
<ejs-grid id="Grid" dataSource="ViewBag.datasource" dataBound="dataBound" 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="OrderID"  headerText="Order ID" textAlign="Right" width="100"></e-grid-column>                
        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column>                
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120" ></e-grid-column>                               
        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>                
    </e-grid-columns>
 </ejs-grid>

 <script>
 function dataBound(args){
        var rowIndexes =[]; 
        var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0];         
        grid.dataSource.forEach((data,index)=>{
		if(data.ShipCountry === "Brazil"){
               rowIndexes.push(index);
           }
		});
        grid.selectionModule.selectRows(rowIndexes);
 }
 </script>
public IActionResult Index()
        {
            var orders=OrderDetails.GetAllRecords();
            ViewBag.datasource = orders;            
            return View();
        }

Simple Multiple Row selection

You can select multiple rows by clicking on rows one by one. This will not deselect the previously selected rows. To deselect the previously selected row, you can click on the selected row. You can enable this behavior by using selectionSettings.enableSimpleMultiRowSelection property.

tagHelper
multiselection.cs
<ejs-grid id="Grid" dataSource="ViewBag.datasource" allowSelection="true" allowPaging="true">
    <e-grid-selectionsettings enableSimpleMultiRowSelection="true" type="Multiple"></e-grid-selectionsettings>
    <e-grid-pagesettings pageCount="2"></e-grid-pagesettings>
    <e-grid-columns>
        <e-grid-column type="checkbox" width="50"></e-grid-column>
        <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 = InventorDetails.GetAllRecords();
            ViewBag.datasource = orders;            
            return View();
        }