RadioGroup

A control intended for creating groups of Radio buttons.

RadioGroup control

Related sample:  Form. All DhxForm Inputs

Related sample:  Form. Radio Buttons

Related sample:  Form. Blocks

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
  • hide() - hides 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
  • show() - shows a RadioGroup control on the page
  • validate(): boolean - validates a RadioGroup control. Returns the result of validation: true, if a control is valid, otherwise - false
Back to top