Articles in this section
Category / Section

How to filter Xamarin.Forms TreeView (SfTreeView)?

1 min read

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)
Please sign in to leave a comment
Access denied
Access denied