Articles in this section
Category / Section

How to filter Xamarin.Forms TreeView (SfTreeView)?

You can filter the TreeView nodes based on the search text in Xamarin.Forms SfTreeView by changing the collection.

XAML

Use SearchBar to search the TreeViewNodes.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TreeViewXamarin"
             xmlns:syncfusion="clr-namespace:Syncfusion.XForms.TreeView;assembly=Syncfusion.SfTreeView.XForms"
             x:Class="TreeViewXamarin.MainPage">
 
    <ContentPage.BindingContext>
        <local:FileManagerViewModel x:Name="viewModel"/>
    </ContentPage.BindingContext>
    <ContentPage.Behaviors>
        <local:Behavior/>
    </ContentPage.Behaviors>
    <StackLayout>
        <SearchBar Placeholder="Search TreeView" x:Name="searchBar"/>
        <syncfusion:SfTreeView x:Name="treeView" ChildPropertyName="SubFiles" ItemTemplateContextType="Node" 
                               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>
    </StackLayout>
</ContentPage>

C#

TextChanged event of the SerachBar to filter the TreeView collection.

namespace TreeViewXamarin
{
    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);
        }
    }
}

View sample in GitHub

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Access denied
Access denied