Filtering ObservableCollection with ICollectionView

Question

I have ObservableCollection binded to dataGrid and now I want to filter the presented data I see that I need to use ICollectionView but I am not sure how to add ICollectionView with my MVVM pattern.

My code simplified looks following:

public class MainViewModel : ViewModelBase , IBarcodeHandler
{
    public ObservableCollection<TraceDataItem> TraceItemCollectionViewSource { get; set; }
}

My XAML

    <Window xmlns:controls="clr-namespace:Mentor.Valor.vManage.RepairStation.Controls"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            <DataGrid Grid.Row="2" ColumnWidth="*"  ItemsSource="{Binding TraceItemCollectionViewSource , Mode=TwoWay , UpdateSourceTrigger=PropertyChanged}" RowStyle="{StaticResource TraceRowStyle}"  IsReadOnly="True" Name="TraceDataGrid" Margin="5,5,5,5" Padding="5,5,5,5" AutoGenerateColumns="False">
    </Window>

How I can add ICollectionView here in order to apply filtering to the view?

Answer 1

You would need to:

public class MainViewModel : ViewModelBase, IBarcodeHandler
{
    public ICollectionView TraceItemCollectionView
    {
        get { return CollectionViewSource.GetDefaultView(TraceItemCollectionViewSource); }
    }

    public ObservableCollection<TraceDataItem> TraceItemCollectionViewSource { get; set; }
}

then, somewhere in the code (maybe in the constructor) add your filter:

TraceItemCollectionView.Filter = o =>
{
    var item = (TraceDataItem) o;

    //based on item, return true if it should be visible, or false if not

    return true;
};

And, in XAML, you would need to change the binding to TraceItemCollectionView property.

Answer 2

A CollectionView is not always the best solution. you can also filter your collection using some simple LinQ. Take this simple example:

public ObservableCollection<TraceDataItem> FilteredData
{
    get 
    {
        return new ObservableCollection<TraceDataItem>(YourUnfilteredCollection.Where(
            i => MeetsFilterRequirements(i))); 
    }
}

private bool MeetsFilterRequirements(TraceDataItem item)
{
    return item.SomeProperty == someValue || item is SomeType;
}

The beauty of this method is that you can add some complex filtering requirements. One thing to note: whenever any properties in this method are changed, you'd need to call NotifyPropertyChanged("FilteredData") to ensure that the UI will be updated accordingly.

Answer 3

You may invoke the Filter callback from a Command and expose the View property from CollectionViewSource :

public class ViewModel: INotifyPropertyChanged
{
    private CollectionViewSource data = new CollectionViewSource();
    private ObservableCollection<Child> observableChilds = new ObservableCollection<Child>();

    public ViewModel()
    {
        var model = new Model();
        model.ChildList.Add(new Child { Name = "Child 1" });
        model.ChildList.Add(new Child { Name = "Child 2" });
        model.ChildList.Add(new Child { Name = "Child 3" });
        model.ChildList.Add(new Child { Name = "Child 4" });
        //Populate ObservableCollection
        model.ChildList.ToList().ForEach(child => observableChilds.Add(child));

        this.data.Source = observableChilds;
        ApplyFilterCommand = new DelegateCommand(OnApplyFilterCommand);
    }

    public ICollectionView ChildCollection
    {
        get { return data.View; }
    }

    public DelegateCommand ApplyFilterCommand { get; set; }

    private void OnApplyFilterCommand()
    {
        data.View.Filter = new Predicate<object>(x => ((Child)x).Name == "Child 1");
        OnPropertyChanged("ChildCollection");
    }
}

//Sample Model used
public class Model
{
    public Model() 
    {
        ChildList = new HashSet<Child>();
    }

    public ICollection<Child> ChildList { get; set; }
}

public class Child
{
    public string Name { get; set; }
}

//View
<ListBox ItemsSource="{Binding Path = ChildCollection}" >
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Label Content="{Binding Name}"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

<Button Command="{Binding ApplyFilterCommand}"/>