How to filter the nodes or items in .NET MAUI TreeView (SfTreeView)?

In .NET MAUI TreeView, you can filter the TreeView nodes based on the search text in SfTreeView by changing the collection.

XAML

Use SearchBar to search the TreeViewNodes.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:syncfusion="clr-namespace:Syncfusion.Maui.TreeView;assembly=Syncfusion.Maui.TreeView">
            
   <Grid RowDefinitions="50,*">
       <SearchBar x:Name="searchBar" 
                  Placeholder="Search TreeView"/>
       <syncfusion:SfTreeView x:Name="treeView" 
                              ChildPropertyName="SubFiles" 
                              Grid.Row="1" 
                              ItemTemplateContextType="Node"
                              NotificationSubscriptionMode="CollectionChange"
                              AutoExpandMode="AllNodesExpanded"
                              ItemsSource="{Binding ImageNodeInfo}">
           <syncfusion:SfTreeView.ItemTemplate>
               <DataTemplate>
                   <Grid x:Name="grid" RowSpacing="0" >
                       <Grid.ColumnDefinitions>
                           <ColumnDefinition Width="40" />
                           <ColumnDefinition Width="*" />
                       </Grid.ColumnDefinitions>
                       <Image Source="{Binding Content.ImageIcon}"
                              VerticalOptions="Center" 
                              HorizontalOptions="Center" 
                              HeightRequest="35" 
                              WidthRequest="35"/>
                       <Grid Grid.Column="1"
                             RowSpacing="1" 
                             Padding="1,0,0,0" 
                             VerticalOptions="Center">
                           <Label LineBreakMode="NoWrap" 
                                  Text="{Binding Content.ItemName}" 
                                  VerticalTextAlignment="Center"/>
                       </Grid>
                   </Grid>
               </DataTemplate>
           </syncfusion:SfTreeView.ItemTemplate>
       </syncfusion:SfTreeView>
   </Grid>
</ContentPage>

C#

TextChanged event of the SerachBar to filter the TreeView collection.

namespace MauiTreeView
{
   public class Behavior : Behavior<ContentPage>
   {
       SearchBar SearchBar;
       List<FileManager> FilteredSource;
       protected override void OnAttachedTo(ContentPage bindable)
       {
           SearchBar = bindable.FindByName<SearchBar>("searchBar");
           SearchBar.TextChanged += SearchBar_TextChanged;
           FilteredSource = new List<FileManager>();
           base.OnAttachedTo(bindable);
       }
   }
}

Compare the search text to the model class property to filter the item. The filtered objects are set to TreeView.ItemsSource.

private void SearchBar_TextChanged(object sender, TextChangedEventArgs e)
{
   if (string.IsNullOrEmpty(e.NewTextValue))
   {
       TreeView.ItemsSource = ViewModel.ImageNodeInfo;
   }
   else
   {
       FilteredSource = ViewModel.ImageNodeInfo.Where(x =>      (x.ItemName.ToLower()).StartsWith(e.NewTextValue.ToLower())).ToList<FileManager>();

       if (FilteredSource.Count == 0)
       {
           foreach (var node in ViewModel.ImageNodeInfo)
               this.GetChildNode(node, e.NewTextValue);
       }
       TreeView.ItemsSource = FilteredSource;
   }
}

private void GetChildNode(FileManager node, string searchText)
{
   if (node.SubFiles.Count < 0) return;

   foreach (var child in node.SubFiles)
   {
       if (child.ItemName.ToLower().StartsWith(searchText.ToLower()))
       {
           FilteredSource.Add(child);
       }
       if (child.SubFiles != null)
       {
           this.GetChildNode(child, searchText);
       }
   }
}

Download the complete sample from GitHub.

Conclusion

I hope you enjoyed learning how to filter the nodes or items in .NET MAUI TreeView.

You can refer to our .NET MAUI TreeView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications.

You can check out our components from the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.

If you have any queries or require clarification, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal.

We are always happy to assist you!