Friday, June 25, 2010

Binding ComboBox Based On First ComboBox Value MVVM

In this post I will show you how you can Bind the second combo Box based on the value of the first Comoros value, by using the MVVM.It is a common scenario in our web or desktop application development that we need to fill the combo Box based on the parent combo Box value, like we have common scenario like the country and state combo Box controls in our application where user can select the country name and then based on the country name the state combo box is filled, by fetching from database or by filtering from locally saved records. Below is the image of the window which contain two combo box control one for the country and second one for the state and two button are also added one is for save , which is used to see the selected value of the country combo box and the close button to close the window.



Now let us start with our code. For the model I have define two classes one for the country and second one for the states. The country class has two properties one is the name of the country and second one is the country id which is used to search the state in the state list and is of type int. The country name property is used to displayed in the combo box and one function which will return all the country names. The second class is for the state and it also have two properties one is the country id which is the id of the parent country and second one is the name of the state which is displayed in the state combo Box control. For the state class I have two function one is to return all the states and second one is the used to return the states based on the country id which is passed as parameter.

ViewModel
Below is the code which is written in the view model. I have only write here important code here to explain you about the code. Here you can see that I have three properties one is for the country name list which is used to bind the country combo Box control, and you can see that it is only get and set no extra code here. Because I want to bind the country combo box only once. Second property is the Selected country name which is used to bind with the SelectedValue of the country name as you can see in the property that I have raised RaisedPropertyChanged event , because I want to select the states values based on the selected country.

public List<CountryNames> CountryNameList { get; set; }

public CountryNames SelectedCountryName
{
get{return selectedCountryName;}
set
{
selectedCountryName = value;
RaisePropertyChanged("SelectedCountryName");
}
}

public List<StateNames> StateNameList
{
get{return stateNameList;}
set
{
stateNameList = value;
RaisePropertyChanged("StateNameList");
}
}


Third property which I want to explain here is the StateNameList and you can see that I have raise the property changed event handler here , as the value of this list will be change every time I have selected new country from the country combo box.

View:
For the view I have only selected the country combo box to explain you how to bind the combo box and then get the selected value of the combo box in the view model. Here you can see that I have bind the ItemSource property of the combo box control to the CountryNameList which is defined in the view model and return list.

< ComboBox Grid.Column="1" Grid.Row="1" Margin="1,2,5,2" ItemsSource="{Binding CountryNameList}" DisplayMemberPath="CountryName" SelectedValue="{Binding Path=SelectedCountryName,Mode=TwoWay}"/>

To get the selected value back to the view model I have bind the selectedValue property of the country combo box with the SelectedCountryName property and set the mode to two way. Now when the country name changed the selected value of the combo box also changed and I have raised the changed event in the view model and also in the RaisedChangedProperty I have checked the propertyName which is passed to the SelectedCountryName and then select the state name list. Hope you get some idea about how to bind the combo box and get the selected value.You can download the source code from here
All and any comments / bugs / suggestions are welcomed!

1 comment:

syed kalim said...

Assalam o alaikum Asim bhai
Can u please explain in detail why we are using MVVM model if we have other architecture as well like three tier,MVC etch.I also heard from other people that MVVM is a bit more complicated.I mean why generally people recommends MVVM for WPF and Silverlight.