WPF binding SelectedItemBinding of a DataGridComboBoxColumn

Question

I have a student class that defines the properties of a student as follows

 public class Student
    {
        public string Department { get; set; }

    public string Level { get; set; }

    public Gender Gender { get; set; }

    public string Nationality { get; set; }

}

I have another class that contains the list of countries in a collection declared as seen below

public class Countries
    {
 public static ObservableCollection<string> Nationalities { get; } = new ObservableCollection<string>()
        {
            "Afghanistan",
            "Albania",
            "Algeria",
            "Andorra",
            "Angola",
            "Anguilla",
            "Antigua & Barbuda",
            "Argentina",
            "Armenia",
            "Australia",
            "Austria",
            "Azerbaijan",
            "Bahamas",
            "Bahrain",
            "Bangladesh",
            "Barbados",
            "Belarus",
            "Belgium",
            "Belize",
            "Benin",
            "Bermuda",
            "Bhutan",
            "Bolivia",
            "Bosnia & Herzegovina",
            "Botswana",
            "Brazil",
}

In my view model, i have declared an observable collection that is initialize to the list of countries. This is done inside the view models' constructor as seen below

public class ViewModel : BaseViewModel
    {
     public ObservableCollection<string> Nationalities { get; private set; }
         public ViewModel()
        {

            // Set the nationality list
            Nationalities = Countries.Nationalities;

        }
}

Now i have created my DataGridComboBoxColumn like so,

 <DataGrid.Columns>
                        <DataGridComboBoxColumn Width="Auto"
                                                    SelectedItemBinding="{Binding Path=Student.Nationality}"
                                                    Header="Nationality" 
                                                    x:Name="NationalityComboBox2">
                            <DataGridComboBoxColumn.EditingElementStyle>
                                <Style TargetType="ComboBox">
                                    <Setter Property="ItemsSource" Value="{Binding Path=DataContext.Nationalities, ElementName=StudentListGrid}" />
                                </Style>
                            </DataGridComboBoxColumn.EditingElementStyle>
                        </DataGridComboBoxColumn>
                    </DataGrid.Columns>

When i run my app, the DataGridComboBoxColumn have all the countries but when i select a particular country, it doesn't get displayed.I have seen similar questions online but i haven't seen any answer that works in my case. Any suggestions?

score 1 · Accepted Answer · answered Jun 13 '18 at 16:39

Instead of using a DataGridComboBoxColumn, you could use a DataGridTemplateColumn to achieve the same. You may have to write some code to maintain the style of the textbox and comboBox.

 <DataGridTemplateColumn  Header="Nationality" >
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Nationality}"/>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
                <DataGridTemplateColumn.CellEditingTemplate>
                    <DataTemplate>
                        <ComboBox SelectedItem="{Binding Nationality}" ItemsSource="{Binding Path=DataContext.Nationalities, ElementName=StudentListGrid}"/>
                    </DataTemplate>
                </DataGridTemplateColumn.CellEditingTemplate>
            </DataGridTemplateColumn>

score 0 · Answer 2 · answered Jun 13 '18 at 11:52

I think you need to implement the INotifyPropertyChanged interface on Student

public class Student : INotifyPropertyChanged
{

    public event PropertyChangedEventHandler PropertyChanged;

    public string Department { get; set; }

    public string Level { get; set; }

    public Gender Gender { get; set; }

    private string _nationality;
    public string Nationality 
    { 
        get
        {
            return _nationality;
        }  
        set
        {
            if(value != _nationality)
            {
                _nationality = value;
                OnPropertyChanged(nameof(Nationality));
            }
         } 
    }

    protected void OnPropertyChanged(string name)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(name));
        }
    }
}

Thanks. I implemented it in the BaseViewModel class. The problem with the ComboBoxColumn is that it doesn't display the selected value at all. I thought it had something to do with the SelectedItemBinding Property of the DAtaGridComboBoxColumn — Ken Janka, Jun 13 '18 at 12:00

score 0 · Answer 3 · answered Jun 13 '18 at 13:26

Assuming that the ItemsSource of the DataGrid is an IEnumerable<Student> you should bind to Nationality instead of Student.Nationality:

<DataGridComboBoxColumn Width="Auto"
                        SelectedItemBinding="{Binding Nationality}"
                        Header="Nationality" 
                        x:Name="NationalityComboBox2">
    <DataGridComboBoxColumn.EditingElementStyle>
        <Style TargetType="ComboBox">
            <Setter Property="ItemsSource" Value="{Binding Path=DataContext.Nationalities, ElementName=StudentListGrid}" />
        </Style>
    </DataGridComboBoxColumn.EditingElementStyle>
</DataGridComboBoxColumn>

@KenJanka: Didn't you try this? Or did you fail renaming the binding path? — mm8, Jun 14 '18 at 13:33

WPF binding SelectedItemBinding of a DataGridComboBoxColumn

3 Answers3