WPF - datagridcombobox - change displayed value after selection of item from dropdown

Question

I specified a datagrid in XAML as

    <DataGrid Name="grAssessment">
    </DataGrid>

Number of columns is set dynamically depending on the user's choice.

//define number of alternatives
int num = Alternatives.Children.Count - 1;

Columns are comboboxes with options from dictionary

Dictionary<int, string> scores = new Dictionary<int, string>();
scores.Add(1, "the same");
scores.Add(3, "moderate superiority");
scores.Add(5, "strong superiority");
scores.Add(7, "very strong superiority");
scores.Add(9, "extremely superiority");

I add new columns in the following way

    for (int i = 0; i < num; i++)
    {
        DataGridComboBoxColumn col = new DataGridComboBoxColumn();
        grAssessment.Columns.Add(col);
        col.Width = new DataGridLength(1, DataGridLengthUnitType.Star);
        col.ItemsSource = scores;
        col.DisplayMemberPath = "Value";
        col.SelectedValuePath = "Key";                 
    }

What I actually want is that when dropdown is unfold it contains Values from Dictionary. But after User selects any item Key should be displayed in a cell. screen

Could you please assist me with this?

Answer 1

Here is a xaml based solution of your problem; 1. XAML code:

                <DataGridComboBoxColumn Header="Scores" 
                                    SelectedValueBinding="{Binding ScoreData, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}">
                <DataGridComboBoxColumn.ElementStyle>
                    <Style TargetType="ComboBox">
                        <Setter Property="ItemsSource" Value="{StaticResource ScoresAndDescription}"/>
                        <Setter Property="DisplayMemberPath" Value="Score"></Setter>
                        <Setter Property="IsReadOnly" Value="True"/>
                    </Style>
                </DataGridComboBoxColumn.ElementStyle>
                <DataGridComboBoxColumn.EditingElementStyle>
                    <Style TargetType="ComboBox">
                        <Setter Property="ItemsSource" Value="{StaticResource ScoresAndDescription}"/>
                        <Setter Property="DisplayMemberPath" Value="ScoreVerbal"></Setter>
                        <Setter Property="IsReadOnly" Value="True"/>
                    </Style>
                </DataGridComboBoxColumn.EditingElementStyle></DataGridComboBoxColumn>

When simpleDataGrid:ScoreData array is actually an array of your mapped objects. You can notice that the solution use two styles; one for the combo edit state (EditingElementStyle) when you select a value and the second (ElementStyle) for the state when the combo only displays selected value. Thus when the combpo is lost the focus on it, the score "Key" will be displayed, while you edit combo selected value (select value), the verbal score value will be displayed. This solution requires the DataGridComboBoxColumn ItemsSource to be the collection of key/value pairs like this xaml code:

       <x:Array Type="simpleDataGrid:ScoreData" x:key>
        <simpleDataGrid:ScoreData Score="1" ScoreVerbal="the same"/>
        <simpleDataGrid:ScoreData Score="3" ScoreVerbal="moderate superiority"/>
        <simpleDataGrid:ScoreData Score="5" ScoreVerbal="strong superiority"/>
        <simpleDataGrid:ScoreData Score="7" ScoreVerbal="the samvery strong superioritye"/>
        <simpleDataGrid:ScoreData Score="9" ScoreVerbal="extremely superiority"/>
    </x:Array>

Give me to know if you need the code behind version and not a XAML code. I hope it will help, regards.

Update: 1. Column items source code (just set this in code behind):

 private ObservableCollection<ScoreData> _scores = new ObservableCollection<ScoreData>(

    new List<ScoreData> 
    {
        new ScoreData{Score = 1, ScoreVerbal = "the same"},
        new ScoreData{Score = 3, ScoreVerbal = "moderate superiority"},
        new ScoreData{Score = 5, ScoreVerbal = "strong superiority"},
        new ScoreData{Score = 7, ScoreVerbal = "the samvery strong superioritye"},
        new ScoreData{Score = 9, ScoreVerbal = "extremely superiority"},
    } );

2. ScoreData code:

   public class ScoreData
{
    public string ScoreVerbal { get; set; }
    public int Score { get; set; }
}

3. Column creation code (set this as part of the column creation method):

       var col = new DataGridComboBoxColumn();
       dataGrid.Columns.Add(col);
       col.Width = new DataGridLength(1, DataGridLengthUnitType.Star);
       col.ItemsSource = _scores;
       col.Header = "Added In Code";
       col.SelectedValueBinding = new Binding("ScoreData");
       //bring the ElementStyle from the xaml code by its key
       var elementStyle = this.FindResource("ElementStyle") as Style;
       col.ElementStyle = elementStyle;
       //bring the EditingElementStyle from the xaml code by its key
       var editingElementStyle = this.FindResource("EditingElementStyle") as Style;
       col.EditingElementStyle = editingElementStyle;
   

4. Xaml code (set this as part of your window.xaml or app.xaml resources):

   <Style x:Key="ElementStyle" TargetType="ComboBox">
       <Setter Property="DisplayMemberPath" Value="Score"></Setter>
       <Setter Property="IsReadOnly" Value="True"/>
   </Style>
   <Style x:Key="EditingElementStyle" TargetType="ComboBox">
       <Setter Property="DisplayMemberPath" Value="ScoreVerbal"></Setter>
       <Setter Property="IsReadOnly" Value="True"/>
   </Style>
   

   That's all, I will be glad to help if there will be problems with the code. Regard.