Expanding and Collapsing TreeView Items
The RadTreeView control exposes methods that allow you to control the state of its items:
-
ExpandAll()—Expands all items in the source collection. -
CollapseAll()—Collapses all items in the source collection.
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 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; }
}
For a runnable example demonstrating the TreeView Expand and Collapse feature, see the SDKBrowser Demo Application and go to TreeView > Expand and Collapse.