Tutorial 8 - Attaching a Drop-Down Control to a Grid Cell

In this tutorial, you will learn how to attach a multicolumn True DBDropDown control to a grid cell. Unlike the built-in combo demonstrated in Tutorial 7 - Displaying Translated Data with the Built-In Combo, the C1TrueDBDropDown control can be bound to a data source, which makes it ideal for data entry involving a secondary lookup table. The drop-down control appears whenever the user clicks a button within the current cell. This button appears automatically when the user gives focus to a column that has a drop-down control connected to it.

1. Start with the project constructed in Tutorial 6 - Defining Unbound Columns in a Bound Grid.

2. Add a C1TrueDBDropDown control (C1TrueDBDropDown1) to the form. The icon for the C1TrueDBDropDown looks like the following:

3. Go to the DataSource property and select Add Project Data Source from the drop-down. In the adapter’s Data Source Configuration Wizard, either select a connection to C1TDGBDemo.mdb or create a new connection to this database. On the Choose your database objects page of the wizard, select the TypeID and TypeDesc fields in the CustType table and type "DsCustType" into the DataSet name box, and then finish out the wizard.

4. Visual Studio adds the following code to the Load event of Form1 to filld the new dataset:

· Visual Basic

Me.CustTypeTableAdapter.Fill(Me.DsCustType.CustType)

· C#

this.CustTypeTableAdapter.Fill(this.DsCustType.CustType);

· Delphi

Self.CustTypeTableAdapter.Fill(Self.DsCustType.CustType);

5. Then again in the Load event of Form1, add the following code to set the C1TrueDBDropDown1 to the CustType column:

· Visual Basic

Me.C1TrueDBGrid1.Columns("CustType").DropDown = Me.C1TrueDBDropdown1

· C#

this.c1TrueDBGrid1.Columns("CustType").DropDown = this.c1TrueDBDropdown1;

· Delphi

Self.C1TrueDBGrid1.Columns['CustType'].DropDown := Self.C1TrueDBDropdown1;

6. In the Properties window set the DisplayMember property of the C1TrueDBDropDown1 to TypeID. This property informs the drop-down which column will be synchronized with the grid column that the drop-down is bound to.

Run the program and observe the following:

· C1TrueDBGrid1 displays data from the joined table as in Tutorial 6 - Defining Unbound Columns in a Bound Grid.

· Click a cell in the CustType column to make it the current cell as indicated by the highlight. A button will be displayed at the right edge of the cell. Click the button to display the True DBDropDown control as shown in the following figure.

· Use the UP ARROW and DOWN ARROW keys to move the highlight bar of True DBDropDown. If another cell in the grid is clicked, True DBDropDown will lose focus and become invisible.

· Select any item in True DBDropDown. The current cell in the grid will be updated with the selected item, and True DBDropDown will disappear until editing is initiated again.

· If the current cell is moved to another column, the button will disappear from the cell in the CustType column.

This concludes the tutorial.