# Selection

By default, selection in the TreeList is disabled.

> To boost the performance of the TreeList when it loads a large dataset and the selection functionality is enabled, use paging and a reasonable page size.

The TreeList exposes different modes of row selection:

* [Row Selection](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/treelist/selection#row-selection)
* [Cell Selection](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/treelist/selection#cell-selection)
* [Row Checkbox Selection](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/treelist/selection#single-row-checkbox-selection)

## Row Selection

To enable the selection functionality of the TreeList, set the `Selectable` option to `true`. As a result, the default single-row selection functionality will be applied.

```Razor HtmlHelper
    .Selectable(true)
```

To enable the multiple row selection, set the `Mode` option of the `Selectable` configuration to the `enum` value `Multiple`:

```Razor HtmlHelper
     .Selectable(s => s.Mode(TreeListSelectionMode.Multiple))
```

> As of the 2022 R3 release, the [`Change`](https://docs.telerik.com/aspnet-mvc/api/kendo.mvc.ui.fluent/treelisteventbuilder#changesystemstring) event will now be fired only when Selection/Deselection is performed.

## Cell Selection

The TreeList component allows you to select a single or multiple cells at a time through the `Selectable()` and `Type()` methods.

```Razor HtmlHelper
     .Selectable(s => s.Mode(TreeListSelectionMode.Multiple).Type(TreeListSelectionType.Cell))
```

## Single Row Checkbox Selection

To enable checkbox selection, add a column to the `columns` collection of the TreeList and set the `Selectable` option to `true`:

```Razor HtmlHelper
    columns.Add().Selectable(true);
```

> The TreeList does not support the simultaneous usage of the built-in checkbox-column selection and the selection which is enabled through the `Selectable` option.

To get the currently selected items, you can use the [TreeList client-side API](https://docs.telerik.com/kendo-ui/api/ui/treelist#methods). The following example demonstrates how to access and store the data items of the selected TreeList items.

1. Call the [`select()` client-side API method](https://docs.telerik.com/kendo-ui/api/ui/treelist/methods/select).  The method will return an array with the elements of the selected items.
2. Loop through the selected items and call the [dataItem()](https://docs.telerik.com/kendo-ui/api/ui/treelist/methods/dataitem) method for each element to access the data item.

```JS script
    var treeListWidget = $("#treeList").data("kendoTreeList"); // Get a reference to the defined TreeList component.
    var selectedItemsElements = treeListWidget.select();
    var selectedDataItems = [];
    $.each(selectedItemsElements, function(){
        let dataItem = treeListWidget.dataItem($(this)); // Access the data item.
        selectedDataItems.push(dataItem); //Store the data item in an array.
    });
    console.log(selectedDataItems);
```

To select or deselect all child items of the currently selected row, enable the `IncludeChildren()` option:

```Razor HtmlHelper
    columns.Add().Selectable(true).IncludeChildren();
```

In some scenarios, the specified TreeList rows must be selected by default. The following example demonstrates how to initially select rows based in the value of a data item property.

```Razor HtmlHelper
    @(Html.Kendo().TreeList<Kendo.Mvc.Examples.Models.TreeList.EmployeeDirectoryModel>()
    .Name("treelist")
    .Columns(columns =>
    {
        columns.Add().Selectable(true);
        columns.Add().Field(e => e.EmployeeId);
    })
    .Events(evt => evt.DataBound("onDataBound"))
    ...
    )

    <script>
        function onDataBound(e) {
            var treeList = e.sender;
            var items = treeList.items();
            for (var i = 0; i < items.length; i++) {
                var dataItem = treeList.dataItem(items[i]);
                if(dataItem.EmployeeId % 2 == 0) {
                    treeList.select($(items[i]));
                }
            }
        }
    </script>
```

## See Also

* [Selection of the TreeList HtmlHelper for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/treelist/checkbox-selection)
* [Server-Side API](https://www.telerik.com/aspnet-mvc/documentation/api/treelist)