Cell Selection in ASP.NET CORE Tree Grid Component

21 Dec 20221 minute to read

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

NOTE

Cell selection requires the mode to be Cell or Both, and type should be Multiple.
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.