Example: Using cxSpinButton in combination with cxComboBox
- 2 minutes to read
This example demonstrates using a cxSpinButton in combination with a cxComboBox editor.
The combo box is filled with values that differ from each other by 10. Thus you can choose 10, 20, 30, etc. The associated spin button control is used to provide more precision for value editing. It enables end-users to increment of decrement the edited value by 1 by pressing the increment/decrement buttons. For instance, if you need to set the edited value to 22 you will need to choose the 20 item from the combo and then click the increment button of the spin button control twice. The fast navigation buttons will be used to change the edited value by 5.
Follow the steps below:
- Place a cxComboBox control onto the form. Its properties will be displayed within the Object Inspector window. Click the ellipsis button corresponding to the Properties.Items property. Enter values as shown in the image below. Click the OK button to save changes and exit the item collection editor.
- Place a cxSpinButton control on the form. Assign the combo box to its Associate property. The spin button will automatically be positioned at the left of the combo box. This also makes the spin button control the edit value of the combo box.
- Set the Properties.SpinButtons.ShowFastButtons to True to make the fast navigation buttons visible. The Properties.Increment and Properties.LargeIncrement properties must be set to 1 and 5 respectively. With such settings, clicking the up and down buttons will change the value of the associated combo box by 1. The fast navigation buttons will increment and decrement the value by 5.
- Run the application.
The images below illustrate how this combination of combo box and spin button works. First, select 20 from the combo box dropdown:
Pressing the up button will change the value by 1:
Fast navigation buttons change the edited value by 5:
