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: [
        {
            type: "radioGroup",
            name: "radioGroup",
            disabled: false,
            required: true,
            options: {
                padding: "5px",
                rows:[{
                    type: "radioButton",
                    label: "Select 1",
                    help: "Help information - 1",
                    labelWidth: "120px",
                    labelInline: true,
                    value: "This selected button - 1",
                    checked: true
                },
                {
                    type: "radioButton",
                    label: "Select 2",
                    help: "Help information - 2",
                    labelWidth: "120px",
                    labelInline: true,
                    value: "This selected button - 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
width - (string) the width of a control
height - (string) the height of a 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
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
gravity - (boolean) arranges form controls evenly throughout the container, depending on the direction of layout ("cols" or "rows"), true by default

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
value - (string) the value of a radioButton
width - (string) the width of a control
height - (string) the height of a control
css - (string) adds style classes to a control
label - (string) specifies a label for a control
labelWidth - (string|number) sets the width of the label of 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: "right"|"bottom"
helpMessage - (string) adds a help message to a control
preMessage - (string) a message that contains instructions for interacting with the control
successMessage - (string) a message that appears in case of successful validation of the control value
errorMessage - (string) a message that appears in case of error during validation of the control value
gravity - (boolean) arranges form controls evenly throughout the container, depending on the direction of layout ("cols" or "rows"), true by default

Working with RadioGroup

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

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

var value = form.getItem("radioGroup_id").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
getValue(): string - returns the current string value of a RadioGroup control
isDisabled(): boolean - checks whether a RadioGroup control is disabled
setValue(value: string) - sets the value as a string for a RadioGroup control
validate(): boolean - validates a RadioGroup control. Returns the result of validation: true, if a control is valid, otherwise - false