Bind observable collection model property to dropdown column in grid

Question

I am using the syncfusion grid control but I assume this question of mine is generic?

I have this grid bound to a customer list. These properties (name, email, contact no etc) display Ok inside the grid.

Now I am anticipating that a client can have 1 or more addresses (especially if they are business branches).

So, i also have a dropdown column type withing the grid to show thepotential 1+ addresses.

Trouble is this is not showing anything.

So..

My XAML is:

    <syncfusion:SfDataGrid 
          ItemsSource="{Binding Path=HeartBeat.ConciseCustomer}">
        <syncfusion:SfDataGrid.Columns>
            <syncfusion:GridTextColumn MappingName="Customer.FirstName" HeaderText="First Name" Width="150" />
            <syncfusion:GridTextColumn MappingName="Customer.LastName" HeaderText="Last Name" Width="150" />
            <syncfusion:GridComboBoxColumn MappingName="Address1"  DisplayMemberPath="Address1" ItemsSource="{Binding Addresses}" />
            <syncfusion:GridTextColumn MappingName="Customer.ContactNo1" HeaderText="Contact No" Width="130" />
            <syncfusion:GridTextColumn MappingName="Customer.EmailAddress1" HeaderText="Email Address"  Width="300"/>
        </syncfusion:SfDataGrid.Columns>
    </syncfusion:SfDataGrid>

My VM is...

private ObservableCollection<ConciseCustomer> _conciseCustomer;

public ObservableCollection<ConciseCustomer> ConciseCustomer
{
    get => _conciseCustomer;
    set
    {
        _conciseCustomer = value;
        RaisePropertyChanged("ConciseCustomer");
    }
}

My models are:

public class Address
{
    public Int64 AddressId { get; set; }
    public string AddressRef { get; set; }
    public string Address1 { get; set; }
    public string Address2 { get; set; }
    public string Address3 { get; set; }
    public string Town { get; set; }
    public string PostCode { get; set; }
    public string County { get; set; }
    public string Country { get; set; }
    public string CustomerRef { get; set; }
    public bool Active { get; set; }
    public string AccountRef { get; set; }
    public DateTime? ServerTs { get; set; }
    public string ServerRef { get; set; }
}

public class Customer
{
    public Int64 CustomerId { get; set; }
    public string CustomerRef { get; set; }
    public string CustomerFriendlyRef { get; set; }
    public string Title { get; set; }
    public string FirstName { get; set; }
    public string MiddleName { get; set; }
    public string LastName { get; set; }
    public string ContactNo1 { get; set; }
    public string ContactNo2 { get; set; }
    public string ContactNo3 { get; set; }
    public string EmailAddress1 { get; set; }
    public string EmailAddress2 { get; set; }
    public DateTime Doe { get; set; }
    public bool Active { get; set; }
    public string AccountRef { get; set; }
    public DateTime? ServerTs { get; set; }
    public string ServerRef { get; set; }
}

VM:

public class ConciseCustomer : VMS
{
    private Customer _customer;
    private ObservableCollection< Address> _addresses;

    public Customer Customer
    {
        get => _customer;
        set
        {
            _customer = value;
            RaisePropertyChanged("Customer");
        }
    }

    public ObservableCollection<Address> Addresses
    {
        get => _addresses;
        set
        {
            _addresses = value;
            RaisePropertyChanged("Addresses");
        }
    }

}

public class ApplicationViewModel : VMS
{
    public ApplicationViewModel()
    {
        HeartBeat = new HeartBeat
        {
            BookingWizard = new BookingWizard(),
            LookUps = new LookUps()
        };
    }
    private HeartBeat _heartBeat;

    public HeartBeat HeartBeat
    {
        get => _heartBeat;
        set
        {
            _heartBeat = value;
            RaisePropertyChanged("HeartBeat");
        }
    }
}

The error in the output window is?

System.Windows.Data Error: 40 : BindingExpression path error: 'Addresses' property not found on 'object' ''ApplicationViewModel' (HashCode=59362130)'. BindingExpression:Path=Addresses; DataItem='ApplicationViewModel' (HashCode=59362130); target element is 'GridComboBoxColumn' (HashCode=54875957); target property is 'ItemsSource' (type 'IEnumerable')

Whilst I understand the error I do not know to 'fix' it. How do I get the 'sub' itemsource to 'relate' to the parent itemsource?

Answer 1

You could try to replace the GridComboBoxColumn with a GridTemplateColumn:

<syncfusion:GridTemplateColumn MappingName="Address1" 
                               syncfusion:FocusManagerHelper.WantsKeyInput="True">
    <syncfusion:GridTemplateColumn.CellTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Address1}" />
        </DataTemplate>
    </syncfusion:GridTemplateColumn.CellTemplate>
    <syncfusion:GridTemplateColumn.EditTemplate>
        <DataTemplate>
            <ComboBox SelectedItem="{Binding Address1}"  
                      ItemsSource="{Binding Addresses}"
                      DisplayMemberPath="Address1" />
        </DataTemplate>
    </syncfusion:GridTemplateColumn.EditTemplate>
</syncfusion:GridTemplateColumn>

But it is still unclear from from data model how you are supposed to connect an Address to a Customer.