ASP.NET Core
Demos
Support
Forum
Download
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 TreeGrid, set the allowSelection to false.

The treegrid supports two types of selection that can be set by using the type property of [e-treegrid-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.
  • 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-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" allowPaging="true" allowSelection="true" childMapping="Children" treeColumnIndex="1">
    <e-treegrid-selectionsettings type="Multiple"></e-treegrid-selectionsettings>
    <e-treegrid-columns>
        <e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="100"></e-treegrid-column>
        <e-treegrid-column field="TaskName" headerText="Task Name" width="190"></e-treegrid-column>
        <e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right" format="yMd" type="date" width="120"></e-treegrid-column>
        <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="110"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>
public ActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

Selection mode

The treegrid supports three types of selection mode that can be set by using mode property of e-treegrid-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.
tagHelper
selection-mode.cs
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" allowPaging="true" allowSelection="true" childMapping="Children" treeColumnIndex="1">
    <e-treegrid-selectionsettings mode="Both"></e-treegrid-selectionsettings>
    <e-treegrid-columns>
        <e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="100"></e-treegrid-column>
        <e-treegrid-column field="TaskName" headerText="Task Name" width="190"></e-treegrid-column>
        <e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right" format="yMd" type="date" width="120"></e-treegrid-column>
        <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="110"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>
public ActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

Cell selection

Cell selection can be done through simple mouse down or arrow keys (up, down, left, and right).

The treegrid supports two types of cell selection mode that can be set by using the 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-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" allowPaging="true" allowSelection="true" childMapping="Children" treeColumnIndex="1">
    <e-treegrid-selectionsettings cellSelectionMode="Box" mode="Cell" type="Multiple"></e-treegrid-selectionsettings>
    <e-treegrid-columns>
        <e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="100"></e-treegrid-column>
        <e-treegrid-column field="TaskName" headerText="Task Name" width="190"></e-treegrid-column>
        <e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right" format="yMd" type="date" width="120"></e-treegrid-column>
        <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="110"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

Cell selection requires the mode to be Cell or Both, and type should be Multiple.

Checkbox selection

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

To render the checkbox in each treegrid row, you need to use checkbox column with type as checkbox using the column type property of e-treegrid-column tag helper.

tagHelper
checkbox.cs
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" allowPaging="true" allowSelection="true" childMapping="Children" treeColumnIndex="2">
    <e-treegrid-selectionsettings type="Multiple"></e-treegrid-selectionsettings>
    <e-treegrid-columns>
        <e-treegrid-column type="checkbox" width="50"></e-treegrid-column>
        <e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="100"></e-treegrid-column>
        <e-treegrid-column field="TaskName" headerText="Task Name" width="190"></e-treegrid-column>
        <e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right" format="yMd" type="date" width="120"></e-treegrid-column>
        <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="110"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

By default, selection is allowed by clicking a treegrid row or checkbox in that row. To allow selection only through checkbox, you can set the checkboxOnly property to true. Selection can be persisted in all the operations using the persistSelection property. For persisting selection on the treegrid, any one of the columns should be defined as a primary key using the isPrimaryKey property of e-treegrid-column tag helper .

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, 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
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" allowPaging="true" allowSelection="true" childMapping="Children" treeColumnIndex="1">
    <e-treegrid-selectionsettings checkboxMode="ResetOnRowClick" type="Multiple"></e-treegrid-selectionsettings>
    <e-treegrid-columns>
        <e-treegrid-column type="checkbox" width="50"></e-treegrid-column>
        <e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="100"></e-treegrid-column>
        <e-treegrid-column field="TaskName" headerText="Task Name" width="190"></e-treegrid-column>
        <e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right" format="yMd" type="date" width="120"></e-treegrid-column>
        <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="110"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>
Previous
Next