Complex property binding to GridTemplateColumn

[Moustafa]

I am not able to get the complex properties to work in my sfDataGrid for a Grid template column. Please see column below.

public class OrderInfo
{
    string name;


    public string Name
    {
        get {  return name; }
        set {  name = value; }
    }


    public OrderInfo(string _Name)
    {
        this.Name = _Name;
    }
}


public class Customer
{
string custname;


    public string CustName
    {
        get {  return custname; }
        set {  custname = value; }
    }


OrderInfo order;


    public OrderInfo Order
    {
        get {  return order; }
        set {  order = value; }
    }


public Customer(string _Name, OrderInfo _Order)
{
this.CustName = _Name;
this.Order = _Order;
}
}


public class ViewModel
{
private ObservableCollection<Customer> _customers;
    public ObservableCollection<Customer> Customers
    {
        get { return _customers; }
        set { _customers = value; }
    }


private ObservableCollection<OrderInfo> _availableOrderInfos;
    public ObservableCollection<OrderInfo> AvailableOrderInfos
    {
        get { return _availableOrderInfos; }
        set { _availableOrderInfos = value; }
    }




    public ViewModel()
    {
        _customers = new ObservableCollection<Customer>();
        this.GenerateCustomers();
this.GenerateAvailableOrderInfos();
    }


private void GenerateCustomers()
{
_customers.Add(new Customer("John", new OrderInfo("Apples"));
_customers.Add(new Customer("Adam", new OrderInfo("Bananas"));
_customers.Add(new Customer("Neil", new OrderInfo("Watermelon"));
_customers.Add(new Customer("Mike", new OrderInfo("Carrots"));
_customers.Add(new Customer("Tim", new OrderInfo("Tomatoes"));
}


private void GenerateAvailableOrderInfos()
{
_availableOrderInfos.Add(new OrderInfo("Apples"));
_availableOrderInfos.Add(new OrderInfo("Bananas"));
_availableOrderInfos.Add(new OrderInfo("Watermelon"));
_availableOrderInfos.Add(new OrderInfo("Carrots"));
_availableOrderInfos.Add(new OrderInfo("Tomatoes"));
_availableOrderInfos.Add(new OrderInfo("Iphone"));
_availableOrderInfos.Add(new OrderInfo("Samsung"));
_availableOrderInfos.Add(new OrderInfo("Dell"));
_availableOrderInfos.Add(new OrderInfo("Paper"));
_availableOrderInfos.Add(new OrderInfo("Pencil"));
_availableOrderInfos.Add(new OrderInfo("IPad"));
_availableOrderInfos.Add(new OrderInfo("Speakers"));
}
}




<Syncfusion:SfDataGrid AutoGenerateColumns="False" SelectionMode="Single"
                        AllowEditing="True" AllowDeleting="True" ItemsSource="{Binding Customers}">


<Syncfusion:SfDataGrid.Columns>


<Syncfusion:GridTextColumn HeaderText="Customer Name" MappingName="CustName" />


<Syncfusion:GridTemplateColumn MappingName="Name" HeaderText="Order">
                    <Syncfusion:GridTemplateColumn.EditTemplate>
                        <DataTemplate>
                            <ComboBox IsEditable="True" DisplayMemberPath="Name"  SelectedValuePath="Name"
                                      Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                      ItemsSource="{Binding AvailableOrderInfos"/>
                        </DataTemplate>
                    </Syncfusion:GridTemplateColumn.EditTemplate>


                    <Syncfusion:GridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Order.Name}" />
                        </DataTemplate>
                    </Syncfusion:GridTemplateColumn.CellTemplate>
                </Syncfusion:GridTemplateColumn>


</Syncfusion:SfDataGrid.Columns>
</Syncfusion:SfDataGrid>

[Vijayarasan Sivanandham]

Hi Moustafa,

Your requirement to bind the complex property binding to GridTemplateColumn in SfDataGrid can be achieved by setting the complex property path to MappingName in GridColumn. Please refer the below code snippet,

 

<syncfusion:SfDataGrid AutoGenerateColumns="False" SelectionMode="Single" 

                        AllowEditing="True" AllowDeleting="True" ItemsSource="{Binding Customers,Source={StaticResource viewModel}}"> 

            <syncfusion:SfDataGrid.Columns> 

                <syncfusion:GridTextColumn HeaderText="Customer Name" MappingName="CustName" /> 

                <syncfusion:GridTemplateColumn MappingName="Order.Name" HeaderText="Order"> 

                    <syncfusion:GridTemplateColumn.EditTemplate> 

                        <DataTemplate> 

                            <ComboBox IsEditable="True" DisplayMemberPath="Name"  SelectedValuePath="Name" 

                                      Text="{Binding Order.Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" 

                                      ItemsSource="{Binding AvailableOrderInfos, Source={StaticResource viewModel}}"/> 

                        </DataTemplate> 

                    </syncfusion:GridTemplateColumn.EditTemplate> 

                    <syncfusion:GridTemplateColumn.CellTemplate> 

                        <DataTemplate> 

                            <TextBlock Text="{Binding Order.Name}" /> 

                        </DataTemplate> 

                    </syncfusion:GridTemplateColumn.CellTemplate> 

                </syncfusion:GridTemplateColumn> 

            </syncfusion:SfDataGrid.Columns> 

        </syncfusion:SfDataGrid>   

Sample Link: https://www.syncfusion.com/downloads/support/forum/171876/ze/SfDataGridDemo-988712778

For more information related to Binding Complex properties, please refer the below user guide documentation link, 

UG Link: https://help.syncfusion.com/wpf/datagrid/data-binding#binding-complex-properties

KB Link: https://www.syncfusion.com/kb/7737/how-to-bind-the-view-model-itemssource-to-gridcomboboxcolumn-in-wpf-datagrid-sfdatagrid

Please let us know if you have any concerns in this. 

Regards, 

Vijayarasan S