Using ComboBox for Child-Parent selection via RiaServices

  • Article

A common scenario when developing Business Applications via RiaServices is to allow users to edit a child-parent relationship using ComboBox.  For example, the Customer and Order tables in Northwind database have a Parent-Child relationship, where a Customer might have 0 or more orders, and each Order must belong to one of the Customer.  If we use a DataForm to display the Order entity, it will be convenient to use a ComboBox to show the Customer property in Order.  Ideally, the ComboBox should show all the Customers in the dropdown list while the matching one is selected. 

Here's how I do it:

  1. Setting up a new Silverlight Application with RiaServices enabled. 

    • Creat new Silvelirght Application.
    • In Server project, add a new Ado.NET Entity Data Model
    • In Servers Explorer, connect to my SQL Server, Northwind Database, Check Customer and Order tables.
    • Build Server Project
    • Add a new DomainServices class.  Select both Customer and Order tables in the Wizard and Enable editing.
    • Build the client project

  2.  If you are using SL4, you would have the Drag/Drp from Data Source feature enabled in the client, where you can drag the data model into the UI.  Here I picked the Order Entity and use ComboBox for displaying the Customer property: 

    Data Source

  3. Change the Order type to  Detail and drag it to the MainPage.xaml designer.  The Order Entity is displayed as a Grid where each property is a displayed in a column.  Here I'm only demonstrating the setting up of the ComboBox.  In real life, you might want a DataForm hooked up with the Order. The designer will automatically create a DomainDataSource and hook up the DataContext of the Grid to the DomainDataSource: dds

  4. Then I change the first TextBox that was bound to CustomerID to a ComboBox.  Here we need to worry about 3 bindings: ItemsSource, SelectedItem and DisplayMemberPath

  5. Ideally, ItemsSource should contain all the customers, so that users could select from.  These customers instance should come from the same NorthwindCatalog DomainContext as used in the DomainDataSource.  I set this up by creating a StaticResource that expose the EntitySet<Customer> of the NorthwindCatalog in client.  Here, I used a singleton DomainContext (NorthwindCatalog) that is shared by both DomainDataSource and my StaticResource.

  6. I created a new Class   EntityProvider that contains a static NorthwindCatalog:

  7. Then I commented out the DomainContext definition in the DomainDataSource and in the Page constructor I set its DomainContext to the static one

  8. Now we can just set the ComboBox.ItemsSource to this static resource

  9. Next, we can just set the SelectedItem binding to the Custom property since the DataContext is Order

  10. By default, it would display the id.  If we'd like to be more friendly, we can set the DisplayMemberPath to one of the properties of Customer, for example, the ContactName

  11. Here's the final ComboBox:

  12. Final result when running: