WPF MVVM Populate combobox OnPropertyChanged of another combobox

Question

I want to populate my combobox2 after combobox1 selection changed event.

Here's some part of my XAML:

<ComboBox Name="cmbWorkcode"
        ItemsSource="{Binding Workcodes}" 
        DisplayMemberPath="WorkcodeName" 
        SelectedValuePath="WorkcodeID" 
        SelectedValue="{Binding Path=WorkcodeId, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
<ComboBox Name="cmbProcess" 
        ItemsSource="{Binding Processes}"
        DisplayMemberPath="ProcessName" SelectedValuePath="ProcessId"
        SelectedValue="{Binding Path=ProcessId, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>

Some part of my ViewModel:

class MainWindowViewModel : ObservableObject 
{
    private ObservableCollection<Workcode> _workcodes = new ObservableCollection<Workcode>();
    public ObservableCollection<Workcode> Workcodes
    {
        get { return _workcodes; }
        set
        {
            _workcodes = value;
            OnPropertyChanged("Workcodes");
        }
    }

    private int _workcodeId;
    public int WorkcodeId
    {
        get { return _workcodeId; }
        set
        {
            _workcodeId = value;
            OnPropertyChanged("WorkcodeId");
        }
    }

    private ObservableCollection<Process> _processes = new ObservableCollection<Process>();
    public ObservableCollection<Process> Processes
    {
        get { return _processes; }
        set
        {
            _processes = value;
            OnPropertyChanged("Processes");
        }
    }

    private int _processId;
    public int ProcessId
    {
        get { return _processId; }
        set
        {
            _processId = value;
            OnPropertyChanged("ProcessId");
        }
    }

    public MainWindowViewModel()
    {
        PopulateWorkcode();
    }

    private void PopulateWorkcode()
    {
        using (var db = new DBAccess())
        {
            db.ConnectionString = ConfigurationManager.ConnectionStrings["connString"].ConnectionString;
            db.Query = @"SELECT workcodeId, workcode FROM workcode";
            DataTable data = db.GetData();
            if (data != null)
            {
                foreach (DataRow row in data.Rows)
                {
                    int workcodeId = Convert.ToInt32(row["workcodeId"].ToString());
                    string workcodeName = row["workcode"].ToString();
                    _workcodes.Add(new Workcode(workcodeId, workcodeName));
                }
            }
        }    
    }

    private void PopulateProcess()
    {
        using (var db = new DBAccess())
        {
            db.ConnectionString = ConfigurationManager.ConnectionStrings["connString"].ConnectionString;
            db.Query = @"SELECT ProcessId, ProcessName FROM `process` WHERE WorkcodeId = @workcodeId";
            DataTable data = db.GetData(new[] {new MySqlParameter("@workcodeId", _workcodeId.ToString())});
            if (data != null)
            {
                foreach (DataRow row in data.Rows)
                {
                    int id = Convert.ToInt32(row["ProcessId"].ToString());
                    string name = row["ProcessName"].ToString();
                    _processes.Add(new Process(id, name));
                }
            }
        }
    }
}

My problem is I don't know where do I trigger my PopulateProcess() method so that my combobox2 will be populated base on the selection of combobox1. Thanks for all the time and help! :)

--EDIT--

public class ObservableObject : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

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

public class Workcode
{
    public int WorkcodeId { get; set; }
    public string WorkcodeName { get; set; }

    public Workcode(int id, string name)
    {
        WorkcodeId = id;
        WorkcodeName = name;
    }
}

Can you please show your WorkCode class – yo chauhan Mar 19 '14 at 04:33 — yo chauhan, Mar 19 '14 at 04:33

score 2 · Answer 1 · answered Mar 19 '14 at 03:38

2

initially the second combobox is empty and on select of the first combobox changed just pupulate the process

 private int _workcodeId;
 public int WorkcodeId
 {
   get { return _workcodeId; }
   set
   {
      _workcodeId = value;
      OnPropertyChanged("WorkcodeId");
      if(WorkcodeID>0) PopulateProcess();
   }
}

answered Mar 19 '14 at 03:38

Nishanth

168
3
12

