RadioButtonGroup

Deprecation Warning! The content below is only applicable for use within deprecated 1.x versions of CA Agile Central's App SDK. Use of the component(s) and/or code on this page is not supported. To develop custom apps within our current environments, please see App SDK 2.0 documentation.

The RadioButtonGroup component provides an easy way to create a stateful group of radio buttons.

radio group

RadioButtonGroup includes the following topics:

Create a group of radio buttons

First include the App SDK JavaScript:

<script type="text/javascript" src="/apps/[version]/sdk.js"></script>

Instantiate a new RadioButtonGroup:

var radiobuttonGroup = new rally.sdk.ui.basic.RadioButtonGroup(config);

The parameters for rally.sdk.ui.basic.RadioButtonGroup are as follows:

Parameter Description Example
config* A configuration object { radios: [{label: "Daisy", value: "isDaisy"}, {label: "Rose", value: "isRose"}, groupName: "flowers"]
  * = required parameter

The RadioButtonGroup configuration object supports the following properties:

Parameter Description
radios* An array of objects that consist of a label (text shown next to the radio) and value for each radio button.
For example:
[{label: "label 1", value: "1"},{label: "label2", value: "2"}]
groupName* A name used to group the set of radio buttons.
defaultValue Default value for the radio button (should be a value from one of the radio objects).
showLabel If showLabel is true then the labels will be shown (default = false).
labelPosition Specifiy where the label will be displayed. Valid positions: "before", "after" (default = "before").
alignment Determines how the radio buttons are aligned within the element. Valid values are: "vertical", "horizontal" (default = "horizontal").
  * = required parameter

Display a group of radio buttons

Once created, use the display method to display the radio button group:

radiobuttonGroup.display(domElement, onChanged);

Parameter Description Example
domElement* The element in which to display the radio button group. This may be either an element or an element ID. "radioButtonGroupSpan", document.getElementById("radioButtonGroupSpan")
onChanged A callback function that will be executed each time when a radio button in the group is checked. function onChanged(sender, eventArgs) {
   var radioButtonValue = eventArgs.value;
  var checked = eventArgs.checked;
}
  * = required parameter

Public methods

Method Name Parameters Description Example
display See above - See above
destroy - Removes the component from the app radiobuttonGroup.destroy();
getSelectedLabel - Returns the label for the selected radio button in the group var label = radiobuttonGroup.getSelectedLabel();
setValue value Selects the radio button specified radiobuttonGroup.setValue("1st radio value");
setComponentValue value Same as setValue; provides a consistent interface for setting the value of basic components radiobuttonGroup.setComponentValue("1st radio value");
getValue - Returns the value as specified in the constructor config var value = radiobuttonGroup.getValue();
getComponentValue - Same as getValue; provides a consistent interface for retrieving the value of basic components var value = radiobuttonGroup.getComponentValue();
getValidEvents - Returns an object containing the valid events for radio button var events = radiobuttonGroup.getValidEvents();

Events

Events are used to notify consumers of a component when actions occur. The following methods are provided in order to interact with this component's events:

Method Parameters Description Example
addEventListener eventName*, listener*, scope Registers the specified listener with the component's queue for the specified event and returns an object which can be used to remove the event listener later. The listener parameter should be a function with two parameters: 1) the component that fired the event; 2) an eventArgs object with properties specific to the event being fired. This function will be called by the component when the event occurs. If the optional scope parameter was specified the function will be called on that object (like scope.listener(sender, args);). function listener(sender, eventArgs) {
    //Respond to event
}
var eventObj = component.addEventListener
(eventName, listener);
removeEventListener eventObj* Unregisters the specified event from the component.
The eventObj parameter should be the return value of addEventListener() when the listener was originally registered.
var eventObj = component.addEventListener(...);
component.removeEventListener(eventObj);
getValidEvents - Returns an object with a property for each event name supported by the component. This is useful for passing as the first parameter to addEventListener(). var eventName = component.getValidEvents().onClick;
  * = required parameter

The RadioButtonGroup component supports the following events:

Event Name Description Event Arguments Example
onChange Fired when a radio button in the group is checked The eventArgs object passed to any event listeners contains the following properties:
value: The value of the radio button as specified in its constructor config
checked: true if the radio button is checked, false otherwise
function onRadioButtonChanged(radiobutton, eventArgs) {
   var value = eventArgs.value;
   var checked = eventArgs.checked;
}
radiobutton.addEventListener("onChange",
onRadioButtonChanged);

Example

Copy and paste the following into a CA Agile Central custom app page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Copyright (c) 2010-2011 CA Agile Central Software Development Corp. All rights reserved -->
<html>
<head>
  <title>RadioButtonGroup Example</title>
   <meta name="Name" content="Component Example: RadioButtonGroup" />
   <meta name="Version" content="2011.2" />
   <meta name="Vendor" content="CA Agile Central Software" />
   <script type="text/javascript" src="/apps/1.26/sdk.js"></script>
   <script type="text/javascript">

     function onLoad() {

      function onChanged(c, args) {
         console.log("Value " + args.value);
       }

         var config = {
           radios: [{label:"Rose", value:"isRose"},{label:"Daisy",value:"isDaisy"}],
        labelPosition: "after",
         groupName: "flowers"
       };

       var radioButtonGroup = new rally.sdk.ui.basic.RadioButtonGroup(config);
      radioButtonGroup.display("radioGroup", onChanged);

      }

     rally.addOnLoad(onLoad);

   </script>
</head>
<body>
   <div id="radioGroup"></div>
</body>
</html> ]]>

Feedback

Need more help? The CA Agile Central Community is your one-stop shop for self-service and support. To submit feedback or cases to CA Agile Central Support, find answers, and collaborate with others, please join us in the CA Agile Central Community.