Selection in ASP.NET CORE Tree Grid Component

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 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.
<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.
<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();
}

NOTE

You can refer to our ASP.NET Core Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET Core Tree Grid example ASP.NET Core Tree Grid example to knows how to present and manipulate data.