Radiogroup

From Documentation

Radiogroup

Employment/Purpose

Used to group multiple radio buttons. In one radiogroup. Only one radio button may be selected at a time.

Example

ZKComRef radio.png

<window title="Radiobox &amp; Radio Demo" width="200px" border="normal">
    <vbox>
        <radiogroup onCheck="fruit.value = self.selectedItem.label">
            <radio label="Apple" />
            <radio label="Orange" />
            <radio label="Banana" />
        </radiogroup>
        You have selected :
        <label id="fruit" style="color:red" />
    </vbox>
</window>

Note: To support the versatile layout, a radio group accepts any kind of children , including Radio. On the other hand, the parent of a radio, if any, must be a radio group.

Radiogroup as an Ancestor of Radio

ZK groups radio components into the same radio group if the share the same ancestor, not just direct parent. It allows a more sophisticated layout. For example,

<radiogroup>
  <vlayout>
    <hlayout>
      <radio label="radio 1"/>
      <radio label="radio 2"/>
      <radio label="radio 3"/>
	</hlayout>
    <hlayout>
      <radio label="radio 4"/>
      <radio label="radio 5"/>
      <radio label="radio 6"/>
	</hlayout>
  </vlayout>
</radiogroup>

A Row of a Grid as a Radio Group

[since 5.0.4]

Sometimes it is not possible to make the radiogroup component as an ancestor of all radio components. For example, each row of a grid might be an independent group. To solve this, you have to assign the radiogroup component to the radio component explicitly by the use of Radio.setRadiogroup(String) or Radio.setRadiogroup(Radiogroup).

ZKComRef Radiogroup Grid.png

<zk>
  <radiogroup id="popular"/>
  <radiogroup id="fun"/>
  <grid>
    <columns>
      <column label="Question"/>
      <column label="Option 1"/>
      <column label="Option 2"/>
      <column label="Option 3"/>
      <column label="Comment"/>
    </columns>
    <rows>
      <row>
        Most popular
        <radio label="Java" radiogroup="popular"/>
        <radio label="Groovy" radiogroup="popular"/>
        <radio label="C#" radiogroup="popular"/>
        <textbox/>
      </row>
      <row>
        Most fun
        <radio label="Open Source" radiogroup="fun"/>
        <radio label="Social Networking" radiogroup="fun"/>
        <radio label="Searching" radiogroup="fun"/>
        <textbox/>
      </row>
    </rows>
  </grid>
</zk>

Supported Events

Name
Event Type
None None

Supported Children

*ALL

Use Cases

Version Description Example Location
5.0 Radiogroup and selection http://www.zkoss.org/forum/listComment/12148
5.0 Radiogroup, data binding and TypeConverter http://www.zkoss.org/forum/listComment/7011

Version History

Last Update : 2011/07/29


Version Date Content
5.0.4 August 2010 Allow a radio component associated with a non-ancestor radiogroup.



Last Update : 2011/07/29

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.