In this tutorial, you will learn how to drop-down an arbitrary control from a grid cell. This example uses a ListBox control containing pre-defined input values in order to facilitate user data entry. The list will drop down whenever the user initiates editing, such as by clicking the current cell. You will also learn how to place a button in the cell which, when clicked, will cause the ListBox control to appear. You can drop-down any control from a grid cell using techniques similar to those described in this tutorial.

Complete the following steps:

1. Start with the project constructed in Tutorial 6: Defining Unbound Columns in a Bound Grid.
2. Add a ListBox control (ListBox1) to the form as shown in the figure.
   
3. Set the Visible property of ListBox1 to False.

Adding code to drop down a ListBox control

The CustType field in the second column (Column1) of the grid displays numeric values ranging from 1 through 5, which represent the following customer types:

• 1 = Prospective
• 2 = Normal
• 3 = Buyer
• 4 = Distributor
• 5 = Other

Drop down ListBox1, which will contain textual customer type descriptions, and allow users to double-click an item in order to enter the associated value into the grid.

1. Include the following code in the general declaration section of Form1. Adding these namespaces will simplify the code we will need to write later.

   To write code in Visual Basic

   Visual Basic	Copy Code
   Imports System.Data Imports System.Data.Oledb Imports System.IO Imports System.Collections

   To write code in C#

   C#	Copy Code
   using System.Data; using System.Data.Oledb; using System.IO; using System.Collections;

2. In the Load event of Form1, add the code to include the customer types to ListBox1. Also, place a button in the CustType column using the Button property. The Form1_Load event handler now looks like this:

   To write code in Visual Basic

   Visual Basic

   Copy Code

   Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load Me.ContactsTableAdapter.Fill(Me.DsContacts.Contacts) ' Add customer types to ListBox1. With Me.ListBox1 .Items.Add("Prospective") .Items.Add("Normal") .Items.Add("Buyer") .Items.Add("Distributor") .Items.Add("Other") .Visible = False End With ' Place a button in the CustType column. Me.C1TrueDBGrid1.Splits(0).DisplayColumns("CustType").Button = True End Sub

   To write code in C#

   C#

   Copy Code

   private void Form1_Load(System.object sender, System.EventArgs e) { this.ContactsTableAdapter.Fill(this.DsContacts.Contacts); // Add customer types to ListBox1. this.listBox1.Items.Add("Prospective"); this.listBox1.Items.Add("Normal"); this.listBox1.Items.Add("Buyer"); this.listBox1.Items.Add("Distributor"); this.listBox1.Items.Add("Other"); this.listBox1.Visible = false; // Place a button in the CustType column. this.c1TrueDBGrid1.Splits[0].DisplayColumns["CustType"].Button = true; }

3. If a cell in the CustType column becomes current, a button will be placed at the right edge of the cell. Clicking the button will trigger the grid's ButtonClick event. We will drop down ListBox1 whenever the button is clicked:

   To write code in Visual Basic

   Visual Basic

   Copy Code

   Private Sub C1TrueDBGrid1_ButtonClick(ByVal sender As Object, ByVal e As C1.Win.C1TrueDBGrid.ColEventArgs) Handles C1TrueDBGrid1.ButtonClick With ListBox1 .Left = Me.C1TrueDBGrid1.Left + Me.C1TrueDBGrid1.RecordSelectorWidth + Me.C1TrueDBGrid1.Splits(0).DisplayColumns(0).Width + Me.C1TrueDBGrid1.Splits(0).DisplayColumns(1).Width .Top = Me.C1TrueDBGrid1.Top + Me.C1TrueDBGrid1.RowTop(Me.C1TrueDBGrid1.Row) .Visible = True .Select() End With End Sub

   To write code in C#

   C#

   Copy Code

   private void c1TrueDBGrid1_ButtonClick(object sender, C1.Win.C1TrueDBGrid.ColEventArgs e) { this.listBox1.Left = this.c1TrueDBGrid1.Left + this.c1TrueDBGrid1.RecordSelectorWidth + this.c1TrueDBGrid1.Splits[0].DisplayColumns[0].Width + this.c1TrueDBGrid1.Splits[0].DisplayColumns[1].Width; this.listBox1.Top = this.c1TrueDBGrid1.Top + this.c1TrueDBGrid1.RowTop(this.c1TrueDBGrid1.Row); this.listBox1.Visible = true; this.listBox1.Select(); }

4. In the DoubleClick event of ListBox1, add the following code. When an item is selected in ListBox1, this code will copy its index to the proper column in C1TrueDBGrid1, then make ListBox1 invisible.

   To write code in Visual Basic

   Visual Basic	Copy Code
   Private Sub ListBox1_DoubleClick(ByVal sender As Object, ByVal e As System.EventArgs) Handles ListBox1.DoubleClick Me.C1TrueDBGrid1.Columns("CustType").Text = Me.ListBox1.SelectedIndex + 1 Me.ListBox1.Visible = False End Sub

   To write code in C#

   C#	Copy Code
   private void listBox1_DoubleClick(object sender, System.EventArgs e) { this.c1TrueDBGrid1.Columns["CustType"].Text = (this.listBox1.SelectedIndex + 1).ToString(); this.listBox1.Visible = false; }

5. Then in the Leave event of ListBox1, add the following code to make sure the listbox becomes invisible once the selection has been made:

   To write code in Visual Basic

   Visual Basic	Copy Code
   Private Sub ListBox1_Leave(ByVal sender As Object, ByVal e As System.EventArgs) Handles ListBox1.Leave Me.ListBox1.Visible = False End Sub

   To write code in C#

   C#	Copy Code
   private void listBox1_Leave(object sender, System.EventArgs e) { this.listBox1.Visible = false; }

6. Then in the Scroll event of C1TrueDBGrid1, add the following code to make sure the listbox becomes invisible once the grid is scrolled:

   To write code in Visual Basic

   Visual Basic	Copy Code
   Private Sub C1TrueDBGrid1_Scroll(ByVal sender As Object, ByVal e As C1.Win.C1TrueDBGrid.CancelEventArgs) Handles C1TrueDBGrid1.Scroll Me.ListBox1.Visible = False End Sub

   To write code in C#

   C#	Copy Code
   private void c1TrueDBGrid1_Scroll(object sender, C1.Win.C1TrueDBGrid.CancelEventArgs e) { this.listBox1.Visible = false; }

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 fire the ButtonClick event. ListBox1 will drop down at the right edge of the cell as shown in the following illustration.
  
• Use the mouse or the UP ARROW and DOWN ARROW keys to move the highlight bar of ListBox1. If another cell in the grid is clicked, ListBox1 will lose focus and become invisible.
• Double-click any item in ListBox1. The current cell in the grid will be updated with the selected item, and ListBox1 will disappear until editing is again initiated.
• 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 an arbitrary drop-down control to a grid cell; this concludes tutorial 9.