Using Radio Buttons

In this section:

How to:

Radio buttons enable end users to make a single choice among a group of options. They are best used for a static group of options that change rarely or not at all (for example, gender, or day of the week).

The contents of the list are determined dynamically at run time by one of the following:

You define the radio button contents using the List Source dialog box, described in List Source Dialog Box. You define how to store the value returned from the radio buttons using the Binding the Selection Result dialog box, described in Binding the Selection Result Dialog Box.


Top of page

x
Procedure: How to Place a Radio Button on Your Form
  1. Select the Radio button control in the Controls palette.
  2. Draw a rectangle on your form approximately where you want your radio buttons to be at approximately the size you want.
  3. (Optional, but recommended.) Give your radio buttons a more meaningful name than RadioButtonn.
  4. If necessary, readjust the size and placement of your radio buttons.
  5. Double-click the radio buttons or select the ListItems property to open the List Source dialog box. You use this dialog box to determine the items in your list.
  6. You have four options for defining the items in your radio buttons:
    • From the ACCEPT list of a data source field. Select From a variable and select the column in the list of variables. You will only see this option if the data source this procedure is using contains a field with an ACCEPT value.
  7. Click OK.
  8. If necessary, resize the radio button control on the form to display all of your values.
  9. Select the SelectedItem property to open the Binding the Selection Result dialog box. You use this dialog box to bind the end user's radio button choice to a data source stack column or variable.

    Caution: Do not bind SelectedItem to a data source stack that already contains data. This will replace the contents of the data source stack with the result of the selection.

  10. Select a data source stack column or variable. (You can create a data source stack or variable by clicking New data source stack or New variable. For more information, see How to Create a Data Source Stack Explicitly Using the Stack Editor or How to Create a Variable in a Procedure.)
  11. Determine whether to store the text or the value you entered in the List Source dialog box.
  12. Click OK.

Top of page

x
Syntax: How to Set the Value of a Radio Button Group Dynamically

If you want to set the value of a group of radio buttons dynamically, issue the following command

COMPUTE Formname.RadioButtonName.ListItems.FocIndex = n; 

where:

Formname

Is the name of the form the radio button control is placed on.

RadioButtonName

Is the name of the radio button control.

ListItems

Is the name of an internal data source stack that contains the values for the group of radio buttons.

You can also reset the values of all controls in a form to their initial values using the Winform Reset command. For more information, see How to Reset a Form.


Top of page

x
Procedure: How to Trigger an Action When an End User Selects an Item in a Radio Button Group
  1. Open the Event Handler editor.
  2. Select the radio button in the list of controls.
  3. Select the Change event from the list of events.
  4. Specify an event handler.

Top of page

x
Changing Radio Button Properties

When you select your radio buttons, you will see a list of radio button properties in the property sheet. Changing these properties will change what your radio buttons look like and what they do at run time.

Many of the styling properties can also be changed using a Cascading Style Sheet. For more information on Cascading Style Sheets, see Using Cascading Style Sheets.

Do you want...

Then use...

to change the contents of the radio buttons?

the ListItems property to open the List Source Dialog Box dialog box.

to change the name of the radio button group that identifies it to the procedure?

the (Name) Property property.

to assign the value selected by the end user to a variable?

the SelectedItem property to open the Binding the Selection Result Dialog Box dialog box.

to change the size or location of the radio buttons?

the Bottom Property, Left Property, Right Property, and Top Property properties.

a style sheet.

(You can also move or resize the radio button group directly in the form.)

to change the color of the radio buttons?

the BackColor Property property to determine the color of the box is.

the ForeColor Property property to determine the color of the text.

a style sheet.

to change the font in the radio buttons?

the Font Property property.

a style sheet.

to add a label to the radio buttons?

the Border Property property (set to anything but 0-None, and the BorderText Property property (assign a label).

to add a border to the radio buttons?

the Border Property property to determine whether you have a border.

the BorderColor Property property to determine the color of the border.

the BorderWidth Property property to determine the width of the border.

a style sheet.

to change the number of columns or rows displayed?

the Columns or Rows properties. For more information, see Determining the Layout of Your Radio Buttons.

Note: The size of the radio button group also determines how many rows or columns you see.

to make the radio buttons inactive or make them invisible?

the Enabled Property property to determine whether the radio buttons are active. (If the radio buttons are inactive, they will be grayed out and nothing will happen when the end user clicks them.)

the Visible Property property to determine whether the radio buttons are visible to the end user.

a style sheet.

to change what the cursor looks like when it is on top of the radio buttons?

the CursorPointer Property property.

a style sheet.

to display a tool tip when the cursor is on top of the radio buttons?

the ToolTipText Property property.

to assign a help topic to the radio button?

the Help property. For more information, see Assigning Help to Your Forms and Controls.

the end user to be able to tab to the radio buttons?

the Tabstop Property property.

to move the radio buttons to another layer?

the Layer property. For more information, see Layering Controls.

to control the display order of the radio buttons when more than one control is overlaid?

the ZIndex Property.

Note: IE7 or equivalent required.



x
Determining the Layout of Your Radio Buttons

There are three factors that determine the layout of the radio buttons in your radio button control:

The order in which the buttons are laid out is from top to bottom, and then left to right.

For example, for the following radio button control, Columns has been set to 2, Rows has been set to -1, and the size has been adjusted so that the columns are as balanced as possible.

radio button control example

If you are not careful, some of your radio buttons may not be visible, either because your control is not large enough to handle all of the radio buttons or Rows and Columns are set improperly.

For example, if you set Rows to 3 and Columns to 2 for this radio button control, you will only see six radio buttons, and Sunday will disappear.

To solve this problem, we recommend that if you set Rows or Columns to a positive number, you set the other property to -1 so that you won't accidentally lose any radio buttons.

You must also make sure that your control is large enough to display all of the radio buttons. The Form Editor displays the number of radio buttons that will be displayed at run time.

If your radio button control will have a variable number of radio buttons, we recommend that you consider using a list box control or combo box control instead, so that you can better control the layout of controls on your form.


WebFOCUS