Token in Windows Forms ComboBox (SfComboBox)

27 Apr 20212 minutes to read

Token represents the selected item(s) in combobox. The selected items are displayed in rounded-polygon shape with close icon. This option also helps to select multiple items without using check box and remove the token at run time.

The EnableToken property determines whether the selected item(s) in the combobox should be displayed as token. And, the SelectedItems property holds the tokens collection.

sfComboBox1.EnableToken = true;
sfComboBox1.EnableToken = True

Token support enabled in SfComboBox

The important characteristics of the token support are as follows.

Searching

  • Items can be searched from the combobox by entering appropriate characters in the text area.

Adding

  • When an item is selected from the combobox, the item will be added as token in text area and removed from the drop-down area.

Removing

  • By clicking the remove icon, the appropriate item will be removed from the text area, and it will be added automatically back to the drop-down area.

AutoSizing

  • Text area height will be increased automatically based on the placement of the selected items.

Token appearance

The appearance of token can be customized using the TokenStyle property. It includes the background color, border color, foreground color, close button color, and font.

sfComboBox1.Style.TokenStyle.BackColor = Color.Aqua;
sfComboBox1.Style.TokenStyle.BorderColor = Color.Red;
sfComboBox1.Style.TokenStyle.ForeColor = Color.Black;
sfComboBox1.Style.TokenStyle.CloseButtonBackColor = Color.Black;
sfComboBox1.Style.TokenStyle.Font = new Font(“Arial”, 10F, FontStyle.Bold);
sfComboBox1.Style.TokenStyle.BackColor = Color.Aqua
sfComboBox1.Style.TokenStyle.BorderColor = Color.Red
sfComboBox1.Style.TokenStyle.ForeColor = Color.Black
sfComboBox1.Style.TokenStyle.CloseButtonBackColor = Color.Black
sfComboBox1.Style.TokenStyle.Font = New Font(“Arial”, 10F, FontStyle.Bold)

Customizing the TokenStyle

Keyboard access

  • Using the Down Arrow, Up Arrow, and Enter keys, item can be selected from the combobox.
  • Using the Backspace key, the last positioned token will be removed from the text area.
  • When the Esc key is pressed, the drop-down area will be closed if it has been opened already.