RadioGroup

A control intended for creating groups of Radio buttons.

Related sample:  All dhxForm inputs - DHTMLX Form

Related sample:  Radio buttons - DHTMLX Form

Related sample:  Blocks - DHTMLX Form

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"
• id - (string) the id of a control, auto-generated if not set
• name - (string) the name of a control
• options - (object) an object with options of a RadioGroup
• parent - (string) the id of the parent control
• 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)
• required - (boolean) defines whether a control is required
• gravity - (boolean) arranges form controls evenly throughout the container, depending on the direction of layout ("cols" or "rows"), true by default
• 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
• hidden - (boolean) defines whether a RadioGroup is hidden

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
  
  
• parent - (string) the id of the parent control
• 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) 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
• labelInline - (boolean) defines the position of a label: true - to set a label inline with a control
• help - (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
• getValue(): string - returns the current string value of a RadioGroup control
• setValue(value: string) - sets the value as a string for a RadioGroup control
• setConfig(config: object) - sets a new configuration for a RadioGroup control
• validate(): boolean - validates a RadioGroup control. Returns the result of validation: true, if a control is valid, otherwise - false

Setting configuration of RadioGroup control

It is possible to update the configuration of a RadioGroup control on the fly with the help of the setConfig() method of the object returned by the getItem() method.

To do this, you need to get access to the object of the control by using the getItem() method of Form and pass a new configuration object as a parameter of the setConfig() method:

form.getItem("RadioGroup_id").setConfig({
    required: true,
    options: {
        padding: "5px",
        rows:[{
            label: "Select 1",
            help: " Help information - 1",
            labelWidth: "120px",
            labelInline: true,
            value: "This selected button - 1",
            checked: true
            },
            {
            label: "Select 2",
            help: " Help information - 2",
            labelWidth: "120px",
            labelInline: true,
            value: "This selected button - 2"
        }]
    },
});

Related sample:  Set control configuration - DHTMLX Form

Back to top