Skip to content

SyncfusionExamples/How-to-apply-filters-in-wpf-treeview-using-collectionview-type-sources

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 

Repository files navigation

How to apply filters in wpf treeview using collectionview type sources?

About the sample

This example describes how to apply filters in wpf treeview using collectionview type sources.

WPF TreeView (SfTreeView) allows to apply filters using ListCollectionView and CollectionView.

It can be achieved by using in Filter property of CollectionView.

 <Window.DataContext>
        <local:FileManagerViewModel/>
    </Window.DataContext>

        <Grid >
            <Grid.RowDefinitions>
                <RowDefinition Height="30"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <!--Filter applied to the SfTreeView based on the text typed in this TextBox.-->
            <TextBox x:Name="TextBox" Width="475" BorderThickness="1" Padding="2,0,2,0" Text="{Binding FilterText, UpdateSourceTrigger=PropertyChanged}" Margin="0,3,0,3" />
            <syncfusion:SfTreeView
            Grid.Row="1"
            Width="475"
            Height="550"
            x:Name="treeView"
            BorderThickness="2"
            BorderBrush="LightGray"
            AutoExpandMode="AllNodes"
            FocusVisualStyle="{x:Null}"
            IsAnimationEnabled="True"
            ItemsSource="{Binding CollectionView}"
            ChildPropertyName="SubFiles">
                <syncfusion:SfTreeView.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <TextBlock VerticalAlignment="Center"
                               Text="{Binding FileName}" />
                        </Grid>
                    </DataTemplate>
                </syncfusion:SfTreeView.ItemTemplate>
                <!--Using the SfTreeView loaded event hooks the OnFilterChanged method.-->
                <behavior:Interaction.Triggers>
                    <behavior:EventTrigger EventName="Loaded">
                        <local:TreeViewFilterTrigger/>
                    </behavior:EventTrigger>
                </behavior:Interaction.Triggers>
            </syncfusion:SfTreeView>
        </Grid>
</Window>
 public class FileManagerViewModel : NotificationObject
    {
        #region Fields

        private ObservableCollection<FileManager> imageNodeInfo;

        public ListCollectionView CollectionView { get; set; }

        public object Item { get; set; }
        #endregion

        #region Constructor

        public FileManagerViewModel()
        {
            GenerateSource();
            CollectionView = new ListCollectionView(ImageNodeInfo);
        }

        #endregion

        #region Filtering
        internal delegate void FilterChanged();
        internal FilterChanged filterChanged;

        private string filterText = string.Empty;

        public string FilterText
        {
            get { return filterText; }
            set
            {
                filterText = value;
                if (filterChanged != null)
                    filterChanged();
                RaisePropertyChanged("FilterText");
            }
        }

        #endregion

        #region Properties

        public ObservableCollection<FileManager> ImageNodeInfo
        {
            get { return imageNodeInfo; }
            set { this.imageNodeInfo = value; }
        }


        #endregion
    }

     /// <summary>
    /// Represents a class that used to trigger filter action for SfTeeView.
    /// </summary>
    public class TreeViewFilterTrigger : TargetedTriggerAction<SfTreeView>
    {
        /// <summary>
        /// Method used to hook the filter method when the SfTreeView is Loaded.
        /// </summary>
        /// <param name="parameter"></param>
        protected override void Invoke(object parameter)
        {
            var viewModel = this.Target.DataContext as FileManagerViewModel;
            viewModel.filterChanged += OnFilterChanged;
        }

        /// <summary>
        /// Method to filter the data.
        /// </summary>
        private void OnFilterChanged()
        {
            var viewModel = this.Target.DataContext as FileManagerViewModel;
            viewModel.CollectionView.Filter = (e) =>
            {
                FileManager file = e as FileManager;
                if ((file.FileName.ToLower()).Contains(viewModel.FilterText.ToLower()))
                    return true;
                if (file.SubFiles != null)
                {
                    foreach (var subFile in file.SubFiles)
                    {
                        if (subFile.FileName.ToLower().Contains(viewModel.FilterText.ToLower()))
                            return true;
                        if (subFile.SubFiles != null)
                            foreach (var sub in subFile.SubFiles)
                                if (sub.FileName.ToLower().Contains(viewModel.FilterText.ToLower()))
                                    return true;
                    }
                }
                return false;
            };
            this.Target.ExpandAll();

        }
    }

Filter in SfTreeView using ListCollectionView

About

This example describes how to apply filters in wpf treeview using collectionview type sources.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages