How to bind an Entity of another Entity

Question

I have two classes, Customer and Order. The entity, VM and xaml codes are below. What I'm trying to achieve is when I select a customer in datagrid on left, I want to see his/her orders on datagrid on the right. I can see the customers on the left datagrid, however I can't see their orders. I'm using Entity framework and MVVMLight. I'd appreciate if anyone can say what I'm missing. Thanks. Here is base class :

  public class BaseEntity : INotifyPropertyChanged
    {

        public virtual int Id { get; set; }

        public event PropertyChangedEventHandler PropertyChanged;

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

Here is Customer class : public class Customer : BaseEntity { private string _name;

    public string Name
    {
        get { return _name; }
        set
        {
            _name = value;
            OnPropertyChanged("Name");
        }
    }

    private ICollection<Order> _orders;

    public ICollection<Order> Orders
    {
        get { return _orders; }
        set
        {
            _orders = value;
            OnPropertyChanged("Orders");
        }
    }

}

Here is Order Class: public class Order : BaseEntity { private string _explanation;

    public string Explanation
    {
        get { return _explanation; }
        set
        {
            _explanation = value;
            OnPropertyChanged("Explanation");
        }
    }


    private Customer _customer;

    public Customer Customer
    {
        get { return _customer; }
        set
        {
            _customer = value;
            OnPropertyChanged("Customer");
        }
    }


}

And in ViewModel I have only Customer VM :

 public class CustomerVM : ViewModelBase
    {

        protected CustomerOrderContext _context;

        protected ObservableCollection<Customer> _entities;

        protected Customer _selectedentity;

        public  ObservableCollection<Customer> Entities
        {
            get { return _entities; }
            set
            {
                _entities = value;
                RaisePropertyChanged(() => this.Entities);
                DisplayEntityInfo();
            }
        }

        public  Customer SelectedEntity
        {
            get { return _selectedentity; }
            set
            {
                _selectedentity = value;
                RaisePropertyChanged(() => this.SelectedEntity);
                DisplayEntityInfo();


            }
        }

        public CustomerVM()
        {
            _context = new CustomerOrderContext();

            Entities = GetEntities();

            SelectedEntity = Entities.FirstOrDefault();
        }

        public ObservableCollection<Customer> GetEntities()
        {
            ObservableCollection<Customer> entities;

            entities = new ObservableCollection<Customer>(_context.Set<Customer>());

            return entities;
        }


    }

And this is my .xaml file :

<Window x:Class="CustomerOrder.App.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:cm="clr-namespace:System.ComponentModel;assembly=System"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:vm="clr-namespace:CustomerOrder.App.ViewModel"
        xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
        mc:Ignorable="d"
        DataContext="{Binding Source={StaticResource Locator}, Path=CustomerView}"
        Title="MainWindow" Height="500" Width="900">
    <Grid>
        <Canvas>
            <DataGrid x:Name="maingrid" ItemsSource="{Binding Entities}" SelectedItem="{Binding SelectedEntity}" AutoGenerateColumns="False" Canvas.Left="10" Canvas.Top="265">
                <DataGrid.Columns>
                    <DataGridTextColumn Binding="{Binding Name}" Header="Name" Width="200"></DataGridTextColumn>
                </DataGrid.Columns>
            </DataGrid>
            <DataGrid x:Name="ordergrid" ItemsSource="{Binding ElementName=maingrid, Path=SelectedItem.Orders}" AutoGenerateColumns="True" CanUserDeleteRows="True" Canvas.Top="265" Canvas.Left="597">
                <DataGrid.Columns>
                    <DataGridTextColumn Binding="{Binding Explanation}" Header="Orders" Width="200"></DataGridTextColumn>
                </DataGrid.Columns>
            </DataGrid>
        </Canvas>

    </Grid>
</Window>

Answer 1

The first DataGrid has SelectedItem bound to 'SelectedEntity'. You should bind the second DataGrid's ItemSource property to the same 'SelectedEntity' property on your ViewModel

<DataGrid x:Name="ordergrid" ItemsSource="{Binding SelectedEntity.Orders}" AutoGenerateColumns="True" CanUserDeleteRows="True" Canvas.Top="265" Canvas.Left="597">