How to Add ComboBox to a Grid Cell in FlexGrid for WPF and WinUI

One of the frequently asked questions about FlexGrid control is how to add ComboBox to a grid cell. FlexGrid features a special class that allows you to do this automatically.

If you haven't read the documentation, you'll probably search for ComboBoxColumn first... but FlexGrid doesn't have one. Some of our customers use ComboBox in CellTemplate and CellEditingTemplate, which should work, but for switching cell into edit mode, and then opening the drop-down, the end-user will have to do one extra mouse click.

Use the ColumnValueConverter Class

To make it all smooth and easy to implement, FlexGrid provides the special ColumnValueConverter class. If you initialize ColumnValueConverter with some data and use it as ValueConverter for the FlexGrid column, FlexGrid automatically creates ComboBoxes in the column. At runtime it looks like this (the same code and behaviour on WPF, UWP and older XAML platforms):

FlexGrid ComboBox

Let's look at the XAML and code. The XAML is very simple, as this approach doesn't require any custom data templates:

<Grid>  
    <c1:C1FlexGrid x:Name="grid" AllowAddNew="True" HorizontalAlignment="Stretch" />  
</Grid>  

The underlying data are very simple as well. Class Customer has the property Company, which keeps the company ID number. All information about companies is handled by the Company class:

public class Customer  
{  
    public Customer()  
    {  
        Id = Guid.NewGuid();  
    }  
    [System.ComponentModel.DataAnnotations.Display(AutoGenerateField = false)]  
    public Guid Id  
    {  
        get; set;  
    }  
    public string FirstName  
    {  
        get; set;  
    }  
    public string LastName  
    {  
        get; set;  
    }  
    public int Company  
    {  
        get; set;  
    }  
}  
public class Company  
{  
    public int Id  
    {  
        get; set;  
    }  
    public string Description  
    {  
        get; set;  
    }  
}  

In our application we want to show customers in the FlexGrid control; hide the ID column; and show company names, not ID, in a drop-down list. Hiding columns is easy if you can use data annotations in your business objects. DisplayAttribute (see code above) does the trick.

Let's see what else we should do to populate grid and tell it exactly what to show in the Company column:

public MainWindow()  
{  
    InitializeComponent();  
    // create list of customers  
    List<Customer> customers = new List<Customer>();  
    customers.Add(new Customer() { FirstName = "John", LastName = "Penn", Company = 2 });  
    // fill list of companies  
    List<Company> list = new List<Company>();  
    for (int i = 0; i < 10; i++)  
    {  
       list.Add(new Company() { Id = i, Description = "Company " + (i + 1).ToString() });  
    }  
    // set grid's ItemsSource to list of customers (you can also do this via DataContext and binding)  
    this.grid.ItemsSource = customers;  
    // create ColumnValueConverter from list of companies with ValuePath set to 'Id' and DisplayMemberPath set to 'Description'  
    grid.Columns[2].ValueConverter = new ColumnValueConverter(list, "Id", "Description");  
    // adjust column width so that company names fit better  
    grid.Columns[2].MinWidth = 200;  
}  

That's it. Code and the XAML above is a full copy from a working application. The only difference between WPF and UWP applications is in the FlexGrid namespaces (C1.WPF.FlexGrid and C1.XAML.FlexGrid).