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.

Complete the following steps:

Start with the project constructed in Tutorial 6: Defining Unbound Columns in a Bound Grid.
Add a C1TrueDBDropDown control (C1TrueDBDropDown1) to the form. The icon for the C1TrueDBDropDown looks like the following:
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 C1NWind.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.

Visual Studio adds the following code to the Load event of Form1 to fill the new dataset:

To write code in Visual Basic

Visual Basic	Copy Code
Me.CustTypeTableAdapter.Fill(Me.DsCustType.CustType)

To write code in C#

C#	Copy Code
this.CustTypeTableAdapter.Fill(this.DsCustType.CustType);

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

To write code in Visual Basic

Visual Basic	Copy Code
Me.C1TrueDBGrid1.Columns("CustType").DropDown = Me.C1TrueDBDropdown1

To write code in C#

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.

C#	Copy Code
this.c1TrueDBGrid1.Columns("CustType").DropDown = this.c1TrueDBDropdown1;

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 C1TrueDBDropDown control. If another cell in the grid is clicked, C1TrueDBDropDown will lose focus and become invisible.
Select any item in the C1TrueDBDropDown. The current cell in the grid will be updated with the selected item, and the C1TrueDBDropDown 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.

You've successfully completed attaching a drop-down control to a grid cell; this concludes tutorial 8