initially get a processcollection and store in temporary collection and based on workcode selected , populate the second combobox. – Nishanth Mar 19 '14 at 03:41
@jomsk1e does your Process class implement INPC? If not, i believe you have to raise a CollectionChanged event so that WPF knows that the items in your collection has changed. (Your current code will notify a change if the actual collection itself was changed, but not the items within). Check out this answer for details. http://stackoverflow.com/questions/8490533/notify-observablecollection-when-item-changes – failedprogramming Mar 19 '14 at 03:59
@failedprogramming, please see my edit, I added the class I used to implement INotifyPropertyChanged. – jomsk1e Mar 19 '14 at 04:05

score 2 · Answer 2 · answered Mar 19 '14 at 04:35

I can understand you want to have the next combobox to fill with data based on the previous value. Since i don't have classes of your type, i will give a simple example,

class ItemListViewModel<T> : INotifyPropertyChanged where T : class
{
    private T _item;
    private ObservableCollection<T> _items;

    public ItemListViewModel()
    {
        _items = new ObservableCollection<T>();
        _item = null;
    }

    public void SetItems(IEnumerable<T> items)
    {
        Items = new ObservableCollection<T>(items);
        SelectedItem = null; 
    }

    public ObservableCollection<T> Items
    {
        get { return _items; }
        private set
        {
            _items = value;
            RaisePropertyChanged("Items");
        }
    }

    public T SelectedItem
    {
        get { return _item; }
        set
        {
            _item = value;
            RaisePropertyChanged("SelectedItem");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void RaisePropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

Then have the main viewmodel that will be bound to the DataContext of the view. Have the Load methods do what you want

class MyViewModel : INotifyPropertyChanged
{
    public MyViewModel()
    {
        First = new ItemListViewModel<string>();
        Second = new ItemListViewModel<string>();
        Third = new ItemListViewModel<string>();

        First.PropertyChanged += (s, e) => Update(e.PropertyName, First, Second, LoadSecond);
        Second.PropertyChanged += (s, e) => Update(e.PropertyName, Second, Third, LoadThird);

        LoadFirst();
    }

    public ItemListViewModel<string> First { get; set; }
    public ItemListViewModel<string> Second { get; set; }
    public ItemListViewModel<string> Third { get; set; }

    private void LoadFirst()
    {
        First.SetItems(new List<string> { "One", "Two", "Three" });
    }
    private void LoadSecond()
    {
        Second.SetItems(new List<string> { "First", "Second", "Third" });
    }
    private void LoadThird()
    {
         Third.SetItems(new List<string> { "Firsty", "Secondly", "Thirdly" });
    }

    private void Update<T0, T1>(string propertyName, ItemListViewModel<T0> parent, ItemListViewModel<T1> child, Action loadAction)
        where T0 : class
        where T1 : class
    {
        if (propertyName == "SelectedItem")
        {
            if (parent.SelectedItem == null)
            {
                child.SetItems(Enumerable.Empty<T1>());
            }
            else
            {
                loadAction();
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
}

In XAML,

    <ComboBox ItemsSource="{Binding First.Items}" SelectedItem="{Binding First.SelectedItem}" />
    <ComboBox ItemsSource="{Binding Second.Items}" SelectedItem="{Binding Second.SelectedItem}" />
    <ComboBox ItemsSource="{Binding Third.Items}" SelectedItem="{Binding Third.SelectedItem}" />

Thanks for the time Sajeetharan, your example would probably help others too. :) — jomsk1e, Mar 19 '14 at 05:03

score 1 · Accepted Answer · answered Mar 19 '14 at 04:58

1

The issue is here

<ComboBox Name="cmbWorkcode"
    ItemsSource="{Binding Workcodes}" 
    DisplayMemberPath="WorkcodeName" 
    SelectedValuePath="WorkcodeId" 
    SelectedValue="{Binding Path=WorkcodeId, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>

It should be WorkcodeId instead of WorkcodeID. rest you can try as Nishanth replied

public int WorkcodeId
{
   get { return _workcodeId; }
   set
   {
   if(_workcodeId !=value)
  {
    _workcodeId = value;
    OnPropertyChanged("WorkcodeId");
    PopulateProcess();
  }
 }
}

answered Mar 19 '14 at 04:58

yo chauhan

12,079
4
39
58

That was it! Thanks! I'm a fool! :( – jomsk1e Mar 19 '14 at 05:02
It was a good catch :) . One more thing when we use ObservableCollection we dont need to Notify and hence dnt need to create backing fields. Only public ObservableCollection Processes{get;set;} would work.Though you need to Initialize it in Constructor. – yo chauhan Mar 19 '14 at 05:12

WPF MVVM Populate combobox OnPropertyChanged of another combobox

3 Answers3