Selection in ASP.NET MVC Tree Grid Component

21 Dec 20222 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 in SelectionSettings. 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.

@(Html.EJS().TreeGrid("SelectionAPI").AllowPaging().DataSource((IEnumerable<object>)ViewBag.datasource)
      .AllowSelection().Columns(col =>
      {
        col.Field("TaskId").HeaderText("Task ID").Width(110).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
        col.Field("TaskName").HeaderText("Task Name").Width(210).Add();
        col.Field("StartDate").HeaderText("Start Date").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Width(210).Add();
        col.Field("Duration").HeaderText("Duration").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(190).Add();
      })
      .ChildMapping("Children").SelectionSettings(select => select.Type(Syncfusion.EJ2.Grids.SelectionType.Multiple)).TreeColumnIndex(1).Render())
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 the Mode property of 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.
@(Html.EJS().TreeGrid("SelectionAPI").AllowPaging().DataSource((IEnumerable<object>)ViewBag.datasource)
      .AllowSelection()
      .Columns(col =>
       {
        col.Field("TaskId").HeaderText("Task ID").Width(110).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
        col.Field("TaskName").HeaderText("Task Name").Width(210).Add();
        col.Field("StartDate").HeaderText("Start Date").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Width(210).Add();
        col.Field("Duration").HeaderText("Duration").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(190).Add();
       })
       .ChildMapping("Children").SelectionSettings(select => select.Mode(Syncfusion.EJ2.Grids.SelectionMode.Both)).TreeColumnIndex(1).Render())
public ActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

NOTE

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