Search code examples
c#wpfmvvmcomboboxdatagrid

How to bind a DataGridComboBoxColumn of a WPF DataGrid


My project uses MVVM and I want to bind a DataGridComboBoxColumn to the viewmodel.

The combobox shall have the items "<" (with key "1") and "<=" (with key "2").

First i have an observablecollection with the comboboxitems:

public ObservableCollection<ArithmeticSignData> LowerComparerItems { get; set; }

This is the class ArithmeticSignData:

public class ArithmeticSignData
{
    public ArithmeticSignData(string key, string value)
    {
        ArithmeticSignKey = key;
        ArithmeticSignValue = value;
    }

    public string ArithmeticSignKey { get; set; }
    public string ArithmeticSignValue { get; set; }
}

When my viewmodel is initialized i fill the list LowerComparerItems:

private void FillLowerComparerItemsList()
{
    LowerComparerItems = new ObservableCollection<ArithmeticSignData>();
    LowerComparerItems.Add(new ArithmeticSignData("1", "<"));
    LowerComparerItems.Add(new ArithmeticSignData("2", "<="));
}

The data for the datagrid comes from another observablecollection with an entity framework table as type. That table has a column called "low_operator". So i thought it would be possible to bind the comboboxcolumn by the following. When i open the combobox i can see the items. But after starting the app the values from the table are not translated to "<" or "<=".

<DataGridComboBoxColumn x:Name="cbc_LowerComparer"
                                    SelectedItemBinding="{Binding low_operator, NotifyOnSourceUpdated=True, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                    DisplayMemberPath="ArithmeticSignValue"
                                    Header=" "
                                    Width="30">
    <DataGridComboBoxColumn.ElementStyle>
        <Style TargetType="ComboBox">
            <Setter Property="ItemsSource" Value="{Binding Path=DataContext.LowerComparerItems, RelativeSource={RelativeSource AncestorType=DataGrid}}" />
        </Style>
    </DataGridComboBoxColumn.ElementStyle>
    <DataGridComboBoxColumn.EditingElementStyle>
        <Style TargetType="ComboBox">
            <Setter Property="ItemsSource" Value="{Binding Path=DataContext.LowerComparerItems, RelativeSource={RelativeSource AncestorType=DataGrid}}" />
            <Setter Property="IsEditable" Value="True"/>
        </Style>
    </DataGridComboBoxColumn.EditingElementStyle>
</DataGridComboBoxColumn>

Solution

  • You should the SelectedValueBinding property to your binding and also set the SelectedValuePath property to "ArithmeticSignKey":

    <DataGridComboBoxColumn x:Name="cbc_LowerComparer"
                                        SelectedValueBinding="{Binding low_operator, NotifyOnSourceUpdated=True, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                        SelectedValuePath="ArithmeticSignKey"
                                        DisplayMemberPath="ArithmeticSignValue"
                                        Header=" "
                                        Width="30">
    

    This should set the low_operator column to the value of the selected ArithmeticSignKey value. If you want to set it to the ArithmeticSignValue you should set the SelectedValuePath property of the column to the name of this one instead.