Row Selection in ASP.NET MVC Tree Grid Component

21 Dec 20221 minute to read

Toggle selection

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.

@(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).EnableToggle(true)).TreeColumnIndex(1).Render())
public ActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

NOTE

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.

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.