MVVM ObservableCollection inside a ObservableCollection (ViewModel)

Question

I am just wondering how I can have a sub collection of a parent collection?

For example,

I already have a ObservableCollection of Products, which is adding and hen binding to the XAML correctly. However, now I need to have another ObservableCollection which contains product items.

Basically I am thinking in the view model of having something like

 ProductCollection[0].ProductItemCollection.Add(newProductitem);

How would I go about this in MVVM?

Thanks

Chris

Answer 1

Not sure if that's what you are looking for but...

Let's say you have two grids in your xaml. The first shows your porducts, the second the selected product's items.

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow"
    Height="350"
    Width="525">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="173*" />
        <RowDefinition Height="147*" />
    </Grid.RowDefinitions>

    <DataGrid ItemsSource="{Binding ProductsCollection}"
              SelectedItem="{Binding SelectedProduct}"
              Margin="10">
    </DataGrid>

    <DataGrid ItemsSource="{Binding ProductItemsCollection}"
              Margin="10"
              Grid.Row="1">
    </DataGrid>

</Grid>

You have the classes declared

public class Product
{
    public Product()
    {
        ItemsCollection = new ObservableCollection<Item>();
    }
    public int ID { get; set; }
    public string Name { get; set; }
    public ObservableCollection<Item> ItemsCollection { get; set; }
}

public class Item
{
    public int ID { get; set; }
    public DateTime Date { get; set; }
}

Selecting a product from the first grid will update the second grid's itemsource in the VM like below

    private ObservableCollection<Product> _ProductsCollection = new ObservableCollection<Product>();
    public ObservableCollection<Product> ProductsCollection
    {
        get{return _ProductsCollection;}
        set
        {
            _ProductsCollection = value;
            OnPropertyChanged("ProductsCollection");
        }
    }

    private ObservableCollection<Item> _ProductItemsCollection;
    public ObservableCollection<Item> ProductItemsCollection
    {
        get {return _ProductItemsCollection; }
        set
        {
            _ProductItemsCollection = value;
            OnPropertyChanged("ProductItemsCollection");
        }
    }

    private Product _SelectedProduct = null;
    public Product SelectedProduct
    {
        get {return _SelectedProduct;}
        set
        {
            _SelectedProduct = value;
            ProductItemsCollection = _SelectedProduct.ItemsCollection;
            OnPropertyChanged("SelectedProduct");
        }
    }

Finally you add some sample data

    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = this;

        Product product1 = new Product() { ID = 1, Name = "Product1" };
        product1.ItemsCollection.Add(new Item() { ID = 1, Date = DateTime.Now});
        product1.ItemsCollection.Add(new Item() { ID = 2, Date = DateTime.Now.AddDays(-1) });

        Product product2 = new Product() { ID = 2, Name = "Product2" };
        product2.ItemsCollection.Add(new Item() { ID = 3, Date = DateTime.Now });
        product2.ItemsCollection.Add(new Item() { ID = 4, Date = DateTime.Now.AddDays(-2) });

        ProductsCollection.Add(product1);
        ProductsCollection.Add(product2);
    }