Loading

Cell bound combo box

The grid is very flexible and one component of that is the ability to bind a cell to a combo box for data lookup. Its surprisingly easy to set-up, once you know the rules. What I'm aiming for in this note is a simple list of people, their age in years and their title:

Our target application.

Its all about the data

Before we can get in to code, we need to understand the data we'll be displaying. In this case, the grid is to be bound to a pretty simple data source consisting of the persons name, their age in years and their title. As the title will be repeated in potentially millions of rows in a database, good practice demands that is has it's own table and that the two tables are linked using an id field. So, our two data sources will consist of:

public class PersonData
{
    public string Name { get; set; }
    public int Age { get; set; }
    public int TitleId { get; set;
}

public class TitlesFacade
{
    public int TitleId { get; set; }
    public string Title { get; set; }
}

Customising the grid

First job is to drop a grid on the form and fire up the designer. In there, we add three bound columns to each of the three fields in the PersonData class that we want to display in the grid:

The columns for the data grid

The only properties we need to set are the column name, column title and the FieldName of the field from the PersonData that we want to display. So we end up with columns bound to:

If we display our grid at this point, then we'll see the data for all three columns, but the TitleId column will contain the numeric id of the data.

What we need to do is put a lookup combo box in to the grid for the title column. We do that through the designer again. So fire up the designer and go to the Repository section. Once there, select the InPlace Editors option and add a LookupEdit control.

The lookup edit control

You don't need to set any properties here, but I strongly recommend you change the name of the control and set the null text value. The null text will be displayed when the data source does not tie up to a lookup value, so is a useful prompt to the user. Once you have the control defined, switch back to the columns view and assign it to the column we want to lookup; the TitleId in this case.

Attach the lookup control to the column

The data field remains bound to the PersonData data source, because that is where we want to read and write the data in the bound data source. However, we need to let the grid know how to handle the combo box, how to populate the contents, what to display and what the linkage is between the PersonData data source and the TitlesFacade datasource that we will bind to the combo box. Luckily, this is only a few lines of code:

titleLookup.DataSource = DataSources.GetTitles();
titleLookup.DisplayMember = "Title";
titleLookup.ValueMember = "TitleId";

titleLookup.Columns.Clear();
titleLookup.Columns.Add(new LookUpColumnInfo("Title"));

First thing is to bind our combo box to the datasource of titles. In this case, it's a generic list of TitlesFacade objects. Next, we tell the combo what data to display (The DisplayMember) and what data field to use as the value (The ValueMember). By setting the ValueMember, we define the linkage between the TitlesFacade and the TitleId that the grid is bound to. So, make sure they're the same data type!

By default, if we go with this code, the combo will display a drop-down consisting of all of the bound fields. In our case, a column of TitleId's and a column of Name's. That's not entirely pretty, so we can clean up this a bit by removing the default columns that the combo generated for us and adding a single column to be displayed. The name you specify in the LookUpColumnInfo constructor is the name of the field in the data source.

Two other properties you might want to consider are the ShowHeader and ShowFooter properties that control the header and footer of the drop down control. These are on by default, but can give a cleaner result when turned off:

Combo with the header and footer turned off