Binding SelectedItem of ComboBox in DataGrid with different type

Question

I have a DataGrid which contains ComboBox as column.

Let consider DataGrid having ItemsSource as ObservableCollection and ComboBox ItemsSource is List .

I want to set the ComboBox SelectedItem property based on property in DataGrid ItemsSource.

However Product class has property ProductTypeId of type int and not ProductType.

So how can I set ComboBox SelectedItem so that it display value of Product.ProductTypeId as selected. And also I want to bind SeletedItems with Mode = TwoWay so that whenever ComboBox SelectedItem changes it will be reflected in DataGrid's ItemsSource.

Any help would be much appreciated.

Thanks.

Answer 1

The DataGridComboBoxColumn does exactly what you're looking for. To use it correctly, you need to understand the following properties:

• SelectedValueBinding - this is the binding to the property on your object/viewmodel
• SelectedValuePath - this is the value property on the items inside the ComboBox. This will be assigned to the property you set in SelectedValueBinding when the user selects an item from the ComboBox.
• DisplayMemberPath - this is the description property on the items inside the ComboBox

Setting the ItemsSource of the DataGridComboBoxColumn is a little different; note my example below to see how it is done.

These are the same (except for SelectedValueBinding) as you have on a standard ComboBox.

Here is an example of what your column might look like.

<DataGridComboBoxColumn Header="Product Type" DisplayMemberPath="ProductType" SelectedValuePath="ProductTypeId" SelectedValueBinding="{Binding ProductTypeId, UpdateSourceTrigger=PropertyChanged}">
    <DataGridComboBoxColumn.ElementStyle>
        <Style TargetType="{x:Type ComboBox}">
            <Setter Property="ItemsSource" Value="{Binding AvailableProductTypes}"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
        </Style>
    </DataGridComboBoxColumn.ElementStyle>
    <DataGridComboBoxColumn.EditingElementStyle>
        <Style TargetType="{x:Type ComboBox}">
            <Setter Property="ItemsSource" Value="{Binding AvailableProductTypes}"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
        </Style>
    </DataGridComboBoxColumn.EditingElementStyle>
</DataGridComboBoxColumn>