RadioGroup

A control intended for creating groups of Radio buttons.

RadioGroup control

Adding RadioGroup

You can easily add a RadioGroup control during initialization of a form:

var form = new dhx.Form("form_container", { 
    rows: [
        {
            id: "radiogroup",
            name: "radiogroup",
            type: "radioGroup",
            required: true,
            label: "Radio Group",
            labelWidth: 140,
            labelPosition: "left",
            helpMessage: " Help information",
            value: "1",
            options: {
                rows: [
                    {
                        type: "radioButton",
                        text: "Select 1",
                        value: "1",
                    },
                    {
                        type: "radioButton",
                        text: "Select 2",
                        value: "2"
                    },
                ]
            }
        }
     ]
});

Attributes of RadioGroup

You can provide the following attributes in the configuration object of a RadioGroup:

type	(string) the type of a control, set it to "radioGroup"
name	(string) the name of a control
id	(string) the id of a control, auto-generated if not set
options	(object) an object with options of a RadioGroup. The object can contain the following attributes: width - (string\|number\|"content") the width of a RadioGroup height - (string\|number\|"content") the height of a RadioGroup padding - (string\|number) sets padding between a cell and a border of a RadioGroup css - (string) adds style classes to a RadioGroup rows - (array) arranges radio buttons inside the RadioGroup control vertically cols - (array) arranges radio buttons inside the RadioGroup control horizontally
value	(string) the initial value of a RadioGroup. The option has a higher priority than the checked attribute of a RadioButton
width	(string\|number\|"content") the width of a control
height	(string\|number\|"content") the height of a control
padding	(string\|number) sets padding between a cell and a border of a RadioGroup control
css	(string) adds style classes to a control
disabled	(boolean) defines whether a control is enabled (false) or disabled (true)
hidden	(boolean) defines whether a RadioGroup is hidden
required	(boolean) defines whether a control is required
label	(string) specifies a label for a control
hiddenLabel	(boolean) invisible label that will be used to identify the input on the server side
labelPosition	(string) defines the position of a label: "left"\|"top"
labelWidth	(string\|number) sets the width of the label of a control
helpMessage	(string) adds a help message to a control
preMessage	(string) a message that contains instructions for interacting with the control, applied for all radio buttons in a group
successMessage	(string) a message that appears in case of successful validation of the control value, applied for all radio buttons in a group
errorMessage	(string) a message that appears in case of error during validation of the control value, applied for all radio buttons in a group

Attributes of RadioButton

You can provide the following attributes in the configuration object of a radio button:

type	(string) the type of a control, set it to "radioButton"
id	(string) the id of a control, auto-generated if not set
checked	(boolean) defines the initial state of a radio button, only one radio button can be checked at a time
hidden	(boolean) defines whether a radio button is hidden
value	(string) mandatory, the value of a radioButton
text	(string) the text label of a radio button
width	(string\|number\|"content") the width of a control
height	(string\|number\|"content") the height of a control
padding	(string\|number) sets padding between a cell and a border of a radio button
css	(string) adds style classes to a control

Working with RadioGroup

You can manipulate a RadioGroup control by using methods (or events) of the object returned by the getItem() method.

For example, you can get the value of the control:

var value = form.getItem("radiogroup").getValue();

List of the control methods:

clear	clears a value of a RadioGroup control
clearValidate	clears validation of a RadioGroup control
disable	disables a RadioGroup control on a page
enable	enables a disabled RadioGroup control
focus	sets focus to the radio button of the RadioGroup control by its id
getProperties	returns an object with the available configuration attributes of the control
getValue	returns the current value of a RadioGroup control
hide	hides a RadioGroup control
isDisabled	checks whether a RadioGroup control is disabled
isVisible	checks whether a RadioGroup control is visible on the page
setProperties	allows changing available configuration attributes of the control dynamically
setValue	sets the value for a RadioGroup control
show	shows a RadioGroup control on the page
validate	validates a RadioGroup control

List of the control events:

afterChangeProperties	fires after configuration attributes of the control have been changed dynamically
afterHide	fires after a control is hidden
afterShow	fires after a control is shown
afterValidate	fires after the control value is validated
beforeChangeProperties	fires before configuration attributes of the control are changed dynamically
beforeHide	fires before a control is hidden
beforeShow	fires before a control is shown
beforeValidate	fires before the control value is validated
change	fires on changing the value of a control