WPF DataGrid: Working with DataGridComboBoxColumns CTP (Part 2)

UPDATE: DataGridComboBoxColumn has been updated from CTP to V1.  See the post here for the updates to the DataGridComboBoxColumn as well as an updated sample.  

Previously I started a post on DataGridComboBoxColumns where I introduced the APIs specific to it and showed an example of how to use it.  Well, one thing I didn’t show that seems to be a common ask is how to mask what is displayed versus what is actually being updated.  Let’s say I have a CustomerID that I want to display as before with a DataGridComboBoxColumn but I want the display values to be a little more user friendly.  For the ComboBox (editing state) I can use DisplayMemberBinding for the display value and SelectedValuePath for the actual value but for the TextBlock (non-editing state) I don’t have anything that can map the CustomerID to something else.  Let’s take a look at a couple solutions.

One solution could be using a converter on the DataFieldBinding to transform the CustomerID to some other alias.  Remember though in our example, the overall table (Orders) that the DataGrid is displaying is different that the table that the ComboBox is using (Customers).  So in your converter you may need to optimize the calls to get the Customer table.  I have excluded that from the example as that is a separate topic of discussion.            


        DataFieldBinding=”{Binding CustomerID,

                                   Converter={StaticResource CustomerConverter},


        ItemsSource=”{Binding Source={StaticResource customerDataProvider}}”

        Header=”CustomerID (ContactName alias)”



    <Style TargetType=”ComboBox”>

      <Setter Property=”SelectedValuePath” Value=”CustomerID” />

      <Setter Property=”DisplayMemberPath” Value=”ContactName” />





public object Convert(object value, Type targetType, object parameter, CultureInfo culture)


  string customerID = (string)value;

  DataTable dataTable = DBAccess.GetCustomers().Tables[“Customers”];

  foreach (DataRow row in dataTable.Rows)


    if (row[“CustomerID”].ToString() == customerID)

      return row[parameter.ToString()];


  return null;


The converter is returning a string value and remember that the DataFieldTarget is what maps the ComboBox value back to the DataFieldBinding, so I have set the DataFieldTarget to “Text”.  Also, as the DisplayMemberPath and ConverterParameter show, I am using the ContactName as the alias.

Another solution which is very similar to the first one is to use the converter as I did above but with a DataGridTemplateColumn.  There really isn’t a big advantage going with a DataGridTemplateColumn over a DataGridComboBoxColumn in this particular example, but it does give you more flexibility on the type of element to display in the non-editing state.  Anyway, here is an example:                       

<dg:DataGridTemplateColumn Header=”CustomerID (ContactName alias)”>



      <TextBlock Text=”{Binding Path=CustomerID, Mode=OneWay, Converter={StaticResource CustomerConverter}, ConverterParameter=ContactName}” />





      <ComboBox ItemsSource=”{Binding Source={StaticResource customerDataProvider}}”

        SelectedValue=”{Binding CustomerID}” SelectedValuePath=”CustomerID” DisplayMemberPath=”ContactName” />




One thing to note about this example is what is bound to what.  In CellTemplate, the TextBlock is using DataGrid’s DataContext and is bound to the CustoemrID field of the Orders table.  In CellEditingTemplate, the ComboBox is using the Customer table as the Source for the ItemsSource but the DataContext is still the DataGrid for everything elese.  That means that SelectedValue’s binding to CustomerID is based on the CustomerID of the Orders table and that binding is the one that will update the source.

A third and a little more time consuming approach would be to subclass DataGridComboBoxColumn and add a property for the display.  If you take a look at the DataGridHyperlinkColumn it actually has a special API for something like this which is ContentBinding.  ContentBinding maps the content it is bound to what gets displayed as the link in the cells of that column.  However, there is still a DataFieldBinding which maps to the actual hyperlink that it represents. 

Here is a sample for the first two solutions.



Comments (23)

  1. pan says:

    I have really not much enthusiasm for these converter solutions. A combobox in a datagrid is used almost everywhere. It cannot be to discover each time such code constructs, also not for a subclassing solution.  We all heard about Rapid Application Development. In Windows Forms, we use for a combobox 4 properties: DataPropertyName, DataSource, DisplayMember and ValueMember. In WPF we need the same or something similar!

    (An even “more” Rapid Application Development was possible with Access 15 years ago…)

    So, since this is just a preview, I hope that the final version of the grid will have these improvements. Could you tell us, if the development goes in this direction?

    Thanks a lot


  2. As you might have heard, .NET Framework 3.5 SP1 and Visual Studio 2008 SP1 are out today! There are a

  3. I’m going to be dissecting and discussing the DataGrid visuals and how they are all assembled together

  4. Overview The DataGrid uses a set of DataGridColumns to describe how to display its data just like a GridView

  5. Peter,

    In the current implementation of DataGrid and ComboBox a conversion must take place to go from one table to another.  Because of that, the DataGrid cannot guess how to convert so the app developer must provide a custom implementation.  

  6. Hardik says:

    Hi Vincent,

    I am stuck with using comboBox in dataGrid  where my combobox should have list of images and it should be getting from code-behind page of xaml page. So, I have one method say "CablesImagesMethod" that returns System.Windows.Controls.Images.

    But, I wanna bind the selected value from combobox to "ImageStore" property of collection that is bind to dataGrid. Exactly, like your second example but in my case I need to use Image rather than "TextBlock" (I think so).

    so my code is like….


           <ObjectDataProvider x:Key="imageDataProvider" ObjectType="{x:Type local:CablesSegmentsPage}" MethodName="CablesImagesMethod" />

           <UI1:ImageStoreConverter x:Key="ImageConverter"/>





                   <Image Source="{Binding Path=ImageStore, Converter={StaticResource ImageConverter}}" Width="50" Height="25"/>





                   <ComboBox ItemsSource="{Binding Source={StaticResource imageDataProvider}}"

                             SelectedValue="{Binding Path=ImageStore, Converter={StaticResource ImageConverter}}" SelectedValuePath="ImageStore" Width="50" />  




    In result, it is displaying column as an image with converting and displaying correct image from "ImageStore" property of collection. But when I click on image, it becomes empty combobox and after when I select or click on another cell it goes back to image with displaying correct image.

    So, my question is why it is not displaying or getting anything in combobox?

    for testing purpose, I have one combobox outside the DataGrid and code for that is like…

    <ComboBox Grid.Row="1" ItemsSource="{Binding ElementName=m_CablesSegmentsPage, Path=CablesImages}"/>

    and it is getting all correct images and displaying.

    so , I tried using that way in binding ItemSource with elementName and Path, but still it doesn’t work for DataGrid.

    So, In conclusion, How can I populate a ComboBox inside DataGrid with collection of Images that is comming from a property (or method) of code-behind page?

  7. There have been several questions on the WPF CodePlex discussion list relating to styling rows and columns

  8. Hardik,

    Is your ImageConverter being called at all for the ComboBox binding?  Also, for the binding on the Image, the Mode should be OneWay.  I don’t think that would be the reason why the images are not showing up in the ComboBox though.  Could you also post a snippet of the class for the return value of the method CableImages.

  9. Hardik says:

    Hi Vincent,

    I have put that ImageConverter in ComboBox for try and error purpose, it don’t think so it does a metter, because I am not using any converter while binding with combobox outside the dataGrid and it displays the images.

    my class snippet is like..

    in Xaml page:

    <UserControl x:Class="MyNameSpace.CablesSegmentsPage"




    in code-behind page (C#)..

    namespace MyNameSpace


        public partial class CablesSegmentsPage


              public Collection<Image> CablesImagesMethod()


                           //code for getting images in cableImages………

    return cablesImages;




    give me some idea, if I am doing something wrong.

  10. Hardik,

    I did something along these lines and got it to work:



                               <ComboBox ItemsSource="{Binding Source={StaticResource ImageList}}"                                      

                                   SelectedItem="{Binding Path=Picture, Converter={StaticResource ImageConverter}, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">                                                           </ComboBox>



    public class ImageConverter : IValueConverter


           public object Convert(object value, Type targetType, object parameter, CultureInfo culture)


               return new Image { Source = new BitmapImage(new Uri("pack://application:,,,/" + (string)value)) };


           public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)


               Image image = value as Image;

               return (image.Source as BitmapImage).UriSource.AbsolutePath;



  11. Hardik says:

    Hi Vincent,

    Is it possible to send me your whole sample than it will be more clear for me?

    because i can’t figure out that how do you define StaticResource ImageList.

    Thanks in advance…

  12. Hardik says:

    Hi Vincent,

    I got my combobox working with exactly the same stuff i was doing before, but only problem was my method wasn’t static.

    thanks a lot…..

  13. Hardik says:

    Hi Vincent,

    I have one more questions, when I click on ComboBox, it is not remebering (Displaying) the currentItem.

    Is it a normal or something that I am not doing?


  14. Vitaly says:

    Here is one more solution without using Converter. The idea is to use ComboBox in CellTemplate with attribute IsEnabled="False":

    <dg:DataGridTemplateColumn Header="CustomerID (ContactName alias)">



               <ComboBox IsEnabled="False" ItemsSource="{Binding Source={StaticResource customerDataProvider}}" SelectedValue="{Binding Path=CustomerID}" SelectedValuePath="CustomerID" DisplayMemberPath="ContactName" />





               <ComboBox ItemsSource="{Binding Source={StaticResource customerDataProvider}}" SelectedValue="{Binding Path=CustomerID}" SelectedValuePath="CustomerID" DisplayMemberPath="ContactName" />




  15. Vitaly,

    That is a good solution and at the time of writing the post I didn’t think about that.  In fact, the DataGridComboBoxColumn has already been updated in the final release with a somewhat similar solution.  Thanks for your input!

  16. Hardik,

    I know it’s a pretty late reply, but are you having the same ComboBox issue with the v1 version?

  17. Sachet says:

    Can you please tell me how autocomplete and autosuggest feature can be added to the combobox column?

  18. Sachet,

    Try setting the EditingElementStyle in a DataGridComboBoxColumn,


                           <Style TargetType="ComboBox">

                               <Setter Property="IsEditable" Value="True" />

                           </Style>                    </dg:DataGridComboBoxColumn.EditingElementStyle>

  19. Ivan says:

    hi Vincent! Trying to work with dataGrid(DG). the aim is to get DGwith several columns/ the first column must be of combobox type.

    XAML is:

           <my:DataGrid xmlns:my="clr-namespace:Microsoft.Windows.Controls;assembly=WPFToolkit" Height="262.5" Margin="326.25,0,14,67.5" x:Name="ProgParamsDataGrid" VerticalAlignment="Bottom" Background="#FFEBE9ED" FontFamily="./Fonts#Tahoma" FontSize="11" d:IsStaticText="False" AutoGenerateColumns="False" CanUserReorderColumns="False" CanUserResizeColumns="False" CanUserSortColumns="False" FontWeight="Normal" HeadersVisibility="Column" ColumnHeaderHeight="40" CanUserResizeRows="False" SelectionUnit="Cell" SelectionMode="Single">


                   <my:DataGridComboBoxColumn CanUserReorder="False" CanUserResize="False" CanUserSort="False" Header="Тип стимуляции" Width="120" ItemsSource="{???}" SelectedItemBinding="{Binding Path=StimulationType}"/>

                   <my:DataGridTextColumn Header="Амплитуда,%" CanUserReorder="False" CanUserResize="False" CanUserSort="False" IsReadOnly="True" Width="75" Binding="{Binding Path=Amplitude}" />

                   <my:DataGridTextColumn Header="Частота (тр/bur), Гц" HeaderStringFormat="" CanUserReorder="False" CanUserResize="False" CanUserSort="False" IsReadOnly="True" Width="75" Binding="{Binding Path=FreqInTrayn_Burst}"/>

                   <my:DataGridTextColumn Header="Импульсов (тр/burst)" CanUserReorder="False" CanUserResize="False" Width="75" Binding="{Binding Path=ImpInTrayn_Burst}"/>

                   <my:DataGridTextColumn Header="Пауза, с" CanUserReorder="False" CanUserResize="False" Width="75" Binding="{Binding Path=Pause}"/>

                   <my:DataGridTextColumn Header="Количество трейнов" CanUserReorder="False" CanUserResize="False" MinWidth="8" Width="75" Binding="{Binding Path=CountTrayn}"/>

                   <my:DataGridTextColumn Header="Импульсов в burst" CanUserReorder="False" CanUserResize="False" Width="75" Binding="{Binding Path=ImpInBurst}"/>

                   <my:DataGridTextColumn Header="Частота в burst, Гц" CanUserReorder="False" CanUserResize="False" Width="75" Binding="{Binding Path=FreqInBurst}"/>



    everything is ok but:i dont know how to set item source binding – items must be token from the list<string> from the Window1.xaml.cs.

    I spent about a week but got no results. PLEASE, HELP ME. and if you can answer on inbush@rambler.ru

    Thank you. Ivan

  20. Danny van der Kraan says:

    Dear Vinsibal,

    First off, thank you very much for your blogs.

    I’ve got my app to work just like yours.

    – But what if we make from Order and Customer classes. And Order does not contain a CustomerID property, but an entire instance of a Customer class. So we have a observable collection of Order classes with a Customer property in each Order.

    – Next to that we have a seperate observable collection of Customer classes with all the customers in it.

    Just like in your example we display the Orders in a DataGrid and we make the Customer column a DataGridComboBoxColumn which displays all the Customers in edit mode, but displays the Customer.Name (for instance) in ‘normal’ display mode which currently is referenced by the Order in question.

    If I select a Customer from the list in the combobox I want it to update the Customer property of the Order. How do I do this?