Expanding and Collapsing TreeView Items
The RadTreeView control exposes methods and commands that allow you to control the expand/collapse state of its item/all items.
The available methods are:
-
Expand(params object[] itemPath)—Expands the item in hierarchy with the specified path. TheitemPathparameter specifies the path to an item in the hierarchy to expand. The path is a collection if unique identifiers of items. The first element of the path identifies an item at the root level. The second element of the path identifies a child of the root item etc. TheTelerik.Maui.Controls.TreeView.TreeViewDescriptor.IdentityMemberPathproperty has to be used to specify the unique identifier at each level of the hierarchy. -
Collapse(params object[] itemPath)—Collapses the item in hierarchy with the specified path. TheitemPathparameter specifies the path to an item in the hierarchy to collapse. The path is a collection if unique identifiers of items. The first element of the path identifies an item at the root level. The second element of the path identifies a child of the root item etc. TheTelerik.Maui.Controls.TreeView.TreeViewDescriptor.IdentityMemberPathproperty has to be used to specify the unique identifier at each level of the hierarchy. -
ExpandAll()—Expands all items in the source collection. -
CollapseAll()—Collapses all items in the source collection.
The available commands are:
-
ExpandCommand—Gets a command to expand a specific item in the control. The command accepts a parameter specifying the path to the item. The path is a collection if unique identifiers of items. The first element of the path identifies an item at the root level. The second element of the path identifies a child of the root item etc. TheTelerik.Maui.Controls.TreeView.TreeViewDescriptor.IdentityMemberPathproperty has to be used to specify the unique identifier at each level of the hierarchy. -
CollapseCommand—Gets a command to collapse a specific item in the control. The command accepts a parameter specifying the path to the item. The path is a collection if unique identifiers of items. The first element of the path identifies an item at the root level. The second element of the path identifies a child of the root item etc. TheTelerik.Maui.Controls.TreeView.TreeViewDescriptor.IdentityMemberPathproperty has to be used to specify the unique identifier at each level of the hierarchy. -
ExpandAllCommand—Gets a command to expand all items in the control. -
CollapseAllCommand—Gets a command to collapse all items in the control.
On Android and iOS, when tapping on the TreeView item, the item gets expanded. On WinUI and MacCatalyst, the item gets expanded when tapping on the arrow >.
Example: Expanding and Collapsing All TreeView Items
1. Define the TreeView control:
<Grid RowDefinitions="Auto,*"
RowSpacing="10">
<HorizontalStackLayout Spacing="10">
<Button Text="ExpandAll" Clicked="OnExpandAllClicked"/>
<Button Text="CollapseAll" Clicked="OnCollapseAllClicked"/>
</HorizontalStackLayout>
<telerik:RadTreeView x:Name="treeView" Grid.Row="1" ItemsSource="{Binding Items}">
<telerik:TreeViewDescriptor DisplayMemberPath="Name"
ItemsSourcePath="Children"
TargetType="{x:Type local:Item}" />
<telerik:RadTreeView.BindingContext>
<local:ViewModel/>
</telerik:RadTreeView.BindingContext>
</telerik:RadTreeView>
</Grid>
2. Add the ExpandAll method called on a button click:
this.treeView.ExpandAll();
3. Add the CollapseAll method called on a button click:
this.treeView.CollapseAll();
4. Add the data model:
public class Item
{
public Item(string name)
{
this.Name = name;
this.Children = new ObservableCollection<Item>();
}
public string Name { get; set; }
public IList<Item> Children { get; set; }
}
5. Add the ViewModel:
public class ViewModel
{
public ViewModel()
{
Items = new ObservableCollection<Item>();
Items.Add(new Item("My Projects")
{
Children = new List<Item>()
{
new Item("Using latest Telerik .NET MAUI controls")
{
Children = new ObservableCollection<Item>()
{
new Item("TreeView"),
new Item("Calendar"),
new Item("RichTextEditor"),
new Item("PdfViewer"),
new Item("SlideView"),
new Item("Chat"),
}
},
new Item("Blank project")
}
});
Items.Add(new Item("Shared Documents")
{
Children = new List<Item>()
{
new Item("Reports")
{
Children = new List<Item>()
{
new Item("October"),
new Item("November"),
new Item("December")
}
}
}
});
}
public ObservableCollection<Item> Items { get; set; }
}
Here is how the TreeView Expand/Collapse command execution looks:
For a runnable example demonstrating the TreeView Expand and Collapse feature, see the SDKBrowser Demo Application and go to TreeView > Expand and Collapse or TreeView > Commands.