XE3 Visual LiveBindings: Link a field to a lookup list

Posted by on in Blogs
A lookup list is used when the actual data values are not meaningful to users. A lookup list populates a list control with display values, instead of actual data values.

We can configure two TPrototypeBindSource components to represent a situation that calls for a lookup list. These steps differ from the previous post by using a Colors field in addition to a ColorsName field. The Colors field holds a numeric color value.

First, create the "DataSource".

  1. New VCL application

  2. Drop a TPrototypeBindSource on the form

  3. In the object inspector, set PrototypeBindSource1.RecordCount to 10

  4. Add a Colors field to the TPrototypeBindSource

Next, create the "FillDataSource"

  1. Drop a second TPrototypeBindSource on the form

  2. In the object inspector, rename to "PrototypeBindSourceFill"

  3. Add Colors and ColorsNames fields to the PrototypeBindSourceFill

  4. Uncheck "Shuffle" and "Repeat" to generate an ordered list of unique values

Drop a TListBox on the form

Choose the "View/LiveBindings designer" command to show the LiveBindings designer:

For clarity, rename PrototypeBindSourceFill fields to AColor and AColorName. Select each field in the LiveBindings designer and use the object inspector to type in a new name:

In order to create a lookup list, the "FillDataSource" must provide a "ValueField" and a "DisplayField". These two fields are used to build a dictionary which can be used to lookup a display value for each actual value.
In this example, AColor is the "ValueField" and AColorName is the "DisplayField". A numeric color value in AColor can be used to lookup a color name in AColorName.

Make three connections in the LiveBindings designer to create a lookup list:

  1. Connect "PrototypeBindSource1.Color1" to "ListBox1.SelectedText"

  2. Connect "PrototypeBindSourceFill.AColorName" to "ListBox1.ItemText".

  3. Connect "PrototypeBindSourceFill.AColor" to "ListBox1.LookupData".

ListBox1 is populated in the form designer:

"Darkgreen" is selected because the value of the "Colors1" field in the first record of PrototypeBindSource1 is paired with "Darkgreen" in PrototypeBindSourceFill.

Right click on PrototypeBindSource1 and choose "Add Navigator". Now the app is ready to run.

I've also added a TLabeledEdit and a TShape.

The TLabeledEdit shows the value of PrototypeBindSource1.Color1 as a number.

The TShape shows the value of PrototypeBindSource1.Color1 field as a color.

Here is the complete design:

The source for this sample is available here.  See LookupListBoxVCL.dpr.


  • Guest
    ChrisMitch Monday, 15 October 2012

    This looks very complex to set up visually. Is it not easier and clearer to set up this kind of thing in code?

  • Guest
    Jim Tierney Monday, 15 October 2012

    Maybe it seems complex because of the steps to create the data sources. In practice, you will probably already have some client datasets or other data sources.

    Once you have the data sources and a list control on the form, just make the three connections to create a lookup list.

    Here is equivalent code to create the lookup list:

    procedure TForm1.FormCreate(Sender: TObject);
      with TLinkFillControlToField.Create(Self) do
        Control := ListBox1;
        DataSource := PrototypeBindSource1;
        FieldName := 'Color1';
        FillDataSource := PrototypeBindSourceFill;
        FillValueFieldName := 'AColor';
        FillDisplayFieldName := 'AColorName';
        Track := True;
        Active := True;

  • Please login first in order for you to submit comments
  • Page :
  • 1

Check out more tips and tricks in this development video: