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:
<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();
}
The treegrid supports three types of selection mode that can be set by using
mode
property of e-treegrid-selectionsettings
. They are:
<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 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:
<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, andtype
should be Multiple.
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.
<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 thepersistSelection
property. For persisting selection on the treegrid, any one of the columns should be defined as a primary key using theisPrimaryKey
property ofe-treegrid-column
tag helper .
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;
<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>
The Toggle selection allows to perform selection and unselection of the particular row or cell. To enable toggle selection, set enableToggle
property of the selectionSettings as true. If you click on the selected row or cell then it will be unselected and vice versa.
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" allowPaging="true" allowSelection="true" childMapping="Children" treeColumnIndex="1">
<e-treegrid-selectionsettings enableToggle="true" type="Multiple"></e-treegrid-selectionsettings>
<e-treegrid-columns>
<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();
}
If multi selection is enabled, then first click on any selected row (without pressing Ctrl key), it will clear the multi selection and in second click on the same row, it will be unselected.