The TreeView control displays a hierarchical list of items. Each tree view node can have a number of child nodes, which are indented below the parent node. Child nodes are displayed when their parent node is expanded and hidden when the node is collapsed.

The TreeView class provides the ExpandOnClick property to expand a single node (parent or child), when you click on any node. The ExpandOnClick method accepts a Boolean value to determine whether the child nodes within a particular node should be expanded or not. Once you set this property to true, it allows you to expand all the child nodes with a mouse click.

In addition, the TreeView class also provides ExpandOnLoad property that determines whether to toggle checkboxes when the user clicks the node header. This property accepts Boolean value and by default, it is set to false.

The TreeView control provides AutoCollapse property, which automatically closes the sibling nodes of the currently selected parent node. This happens when you click on any other parent node within the same TreeView.

This example uses the ExpandOnClick and the AutoCollapse method to perform expand and collapse operation on nodes. The below example code uses Property model added in the QuickStart section.

@using <ApplicationName.Models>
@model Property[]
        
<c1-tree-view display-member-path="Header" child-items-path="Items"
    source="Model"
    auto-collapse="true"
    expand-on-click="true"></c1-tree-view>