CLASS: RadioButtonEditor

SUPER CLASS: Editor

Subclasses

No subclasses found

Synopsis

This widget allows a user to select from a number of radioButton options, where each radioButton has the same radioGroup property. For radioButtonEditors who share the same radioGroup property, calling getDataValue() on any editor in the radioGroup returns the same value.

To create a group of radio buttons, drag an editor widget onto the page for each radio button you want. Change the value of the display property to RadioButton.

When you set displayType to RadioButton, the following properties are important to understand:

• checkedValue: the value returned by this editor when the radio button is checked
• dataValue: returns the dataValue for just this one editor widget (normally, this is not used - use groupValue instead)
• emptyValue*: the value returned by this editor when the radio button is not checked (only the emptyValue of the first editor is used)
• groupValue: returns the checkedValue for the currently selected radio button in the group (or the emptyValue of the first editor in the group if none of the editors are selected).

Each radioButton has a radioGroup property that allows you to assign a group of radioButtons to the same subgroup.

The following editor properties are available for the RadioButton Editor:

• dataType: the data type for the RadioButton selection value. The data type for this value can be a string, a boolean, or a number.
• radioGroup: type in a group name for this radio button. This will create a sub-group of radio buttons. All radio buttons with the same radioGroup name wil belong to this sub-group.
• required: if checked (true) the value cannot be null.
• showMessages: if checked (true) this Editor widget diplays the promp and invalidMessage messages.
• startChecked: if checked (true) this radio button appears selected by default. This is also how you can set the default value for a group of radioButton widgets.

Full Description

Properties

RadioButtonEditor.border

described in Control

Sets the border-width in pixels for your widget. Enter a single value like 5 to have a 5 px border around the widget. To have borders with different widths, enter a comma-separated list of pixel values like this:

border-top, border-right, border-bottom, border-left

For example, entering

10, 0, 5, 1

Will result in a border that is 10px wide on top, 0px wide on the right, 5px wide on the bottom and 1px wide on the left.

Use within the javascript editor

this.<WidgetID>.setBorder("5,0,10,15")

RadioButtonEditor.borderColor

described in Control

Enter a border color for your widget; rgb and hex values are accepted: rgb(0,255,0) and #00FF00 are both valid entries.

You can also enter css color names, including black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white.

Use within the javascript editor

this.<WidgetID>.setBorderColor("rgb(0,255,0)");       
this.panel1.setBorderColor("#00FF00");
main.editor2.setBorderColor("purple");

RadioButtonEditor.caption

described in Editor

The caption is the text that the end user sees next to your edit control. You can bind this to a variety of values including static values (just type some text into the caption text box), fields of text received from a database or web service, or even tie it to some other widget.

Use within the javascript editor

this.<EditorName>.setCaption("This is my new caption")

RadioButtonEditor.captionAlign

described in Editor

The caption for your widget can be left, center or right aligned.

RadioButtonEditor.captionPosition

described in Editor

This property determines where your caption appears with respect to the edit field. It is up to you to insure that there is sufficient height or width for the caption to fit in the selected position.

RadioButtonEditor.captionSize

described in Editor

The editor widget is actually a container consisting of a label element and an edit element. This container follows standard wavemaker studio width rules for laying out its contained elements. So if your caption/label has a width of 30%, then the edit element gets a width of 70%. If the caption width is 30px, then the edit element is parentWidth - 30px.

RadioButtonEditor.dataValue

This property should not be used for radioButton widgets. Use the groupValue property instead.

RadioButtonEditor.display

described in Editor

Set this property to determine what kind of editor this will be. Options include

• TextField
• TextArea
• Checkbox
• Radio button
• Date
• Time
• Select (pulldown)
• Number
• Currency
• Lookup
• Slider

RadioButtonEditor.emptyValue

described in Editor

This property specifies the dataValue to be returned by the editor if the user does not enter any value (e.g., the null value to return from the getDataValue() function call).

• null: calling getDataValue() returns null if there is no value set for this editor
• emptyString: calling getDataValue() returns "" if there is no value set for this editor
• false: call to getValue returns false if there is no value set for this editor
• unset: calling getDataValue() returns no value if there is no value set for this editor (not particularly useful)

Use within the javascript editor

// Check if widget has been set
if (this.<WidgetID>.getDataValue() == null) {
   alert("You must enter a value");
}

RadioButtonEditor.groupValue

This property returns the checkedValue for the currently selected radio button in the group (or the emptyValue of the first editor in the group if none of the editors are selected). This property should be used instead of dataValue for radioButton widgets.

Use within the javascript editor

// All editors with the same radioGroup property 
// will return the same groupValue
this.radioButtonEditor2.getGroupValue()

RadioButtonEditor.height

described in Control

The height of your widget can be specified in px or % (i.e 50px, 75%).

