{"id":51,"date":"2009-02-17T23:11:14","date_gmt":"2009-02-18T03:11:14","guid":{"rendered":"http:\/\/joemorrison.org\/blog\/?p=51"},"modified":"2009-02-17T23:11:14","modified_gmt":"2009-02-18T03:11:14","slug":"excedrin-headache-35401281-using-combo-boxes-with-the-wpf-datagrid","status":"publish","type":"post","link":"https:\/\/morrison.today\/blog\/2009\/02\/17\/excedrin-headache-35401281-using-combo-boxes-with-the-wpf-datagrid\/","title":{"rendered":"Excedrin headache #3.5.40128.1: Using combo boxes with the WPF DataGrid"},"content":{"rendered":"

\"\"<\/a>If you’re working with the WPF DataGrid (January 2009 release, version 3.5.40128.1) and want to display a column of combo boxes (e.g. to select a value from a list of options) you may be in for a headache, especially if you want the available options to be supplied from the binding context. For example say you are displaying an editable table of orders, and each order is for a particular quantity of a particular product, and the products are selectable using combo boxes. <\/p>\n

Here is a solution, the main element of which came from a posting on the Codeplex web site<\/a> from someone called XIU<\/a> for which I’m grateful. I thought I would add some more detail in case anyone else has this problem and wants a more cut and pasty solution.
\n
\nSay you have a class called Product<\/em>, each instance of which has an ID<\/em> and a Description<\/em>, and a class called Order<\/em>, each instance of which has a Quantity<\/em> and a Product ID<\/em> (to be used like a foreign key to designate the order’s product).<\/p>\n

These classes must implement the INotifyPropertyChanged interface<\/a>. Here are the first few lines of each:<\/p>\n

public class Product : INotifyPropertyChanged
\n{
\n  public int ID { ... }
\n  public string Description { ... }
\n  ...
\n}
\n 
\npublic class Order : INotifyPropertyChanged
\n{
\n  public int ProductID { ... }
\n  public int Quantity { ... }
\n  ...
\n}<\/code><\/p>\n

Create a simple ViewModel (i.e. binding context) and set the DataContext of the main window to an instance of this object:<\/p>\n

namespace ComboBoxDemo
\n{
\n  public class ViewModel
\n  {
\n    public ObservableCollection<Order> Orders { get; set; }
\n    public ObservableCollection<Product> Products { get; set; }
\n 
\n    public ViewModel()
\n    {
\n      Products = new ObservableCollection<Product>();
\n      Products.Add(new Product(100, \"Widget\"));
\n      Products.Add(new Product(101, \"Sprocket\"));
\n      Products.Add(new Product(102, \"Gadget\"));
\n 
\n      Orders = new ObservableCollection<Order>();
\n      Orders.Add(new Order(102, 15));
\n      Orders.Add(new Order(102, 32));
\n      Orders.Add(new Order(100, 42));
\n    }
\n  }
\n}<\/code><\/p>\n

Create a helper class using XIU’s solution:<\/p>\n

namespace ComboBoxDemo
\n{
\n  public class DataGridComboBoxColumnWithBindingHack : DataGridComboBoxColumn
\n  {
\n    protected override FrameworkElement GenerateEditingElement(DataGridCell cell, object dataItem)
\n    {
\n      FrameworkElement element = base.GenerateEditingElement(cell, dataItem);
\n      CopyItemsSource(element);
\n      return element;
\n    }
\n 
\n    protected override FrameworkElement GenerateElement(DataGridCell cell, object dataItem)
\n    {
\n      FrameworkElement element = base.GenerateElement(cell, dataItem);
\n      CopyItemsSource(element);
\n      return element;
\n    }
\n 
\n    private void CopyItemsSource(FrameworkElement element)
\n    {
\n      BindingOperations.SetBinding(element, ComboBox.ItemsSourceProperty,
\n        BindingOperations.GetBinding(this, ComboBox.ItemsSourceProperty));
\n    }
\n  }
\n}<\/code><\/p>\n

This is a variant of the DataGridComboBoxColumn<\/em> class which handles binding differently to allow the ItemsSource<\/em> property to have access to the binding context. Now put it all together with the following XAML:<\/p>\n

<Window x:Class=\"ComboBoxDemo.Window1\"
\n  xmlns=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation\"
\n  xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\"
\n  xmlns:wpf=\"http:\/\/schemas.microsoft.com\/wpf\/2008\/toolkit\"
\n  xmlns:local=\"clr-namespace:ComboBoxDemo\"
\n  Title=\"Window1\" Height=\"300\" Width=\"300\">
\n  <wpf:DataGrid ItemsSource=\"{Binding Orders}\" AutoGenerateColumns=\"False\">
\n    <wpf:DataGrid.Columns>
\n      <wpf:DataGridTextColumn Header=\"Quantity\" Binding=\"{Binding Quantity}\" \/>
\n      <local:DataGridComboBoxColumnWithBindingHack
\n        Header=\"Product\"
\n        SelectedValueBinding=\"{Binding ProductID}\"
\n        SelectedValuePath=\"ID\"
\n        DisplayMemberPath=\"Description\"
\n        ItemsSource=\"{Binding RelativeSource={RelativeSource Findancestor, AncestorType={x:Type Window}}, Path=DataContext.Products}\" \/>
\n    <\/wpf:DataGrid.Columns>
\n  <\/wpf:DataGrid>
\n<\/Window><\/code><\/p>\n

The SelectedValueBinding<\/em> attribute indicates the Order property containing the foreign key designating the product (i.e. which value should be edited by the combo box). The SelectedValuePath<\/em> attribute indicates which property within the product object contains the product ID, and the DisplayMemberPath<\/em> attribute indicates which property should actually be displayed in the grid. Finally the ItemsSource<\/em> attribute indicates how to get the list of products by navigating to the parent window object and looking up the list of products from the parent window’s binding context. <\/p>\n

Here is the complete project source as a downloadable zip file<\/a>.<\/p>\n

I hope this saves someone some time, and that it’s easier to do all of this in future versions of the WPF Toolkit. If anyone has a better solution to this problem, please let me know. <\/p>\n","protected":false},"excerpt":{"rendered":"

If you’re working with the WPF DataGrid (January 2009 release, version 3.5.40128.1) and want to display a column of combo boxes (e.g. to select a value from a list of options) you may be in for a headache, especially if you want the available options to be supplied from the binding context. For example say […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[26,25,24],"class_list":["post-51","post","type-post","status-publish","format-standard","hentry","category-net","tag-combobox","tag-datagrid","tag-wpf"],"blocksy_meta":"","_links":{"self":[{"href":"https:\/\/morrison.today\/blog\/wp-json\/wp\/v2\/posts\/51","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/morrison.today\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/morrison.today\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/morrison.today\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/morrison.today\/blog\/wp-json\/wp\/v2\/comments?post=51"}],"version-history":[{"count":11,"href":"https:\/\/morrison.today\/blog\/wp-json\/wp\/v2\/posts\/51\/revisions"}],"predecessor-version":[{"id":63,"href":"https:\/\/morrison.today\/blog\/wp-json\/wp\/v2\/posts\/51\/revisions\/63"}],"wp:attachment":[{"href":"https:\/\/morrison.today\/blog\/wp-json\/wp\/v2\/media?parent=51"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/morrison.today\/blog\/wp-json\/wp\/v2\/categories?post=51"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/morrison.today\/blog\/wp-json\/wp\/v2\/tags?post=51"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}