DataGrid Binding a ObservableCollection not reflash with INotifyPropertyChanged

Question

I'm binding a List<Product> to a DataGrid and Binding it properties to DataGridTextColumns and I implemented INotifyPropertyChanged for my ListProduct

When I change any property of Product, it will update in my DataGrid, but when a add or delete any Product, it will not update in DataGrid

My DataGrid

    <DataGrid x:Name="ProductList" AutoGenerateColumns="False" IsReadOnly="True">
        <DataGrid.Columns>
            <DataGridTextColumn Header="Id" Binding="{Binding Id}"/>
            <DataGridTextColumn Header="Code" Binding="{Binding Code}"/>
            <DataGridTextColumn Header="Name" Binding="{Binding Name}"/>
            <DataGridTextColumn Header="Value" Binding="{Binding Value, StringFormat=R\{0:C\}}"/>
        </DataGrid.Columns>
    </DataGrid>

And my code behind

public partial class PageProduct : Page, INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    private ObservableCollection<Pastel> _ListProduct;
    public ObservableCollection<Pastel> ListProduct
    {
        get { return _ListProduct; }
        set
        {
            _ListProduct = value;
            this.OnPropertyChanged("ListProduct");
        }
    }

    public PagePastel()
    {

        InitializeComponent();

        UpdateList();
        ProductList.ItemsSource = ListProduct;   // ProductList is my DataGrid
    }

    private void OnPropertyChanged(string p)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(p));
        }
    }

    private void UpdateList()
    {
        // db is my EntityContext
        ListProduct = new ObservableCollection<Product>(db.Products.ToList());
    }

    private void btDeletar_Click(object sender, RoutedEventArgs e)
    {
        if (ProductList.SelectedItem != null)
        {
            Product product = ProductList.SelectedItem as Product;

            db.Product.Remove(product);
            db.SaveChanges();
            if (SystemMessage.ConfirmDeleteProduct() == MessageBoxResult.No)
                return;

            SystemMessage.ProductDeleteSuccess();
            UpdateList();
        }
        else
            SystemMessage.NoProductSelected();
    }

Where is problem? What can I do for DataGrid update list when I add or delete any register?

---

Solution: https://stackoverflow.com/a/8470177/2209497

Answer 1

The problem is you're overwriting the ObservableCollection that the ListProduct field references and not changing the ProductList.ItemsSource. What that causes is that the ListProduct property will be pointed to a new list while ProductList.ItemsSource will still point to the original.

Just raising the PropertyChanged event on ListProduct won't work beause you're not using a Binding for the ItemsSource property. You've got a couple of options.

1) Change UpdateList to:

private void UpdateList()
{
    // db is my EntityContext
    ListProduct = new ObservableCollection<Product>(db.Products.ToList());
    ProductList.ItemsSource = ListProduct;
}

and

public PagePastel()
{

    InitializeComponent();

    UpdateList();
}

Or what would probably be better, change btDeletar_Click to just remove the selected item from ProductList as in:

private void btDeletar_Click(object sender, RoutedEventArgs e)
{
    if (ProductList.SelectedItem != null)
    {
        Product product = ProductList.SelectedItem as Product;

        db.Product.Remove(product);
        db.SaveChanges();

        // *** Side note, should db.SaveChanges be after this if statement?? ***
        if (SystemMessage.ConfirmDeleteProduct() == MessageBoxResult.No)
            return;

        SystemMessage.ProductDeleteSuccess();
        // Don't call UpdateList just remove the item from the list. 
        // This will raise the CollectionChanged event and the grid will respond accordingly.
        ProductList.Remove(product);
    }
    else
        SystemMessage.NoProductSelected();
}