# TreeView Checkbox Selection

The Checkbox Selection of nodes is an alternative to the [standard selection](https://www.telerik.com/blazor-ui/documentation/components/treeview/selection/overview). It provides a different UX by not adding the background highlight color on the selected node. Instead, a checkbox is rendered to the left of each item in the TreeView and the user utilizes them to select the desired nodes.

The TreeView lets the user select one or more nodes by using checkboxes. You can also pre-select them with your own code.

This article is separated into the following segments:

* [Basics](https://www.telerik.com/blazor-ui/documentation/components/treeview/checkboxes/overview#basics)
* [CheckedItems](https://www.telerik.com/blazor-ui/documentation/components/treeview/checkboxes/overview#checkeditems)
* [CheckChildren](https://www.telerik.com/blazor-ui/documentation/components/treeview/checkboxes/overview#checkchildren)
* [CheckParents](https://www.telerik.com/blazor-ui/documentation/components/treeview/checkboxes/overview#checkparents)
* [CheckOnClick](https://www.telerik.com/blazor-ui/documentation/components/treeview/checkboxes/overview#checkonclick)
* [Checking and Selecting nodes](https://www.telerik.com/blazor-ui/documentation/components/treeview/checkboxes/overview#checking-and-selecting-nodes)

## Basics

To enable the selection of nodes with checkboxes set the `CheckBoxMode` parameter to a member of the `TreeViewCheckBoxMode`:

* `None` - disable the node selection. This is the default setting.

* [`Single`](https://www.telerik.com/blazor-ui/documentation/components/treeview/checkboxes/single) - only one node can be checked at a time.

* [`Multiple`](https://www.telerik.com/blazor-ui/documentation/components/treeview/checkboxes/multiple) - many nodes can be checked simultaneously.

## CheckedItems

You get or set the checked nodes through the `CheckedItems` parameter of the treeview. It takes an `IEnumerable<object>` collection that you need to cast to the actual model type. This is required because you can [bind the treeview](https://www.telerik.com/blazor-ui/documentation/components/treeview/data-binding/overview) to different model types at each level. The selection allows two-way binding (`@bind-CheckedItems`) and one-way binding + [`CheckedItemsChanged`](https://www.telerik.com/blazor-ui/documentation/components/treeview/events#checkeditemschanged) event.

> caption Enable node selection with checkboxes

<demo metaUrl="client/treeview/checkboxes/overview/example-1/" height="550"></demo>

## CheckChildren

Setting the `CheckChildren` boolean parameter to `true` will allow the user to select a parent item using the checkbox and automatically check all of its children.

<demo metaUrl="client/treeview/checkboxes/overview/example-2/" height="550"></demo>

## CheckParents

Setting the `CheckParents` boolean parameter to `true` will have the following behavior depending on the user selection:

* If one or more children are not selected the parent item will be in an indeterminate state.

* If all children are selected the parent item will be selected too.

> caption Enable the CheckParents parameter.

<demo metaUrl="client/treeview/checkboxes/overview/example-3/" height="550"></demo>

## CheckOnClick

You can allow the user to click on the node itself and the TreeView will automatically add it to the `CheckedItems` collections by setting the `CheckOnClick` boolean parameter to `true`.

> caption Enable the CheckOnClick parameter.

<demo metaUrl="client/treeview/checkboxes/overview/example-4/" height="550"></demo>

### Checking and Selecting nodes

You can combine both selection and checking nodes. To keep both collections in sync you can assign the same collection to both `SelectedItems` and `CheckedItems` as demonstrated in the example below.

```RAZOR.skip-repl Single
@* You can couple checking the item and placing it in the selected item list. *@

<TelerikTreeView Data="@FlatData"
                 @bind-ExpandedItems="@ExpandedItems"
                 CheckBoxMode="@TreeViewCheckBoxMode.Single"
                 SelectionMode="@TreeViewSelectionMode.Single"
                 @bind-SelectedItems="@checkedItems"
                 @bind-CheckedItems="@checkedItems">
    <TreeViewBindings>
        <TreeViewBinding IdField="Id" ParentIdField="ParentIdValue" TextField="Text" HasChildrenField="HasChildren" IconField="Icon" />
    </TreeViewBindings>
</TelerikTreeView>

<div>
    Checked item:
    <span>
        @if (checkedItems.Any())
        {
            @((checkedItems.FirstOrDefault() as TreeItem).Text)
        }
    </span>
</div>


@code {

    public IEnumerable<object> checkedItems { get; set; } = new List<object>();

    public class TreeItem
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public int? ParentIdValue { get; set; }
        public bool HasChildren { get; set; }
        public ISvgIcon Icon { get; set; }
    }

    public IEnumerable<TreeItem> FlatData { get; set; }
    public IEnumerable<object> ExpandedItems { get; set; } = new List<TreeItem>();

    protected override void OnInitialized()
    {
        LoadFlatData();

        ExpandedItems = FlatData.Where(x => x.HasChildren == true).ToList();

        var precheckedItem = FlatData.Where(x => x.Id == 3); // provide initial checked item when the page is loaded

        checkedItems = new List<object>(precheckedItem);
    }

    private void LoadFlatData()
    {
        List<TreeItem> items = new List<TreeItem>();

        items.Add(new TreeItem()
        {
            Id = 1,
            Text = "Project",
            ParentIdValue = null,
            HasChildren = true,
            Icon = SvgIcon.Folder
        });

        items.Add(new TreeItem()
        {
            Id = 2,
            Text = "Design",
            ParentIdValue = 1,
            HasChildren = true,
            Icon = SvgIcon.Brush
        });
        items.Add(new TreeItem()
        {
            Id = 3,
            Text = "Implementation",
            ParentIdValue = 1,
            HasChildren = true,
            Icon = SvgIcon.Folder
        });

        items.Add(new TreeItem()
        {
            Id = 4,
            Text = "site.psd",
            ParentIdValue = 2,
            HasChildren = false,
            Icon = SvgIcon.FilePsd
        });
        items.Add(new TreeItem()
        {
            Id = 5,
            Text = "index.js",
            ParentIdValue = 3,
            HasChildren = false,
            Icon = SvgIcon.Js
        });
        items.Add(new TreeItem()
        {
            Id = 6,
            Text = "index.html",
            ParentIdValue = 3,
            HasChildren = false,
            Icon = SvgIcon.Html5
        });
        items.Add(new TreeItem()
        {
            Id = 7,
            Text = "styles.css",
            ParentIdValue = 3,
            HasChildren = false,
            Icon = SvgIcon.Css
        });

        FlatData = items;
    }
}
```

```RAZOR Multiple
@* To select and check multiple items change both modes to Multiple *@

<TelerikTreeView Data="@FlatData"
                 @bind-ExpandedItems="@ExpandedItems"
                 CheckBoxMode="@TreeViewCheckBoxMode.Multiple"
                 SelectionMode="@TreeViewSelectionMode.Multiple"
                 @bind-SelectedItems="@checkedItems"
                 @bind-CheckedItems="@checkedItems">
    <TreeViewBindings>
        <TreeViewBinding IdField="Id" ParentIdField="ParentIdValue" TextField="Text" HasChildrenField="HasChildren" IconField="Icon" />
    </TreeViewBindings>
</TelerikTreeView>

<div>
    Checked items:
        @if (checkedItems.Any())
        {
            <ul>
                @foreach (var item in checkedItems)
                {
                    TreeItem checkedItem = item as TreeItem;
                    <li>
                        @checkedItem.Text
                    </li>

                }
            </ul>
        }
</div>


@code {

    public IEnumerable<object> checkedItems { get; set; } = new List<object>();

    public class TreeItem
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public int? ParentIdValue { get; set; }
        public bool HasChildren { get; set; }
        public ISvgIcon Icon { get; set; }
    }

    public IEnumerable<TreeItem> FlatData { get; set; }
    public IEnumerable<object> ExpandedItems { get; set; } = new List<TreeItem>();

    protected override void OnInitialized()
    {
        LoadFlatData();

        ExpandedItems = FlatData.Where(x => x.HasChildren == true).ToList();

        var precheckedItem = FlatData.Where(x => x.Id == 3); // provide initial checked item when the page is loaded

        checkedItems = new List<object>(precheckedItem);
    }

    private void LoadFlatData()
    {
        List<TreeItem> items = new List<TreeItem>();

        items.Add(new TreeItem()
        {
            Id = 1,
            Text = "Project",
            ParentIdValue = null,
            HasChildren = true,
            Icon = SvgIcon.Folder
        });

        items.Add(new TreeItem()
        {
            Id = 2,
            Text = "Design",
            ParentIdValue = 1,
            HasChildren = true,
            Icon = SvgIcon.Brush
        });
        items.Add(new TreeItem()
        {
            Id = 3,
            Text = "Implementation",
            ParentIdValue = 1,
            HasChildren = true,
            Icon = SvgIcon.Folder
        });

        items.Add(new TreeItem()
        {
            Id = 4,
            Text = "site.psd",
            ParentIdValue = 2,
            HasChildren = false,
            Icon = SvgIcon.FilePsd
        });
        items.Add(new TreeItem()
        {
            Id = 5,
            Text = "index.js",
            ParentIdValue = 3,
            HasChildren = false,
            Icon = SvgIcon.Js
        });
        items.Add(new TreeItem()
        {
            Id = 6,
            Text = "index.html",
            ParentIdValue = 3,
            HasChildren = false,
            Icon = SvgIcon.Html5
        });
        items.Add(new TreeItem()
        {
            Id = 7,
            Text = "styles.css",
            ParentIdValue = 3,
            HasChildren = false,
            Icon = SvgIcon.Css
        });

        FlatData = items;
    }
}
```

## See Also

* [Live Demo: TreeView CheckBoxes](https://demos.telerik.com/blazor-ui/treeview/checkboxes)
* [Single Node](https://www.telerik.com/blazor-ui/documentation/components/treeview/checkboxes/single)
* [Multiple Nodes](https://www.telerik.com/blazor-ui/documentation/components/treeview/checkboxes/multiple)