Attach combo box inside Datagridview on CellClick of Datagridview.

Step 1: Add Window form and drag and drop Datagridview from tool box into form.

Window form

Step 2: Create data for binding Datagridview and combo boxes.

Suppose in our case, we need two combo boxes, “Description” and “PaidWith”

So we need three data tables, one for the “Description” combo box, the second for “PaidWith” combobox, and we need a third table for binding Datagridview.

  1. /// <summary>
  2. /// Get datatable of description.
  3. /// </summary>
  4. /// <returns></returns>
  5. private DataTable GetDescriptionTable()
  6. {
  7. DataTable l_dtDescription = new DataTable();
  8. l_dtDescription.Columns.Add("Description", typeof(string));
  9. l_dtDescription.Columns.Add("Type", typeof(string));
  11. l_dtDescription.Rows.Add("Lunch", "Expense");
  12. l_dtDescription.Rows.Add("Dinner", "Expense");
  13. l_dtDescription.Rows.Add("Breakfast", "Expense");
  14. l_dtDescription.Rows.Add("Designing", "Service");
  15. l_dtDescription.Rows.Add("Drawing", "Service");
  16. l_dtDescription.Rows.Add("Paper", "Material");
  17. l_dtDescription.Rows.Add("DrawingBoard", "Material");
  19. return l_dtDescription;
  20. }
  22. /// <summary>
  23. /// Get datatable of PaidWIth.
  24. /// </summary>
  25. /// <returns></returns>
  26. private DataTable GetPaidWithTable()
  27. {
  28. DataTable l_dtPaidwith = new DataTable();
  29. l_dtPaidwith.Columns.Add("PaidWith", typeof(string));
  30. l_dtPaidwith.Columns.Add("Code", typeof(string));
  32. l_dtPaidwith.Rows.Add("CreditCard", "CC");
  33. l_dtPaidwith.Rows.Add("DebitCard", "DC");
  35. return l_dtPaidwith;
  36. }
  38. /// <summary>
  39. /// Get the data for grid.
  40. /// </summary>
  41. /// <returns></returns>
  42. private DataTable GetGridTable()
  43. {
  44. DataTable l_dtGridTable = new DataTable();
  45. l_dtGridTable.Columns.Add("PaidWith", typeof(string));
  46. l_dtGridTable.Columns.Add("Description", typeof(string));
  48. l_dtGridTable.Rows.Add("CreditCard", "Drawing");
  50. return l_dtGridTable;
  51. }
Step 3: Bind DataGridView with datatable.
  1. {
  2. dgv.DataSource = GetGridTable();
  3. }
Now after we have done this code section, if we run the application, it will look like this,

table

Now we need combobox, when the user clicks over the cell of Datagridview.

Step 4: Add combo box in Datagridview cell on cellClick event.
  1. private void dgv_CellClick(object sender, DataGridViewCellEventArgs e)
  2. {
  3. if (e.ColumnIndex > -1)
  4. {
  5. // Bind grid cell with combobox and than bind combobox with datasource.
  6. DataGridViewComboBoxCell l_objGridDropbox = new DataGridViewComboBoxCell();
  8. // Check the column cell, in which it click.
  9. if (dgv.Columns[e.ColumnIndex].Name.Contains("Description"))
  10. {
  11. // On click of datagridview cell, attched combobox with this click cell of datagridview
  12. dgv[e.ColumnIndex, e.RowIndex] = l_objGridDropbox;
  13. l_objGridDropbox.DataSource = GetDescriptionTable(); // Bind combobox with datasource.
  14. l_objGridDropbox.ValueMember = "Description";
  15. l_objGridDropbox.DisplayMember = "Description";
  17. }
  19. if (dgv.Columns[e.ColumnIndex].Name.Contains("PaidWith"))
  20. {
  21. dgv[e.ColumnIndex, e.RowIndex] = l_objGridDropbox;
  22. l_objGridDropbox.DataSource = GetPaidWithTable();
  23. l_objGridDropbox.ValueMember = "PaidWith";
  24. l_objGridDropbox.DisplayMember = "PaidWith";
  25. }
  27. }
  29. }
So if we run our application and click over Datagridview cell, this above code will attach the combo box with this clicked cell and it will look like this.

list

Now in the next article we will learn,
  1. How to get selected values of combo box from datagridview.
  2. How over the datagridview cell the user needs to do three clicks for selecting value

One click will bring the combo box into cell, the second click will drop the list of combo boxes, and in the third click the user will be able to select the values but in the next article we will do it in two clicks.