You can have a column of widgets that combined are more than 100% width; components will be allocated space based on the ratio of sizes (a 80% height widget gets twice as much space as a 40% widget).

Use within the javascript editor

this.<WidgetID>.setHeight("50%");  
this.label1.setHeight("40px");

RadioButtonEditor.margin

described in Control

Sets the margin in pixels for your widget. The margin for an object is outside of its border (the padding is inside the border).

Enter a single value like 5 to have a 5 px margin around the widget. To have margins with different widths, enter a comma-separated list of pixel values like this:

margin-top, margin-right, margin-bottom, margin-left

For example, entering

10, 0, 5, 1

Will result in a margin that is 10px wide on top, 0px wide on the right, 5px wide on the bottom and 1px wide on the left.

Use within the javascript editor

this.<WidgetID>.setMargin("5,0,10,15")

RadioButtonEditor.name

described in Component

The name is a unique identifier for your widget. Each page element and component must be uniquely identified. WaveMaker automatically renames any non-unique element.

The name makes it easy

1. Find the component in a bind dialog box
2. Find the component in your model tree
3. Reference the component in javascript

Use within the javascript editor

this.<UniqueID>.setShowing(true)

RadioButtonEditor.onblur

described in Editor

Specifies what kind of action to take when the user focus leaves this editor (e.g., when the user presses enter or tab or clicks on a different field with the mouse).

This event is useful for performing custom validation on an editor.

RadioButtonEditor.onchange

described in Editor

Specifies what kind of action to take when the dataValue of this editor changes. Depending on the changeOnEnter and changeOnKey properties, this event could be called with every keystroke or only when the user is done entering date.

The types of actions to take can include:

• Javascript: creates a new Javascript function that will be called when this event occurs.
• New Service: creates a new service variable to call when this event occurs, for example to trigger a new database query.
• New Navigation: creates a new navigation variable to call when this event occurs, for example to navigate to a new page or layer.
• LiveVariable: refreshes a LiveVariable when this event occurs, for example by re-executing a query to fetch all customer data.

RadioButtonEditor.onfocus

described in Editor

Specifies what kind of action to take when the user focus changes to this editor (e.g., when the cursor enters the editor).

The types of actions to take can include:

• Javascript: creates a new Javascript function that will be called when this event occurs.
• New Service: creates a new service variable to call when this event occurs, for example to trigger a new database query.
• New Navigation: creates a new navigation variable to call when this event occurs, for example to navigate to a new page or layer.
• LiveVariable: refreshes a LiveVariable when this event occurs, for example by re-executing a query to fetch all customer data.

RadioButtonEditor.padding

described in Control

Sets the padding in pixels for your widget. The padding for an object is inside of its border (the margin is outside the border).

Enter a single value like 5 to have a 5 px padding around the widget. To have padding with different widths, enter a comma-separated list of pixel values like this:

padding-top, padding-right, padding-bottom, padding-left

For example, entering

10, 0, 5, 1

Will result in padding that is 10px wide on top, 0px wide on the right, 5px wide on the bottom and 1px wide on the left.

Use within the javascript editor

this.<WidgetID>.setPadding("5,0,10,15")

RadioButtonEditor.readonly

described in Editor

You can make this edit widget read only to prevent the user from changing values. There are two main ways of using this:

Checkbox + javascript

You can use the checkbox to set its initial state and use javascript to change that later on with

this.<EditorName>.setReadonly(true);

Bind

You can use the bind dialog to enable this widget only when certain conditions are met. For example, you can bind your edit widget to a DataGrid's emptySelection property to make this editor only editable if something is selected in your grid.

RadioButtonEditor.showing

described in Control

Showing determines whether or not a component is visible. A page element that is not showing has its css display style set to none; it is still a part of the DOM model of the page, but no longer affects the layout of other components.

Uncheck the checkbox to make this widget invisible. A widget that is not showing can still be selected by navigating to that widget in the model tree and clicking it.

Use within the javascript editor

this.<UniqueID>.setShowing(true)

RadioButtonEditor.singleLine

described in Editor

Your edit widget is a container containing a label element and an edit element. singleLine indicates whether your label element displays its text on a single line or is allowed to wrap its text to the next line.

This property has no effect on how the edit widget looks or works, only the label.

Making a label wrap around does NOT gaurentee it will have enough height to show the extra lines; you must set the height of the edit widget to be high enough to show all lines.

RadioButtonEditor.width

described in Control

The width of your widget can be specified in px or % (i.e 50px, 75%).

You can have a row of widgets that combined are more than 100% width; components will be allocated space based on the ratio of sizes (a 80% width widget gets twice as much space as a 40% widget; they will fit in the designated space even though the sum is 120%).

Use within the javascript editor

this.<WidgetID>.setWidth("80px");