RadioGroup

From HTML5 Builder
Jump to: navigation, search

The RadioGroup component is a group of radio buttons which are mutually exclusive, that is, checking one of them would uncheck the rest.

Configuration

You can use the Items property to define the radio buttons in the components, and their labels.

Use ItemIndex to determine the radio button that will be selected by default. The index must be an integer; -1 to select no item by default, 0 for the first item, 1 for the second, etc.

Usage

Note: Replace # by the index of the target radio button, starting with 0.

Add an Item

From PHP, you can use the AddItem() method:

// Add an item with ‘two’ as the label, and specify ‘record5’ as its key.
$this->ComponentName->AddItem('two',null,"record5");

// Add an item with ‘two’ as the label, and specify ‘1’ as its key.
$this->ComponentName->AddItem('two',null,1);

From JavaScript:

var newItem = '\
<tr>\
    <td class="td_with_radio">\
        <input type="radio" id="ComponentName_#" name="ComponentName" value="#" />\
    </td>\
    <td class="td_with_span">\
        <span id="ComponentName_#_caption" onclick="return RadioGroupClick(document.forms[0].ComponentName, #);" />Item label</span>\
    </td>\
</tr>';
$("#ComponentName_table").html($("#ComponentName_table").html() + newItem);

Clear the Items

From PHP:

$this->ComponentName->Items = array();

From JavaScript:

$("#ComponentName_table").html('');

Get the Selected Item

From PHP:

$selectedItemIndex = $this->ComponentName->ItemIndex;
$selectedItemValue = $this->ComponentName->Items[$selectedItemIndex];

From JavaScript:

var selectedItem = $("#ComponentName_table :checked");

Set the Selected Item

From PHP:

$this->ComponentName->ItemIndex = #;

From JavaScript:

$("#ComponentName_#").prop("checked", true);

Client-side Features

DOM Elements

The component generates the following client-side DOM elements:

  • Wrapper (HTMLDivElement). Full web browser support. Access it with $("#ComponentName_outer").get()[0].
    • table (HTMLTableElement). Full web browser support. Access it with: $("#ComponentName_table").get()[0].
      • tr
        • td
          • Item 1 radio button (HTMLInputElement). Full web browser support. Access it with: $("#ComponentName_#").get()[0].
        • td
          • Item 1 label (HTMLLabelElement). Full web browser support. Access it with: $("label[for='ComponentName_#']").get()[0].

Client-side Events

Documented in the RPCL Reference.

Server-side Features

Properties, Methods and Events

Documented in the RPCL Reference.

See Also