How to Edit a Lookup Field using a ComboBox Control

The common task for almost any business application is to show user-friendly text instead of underlying data. If you need such lookup behavior, you usually should write code for handling substitutions or data relations. The C1ComboBox control has some advanced features to support this scenario with less coding.

For instance, suppose you have two related data tables like these:

Cities:

ID

Name

CountryID

Population

1

Shanghai

1

24,256,800

2

Karachi

2

23,500,000

3

Beijing

1

21,516,000

4

São Paulo

3

21,292,893

5

Dhaka

4

16,970,105

6

Delhi

5

16,787,941

Countries:

ID

Name

1

China

2

Pakistan

3

Brazil

4

Bangladesh

5

India

The Cities table keeps the information you need to show in your application, and the Countries table contains country details in a human-readable form. Your application should allow to edit the CountryID field of the Cities tables with the C1ComboBox control, because you and your customers would prefer to see and edit country names instead of ID numbers. Let's see what you should do to make it happen.

Setup C1ComboBox to show and edit lookup field

1. Bind C1ComboBox to the Cities.CountryID field

  // Bind C1ComboBox to the data field  
  c1ComboBox1.DataSource = bindingSourceCities;  
  c1ComboBox1.DataField = "CountryID";  

After this step you should be able to edit the CountryID field as a numeric value in the editor part of the C1ComboBox control.

2. Bind drop-down list to the Countries table

// Bind drop down list to countries lookup table  
c1ComboBox1.ItemsDataSource = bindingSourceCountries;  
c1ComboBox1.ItemsValueMember = "ID";  
c1ComboBox1.ItemsDisplayMember = "Name";  

Now you can select a country from drop down list, but value presentation is still numeric. If you change selected item from code or (as in attached sample) with the C1DBNavigator control, you will see that the text part of the C1ComboBox control shows numeric value instead of lookup text:

3. Convert value into text using the TranslateValue property.

In the 2016 v3 release, we added a new C1ComboBox.TranslateValue property. If you set it to True, it forces the C1ComboBox control to accept values of original data type and set control text using lookup values. Now our use case looks complete. Regardless of how you updated selected item, the C1ComboBox control always shows the correct lookup text:

// Translate value into text  
c1ComboBox1.TranslateValue = true;  

C1ComboBox displaying lookup field

Full code:

var data = new Data();  
bindingSourceCountries.DataSource = data;  
bindingSourceCountries.DataMember = "Countries";  
bindingSourceCities.DataSource = data;  
bindingSourceCities.DataMember = "Cities";  

// Bind drop down list to countries lookup table  
c1ComboBox1.ItemsDataSource = bindingSourceCountries;  
c1ComboBox1.ItemsValueMember = "ID";  
c1ComboBox1.ItemsDisplayMember = "Name";  

// Translate value into text  
// Put this block prior to binding value to a field  
c1ComboBox1.TranslateValue = true;  

// Bind C1ComboBox to the data field  
c1ComboBox1.DataSource = bindingSourceCities;  
c1ComboBox1.DataField = "CountryID";  

Download sample source code: ComboBoxLookup

Download another sample: ComboBoxTranslateValue sample