Custom Control - How to Draw Textbox on combobox

Question

I'm developing Win Form Application In my UI, I have to make ComboBox which should be dropdown only at first but after selecting any item, it should be partially editable.

EG Options are like,

Item Value - 10

Item Value - 20

Item Value - 30 etc.

Now, if Item Value - 20 is selected, number 20 should be editable (20-29 of course)

But here editing should be allowed only to change numeric value, not Text part. and also only numeric part should be selected to make it more user friendly.

If there may some internal properties in ComboBox to do so (which I guess will not be the case), it will be straight forward way.

Else to do so, I was thinking of having a TextBox drawn/placed on ComboCox accurately.

In this approach I'm not clear how to put TextBox so accurately that my custom user control looks like single unit and it don't overlap "text" part of combobox ?

Answer 1

I don't think the combo box control was intended to be used in this way as a simple validated text box seems to be a better control for you and the user if they must enter data. Granted, you could simply add all the numbers you need into the combo box, but the user would have to scroll to the number they wanted. If this list is large then it won't be very user friendly. The problem with the user typing something into the combo box is a matter of what to do when the user finishes typing. Even with suggestions on, when the user finishes typing something into the combo box, nothing happens until the user presses the Enter key.

If the user typed something that matches one of the items in the list then presses the Enter key, the combo boxes SelectedIndexChanged event will get fired. However, if the user types something that is NOT currently in the items list and presses the Enter key the SelectedIndexChanged event will NOT get fired.

Using the combo box KeyDown event, you could capture the “EnterKey” when the user presses the enter key in the combo box, as this is something the user would do anyway to select an existing item. So when the user types something that already exist in the list and presses the Enter key BOTH SelectedIndexChanged AND KeyDown events get fired in that order. If the user types something that is NOT in the items list, then only the KeyDown event gets fired.

Using the KeyDown event a check is made on what the selected value is. If the item typed by the user is in the items list then we can ignore these as they were handled in the previous call to SelectedIndexChanged . When the user typed something new, obviously you would possibly need to check the range of the values then simply call your method with the users input.

Again this seems hacky and IMHO, a validated text box would be easier on you and simple for the user especially if they have to type it anyway.

List<string> comboData;
public Form1() {
  InitializeComponent();
  comboData = new List<string>();
  for (int i = 1; i < 100; i++) {
    comboData.Add(i.ToString());
  }
  comboBox1.DataSource = comboData;
}
private void comboBox1_SelectedIndexChanged(object sender, EventArgs e) {
  MessageBox.Show("selection changed  " + comboBox1.Text);
}
private void comboBox1_KeyDown(object sender, KeyEventArgs e) {
  if (e.KeyCode == Keys.Enter) {
    if (comboData.Contains(comboBox1.Text.ToString())) {
      MessageBox.Show("User entered existing data: " + comboBox1.Text);
      // selection changed event has already handled this, however
      // if the user just pressed "enter" previously
      // then selection changed event wont get fired because the selection did not change
    }
    else {
      MessageBox.Show("User entered NEW data: " + comboBox1.Text);
      // we have data that is NOT currently in the list
      // so selection changed WONT get fired
      // need to call your method with user typed value
    }
  }
}
// make user user only enters numbers
private void comboBox1_KeyPress(object sender, KeyPressEventArgs e) {
  if (!Char.IsNumber(e.KeyChar)) {
    e.Handled = true;
  }
}

Note: I cannot tell what exactly what your combo items list contains. If there is text in the items like “Item Value –”... this seems unnecessary. In the code above I simply used the needed info ie.. the numbers in the combo box items list. Also I used a key press event to filter out unwanted alpha characters.

Hope this helps.