Checkbox Selection in ASP.NET MVC Tree Grid Component

21 Nov 20233 minutes to read

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.

@(Html.EJS().TreeGrid("CheckboxSelection")
     .AllowPaging()
     .DataSource((IEnumerable<object>)ViewBag.datasource)
     .AllowSelection()
     .Columns(col =>
      {
        col.Type("checkbox").Width("50").Add();
        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").TreeColumnIndex(2).Render())
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

NOTE

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 of SelectionSettings to true.

Selection can be persisted in all the operations using the PersistSelection property of SelectionSettings.

For persisting selection on the treegrid, any one of the columns should be defined as a primary key using the IsPrimaryKey property of Column.

Checkbox selection mode

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 in SelectionSettings. The modes are;

  • Default: This is the default value of the checkboxMode. In this mode, user can select multiple rows by clicking rows one by one.
  • ResetOnRowClick: In ResetOnRowClick mode, when user clicks on a row it will reset previously selected row. Also you can perform multiple-selection in this mode by press and hold CTRL key and click the desired rows. To select range of rows, press and hold the SHIFT key and click the rows.
@(Html.EJS().TreeGrid("CheckboxSelection")
      .AllowPaging()
      .DataSource((IEnumerable<object>)ViewBag.datasource)
      .AllowSelection()
      .Columns(col =>
       {
        col.Type("checkbox").Width("50").Add();
        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.CheckboxMode(Syncfusion.EJ2.Grids.CheckboxSelectionType.ResetOnRowClick))
       .TreeColumnIndex(2).Render())
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

Checkbox Selection feature is intended for row selection only; it is not compatible with cell selection mode.

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.