HomeBrainDump Introduction to Binding ComboBox and DataG...
Introduction to Binding ComboBox and DataGrid Controls in Silverlight 2.0
This is my seventh article in a series focusing on Silverlight 2.0 development using Visual Studio 2008. In this article, I will introduce you to binding WCF object collections to ComboBox. We will also explore cascading ComboBoxes and the DataGrid relative to ComboBox.
This article assumes that you have minimum knowledge of technologies like “LINQ to SQL,” “WCF,” “Silverlight” and so forth. If you don’t, and if you need step-by-step information about the above technologies, please go through the following links.
The entire source code for this article is available in the form of a free downloadable zip file. The solution was developed using Microsoft Visual Studio 2008 Team Edition (with SP1) with Microsoft SQL Server 2008 Developer Edition on Microsoft Windows Server 2003 Standard Edition (with SP2) with Silverlight 2.0 (RTM). I didn’t really test it in any other environment. I request that you post in the discussion area if you have any problems in execution.
Now we have to develop a Silverlight 2.0 page which can consume our previously developed WCF Service. In this section, I will simply develop a Silverlight 2.0 page which has only a ComboBox control on it, and finally bind it to WCF object collection dynamically.
The following are the steps necessary to develop the above Silverlight 2.0 page:
Add a new “Silverlight” project (“DemoSL”) to the solution. This in turn will add a “DemoSL.Web” project (Silverlight hoster application) to the solution. Detailed steps are provided in previous articles.
Add a new “Silverlight user control” (“Page6.xaml”) to the “DemoSL” project and modify “Application_Startup” in “App.xaml” as follows:
Private Sub Application_Startup(ByVal o As Object, ByVal e As StartupEventArgs) Handles Me.Startup
Private Sub Page6_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
objService.GetDepartmentListAsync()
End Sub
Private Sub DeptListFetched(ByVal sender As Object, ByVal e As EmpService.GetDepartmentListCompletedEventArgs)
Me.cboDept.DisplayMemberPath = "Dname"
Me.cboDept.ItemsSource = e.Result
End Sub
Private Sub cboDept_SelectionChanged(ByVal sender As Object, ByVal e As System.Windows.Controls.SelectionChangedEventArgs) Handles cboDept.SelectionChanged
In the previous section, we make object collection bind to a single ComboBox. However, there will be times where cascade-type binding for ComboBoxes is necessary. In simple words, we will bind the first ComboBox (say Dept ComboBox) to one collection. Once the user selects an item in the first ComboBox, the second ComboBox (say Emp ComboBox) must be bound to related items.
The following is the markup for designing Silverlight UI with two ComboBoxes:
Private Sub Page7_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
objService.GetDepartmentListAsync()
End Sub
Private Sub DeptListFetched(ByVal sender As Object, ByVal e As EmpService.GetDepartmentListCompletedEventArgs)
Me.cboDept.DisplayMemberPath = "Dname"
Me.cboDept.ItemsSource = e.Result
End Sub
Private Sub cboDept_SelectionChanged(ByVal sender As Object, ByVal e As System.Windows.Controls.SelectionChangedEventArgs) Handles cboDept.SelectionChanged
Me.lblMsg.Text = "Fetching Employees.."
Dim oDept As EmpService.Dept = Me.cboDept.SelectedItem
In the previous example, we saw the collection being bound to the ComboBox dynamically. In this section, we will have related binding between a ComboBox and DataGrid.
The following is the Silverlight 2.0 markup which displays both ComboBox and DataGrid in a detailed fashion:
Let us try to understand the code in the previous sections:
Binding Dropdown to Object Collection:
We are consuming the WCF service with the following statements:
Dim objService As New EmpService.EmpServiceClient
objService.GetDepartmentListAsync()
As the communication takes place in an asynchronous manner, the "DeptListFetched” method gets executed when the fetching is completed. This callback mechanism is managed by using delegation as follows:
The “DeptListFetched” method gets executed by the Silverlight framework once the WCF service responds. The “GetDepartmentList” method sends back a collection of objects and gets directly filled into “GetDepartmentListCompletedEventArgs” (in this case, it is the “e” parameter in “DeptListFetched” method). Finally, we assign the same to the ComboBox as follows:
Private Sub DeptListFetched(ByVal sender As Object, ByVal e As EmpService.GetDepartmentListCompletedEventArgs)
Me.cboDept.DisplayMemberPath = "Dname"
Me.cboDept.ItemsSource = e.Result
End Sub
Cascading Dropdowns with Object Collection binding:
This works very similar to the binding dropdown, except that the second dropdown gets bound every time when the user selects an item in the first drop down.
You can observe the following event, which fetches employee information from the WCF service based on the user-selected department (in the first ComboBox):
Private Sub cboDept_SelectionChanged(ByVal sender As Object, ByVal e As System.Windows.Controls.SelectionChangedEventArgs) Handles cboDept.SelectionChanged
Me.lblMsg.Text = "Fetching Employees.."
Dim oDept As EmpService.Dept = Me.cboDept.SelectedItem
The second dropdown gets bound to the list of employees during callback, as shown in the following code:
Private Sub EmpListFetched(ByVal sender As Object, ByVal e As EmpService.GetEmployeeListByDeptCompletedEventArgs)
Me.cboEmp.DisplayMemberPath = "Ename"
Me.cboEmp.ItemsSource = e.Result
Me.lblMsg.Text = "Fetched!"
End Sub
In my upcoming articles, we will see more and more examples of Silverlight 2.0 development together with LINQ to SQL and WCF. I hope you enjoyed the article and any suggestions, bugs, errors, enhancements etc. are highly appreciated at http://jagchat.spaces.live.com