WPF DataGrid - DataGridComboBoxColumn v1 Intro

Intro

If you haven't already, you can download the DataGrid v1 bits and source here. DataGridComboBoxColumn has had a make-over since the CTP release. In particular, the whole data binding story has been updated so that you can accomplish basic ComboBox tasks that before required some tedious workarounds. While other stock columns such as DataGridTextColumn and DataGridCheckBoxColumn use Binding for the visual to data hook up, DataGridComboBoxColumn uses a different route with three possible ways to hook up a binding. Here are the APIs that are specific to the DataGridComboBoxColumn:

public class DataGridComboBoxColumn : DataGridColumn

{

  public string DisplayMemberPath { get; set; }

  public IEnumerable ItemsSource { get; set; }

  public virtual BindingBase SelectedItemBinding { get; set; }

  public virtual BindingBase SelectedValueBinding { get; set; }

  public string SelectedValuePath { get; set; }

  public virtual BindingBase TextBinding { get; set; }

}

 

The three mechanisms to hook up the binding are:

· SelectedItemBinding

· SelectedValueBinding

· TextBinding

These three bindings basically map to the cell’s content being bound to ComboBox.SelectedItem, ComboBox.SelectedValue, or ComboBox.Text respectively. SelectedValuePath and DisplayMemberPath are convenience methods on a ComboBox control and apply to ComboBox.SelectedValuePath and ComboBox.DisplayMemberBinding respectively. Overall, you can think of these APIs as convenience methods that apply to the ComboBox element of the cell. Let’s go through some use cases.

Some examples

When the column is bound to a primitive data type such as int, string, or bool, and you want the ComboBox to have a list of similar items to choose from, you can use SelectedItemBinding like so:

<dg:DataGridComboBoxColumn SelectedItemBinding="{Binding ShipCity}">

  <dg:DataGridComboBoxColumn.ItemsSource>

    <col:ArrayList>

      <sys:String>Redmond</sys:String>

      <sys:String>Bellevue</sys:String>

      <sys:String>Seattle</sys:String>

      <sys:String>Renton</sys:String>

    </col:ArrayList>

  </dg:DataGridComboBoxColumn.ItemsSource>

</dg:DataGridComboBoxColumn>

 

ShipCity is a string type so the ComboBox.SelectedItem maps correctly to the item in the DataGrid’s column.

Let’s say I have a foreign key relationship between an Orders table and a Customers table. Orders contains a CustomerID foreign key and will be the ItemsSource for the DataGrid. I can setup a DataGridComboBoxColumn with Customers being its ItemsSource and hooking up the SelectedValueBinding like so:                                

<dg:DataGridComboBoxColumn SelectedValueBinding="{Binding CustomerID}"

  SelectedValuePath="CustomerID"

  DisplayMemberPath="ContactName"

  Header="CustomerID (ContactName alias using SelectedValueBinding)"

  ItemsSource="{Binding Source={StaticResource customerDataProvider}}">

 

SelectedValueBinding maps to Orders’ CustomerID, which also maps to Customers’ CustomerID through SelectedValuePath. I use DisplayMemberPath to alias the CustomerID with a more user friendly value to the end user.

You can download the solution to these examples here.

DataGrid_V1_ComboBoxColumnSamples.zip