Represents a radio group control.

It is a control that consists of a group of radio options. Only one option can be selected at a time. The value of the selected option is stored as text in a data field that is automatically created when the control is instantiated. This data field can be linked to the control for data binding purposes.

This control provides a user-friendly interface for presenting a list of mutually exclusive choices to the user and capturing their selection.

Note

This control operates the same way on both edit and view pages. Refer to this documentation for guidance on its use on view pages as well.

Hierarchy

  • UpDataEditControl
    • RadioGroup

Accessors

  • get required(): boolean
  • Gets the required state of the radio group.

    Returns boolean

    Indicating whether the radio group is required.

    Example

    // Check if the radio group is required
    var ctrl = ix.api.dom.getControl("<ELEMENT-GUID>");
    console.log(ctrl.required);
  • set required(value): void
  • Sets whether the radio group requires a selection. If set to true, the user must choose one of the radio buttons in the group.

    Parameters

    • value: boolean

      true to set the radio group as required, false to set it as not required.

    Returns void

    Example

    // Set the radio group as required
    var ctrl = ix.api.dom.getControl("<ELEMENT-GUID>");
    ctrl.required = true;

    // Set the radio group as not required
    var ctrl = ix.api.dom.getControl("<ELEMENT-GUID>");
    ctrl.required = false;

Methods

  • Checks the validity of the control.

    Returns Promise<ValidationInfo>

    Example

    const validityResult = await ix.api.dom.getControl("<GUID>").checkValidity();

    // example of `validityResult` - field is required, but was not filled
    ValidationInfo {
    valStatus: false,
    valMessage: 'Please make a selection',
    valType: 'required'
    }
  • Disables all radio buttons in the group, preventing user interaction.

    Returns void

    Example

    // Disable the radio group
    var ctrl = ix.api.dom.getControl("<ELEMENT-GUID>");
    ctrl.disable();
  • Enables all radio buttons in the group, allowing user interaction.

    Returns void

    Example

    // Enable the radio group
    var ctrl = ix.api.dom.getControl("<ELEMENT-GUID>");
    ctrl.enable();
  • Retrieves all radio button elements within the group.

    Returns NodeListOf<HTMLInputElement>

    A list containing all radio elements in the group.

    Example

    // Get all radio elements
    ix.api.dom.getControl("<ELEMENT-GUID>").getRadioElements();
  • Retrieves the value of the currently selected radio button in the group.

    Returns string

    The value of the selected radio button, or undefined if no button is selected.

    Example

    // Get the value of the selected radio button
    var ctrl = ix.api.dom.getControl("<ELEMENT-GUID>")
    var value = ctrl.getValue();
    console.log(value);
  • Retrieves a list containing all values, including their title, value and checked state.

    Returns {
        checked: boolean;
        title: string;
        value: string;
    }[]

    Example

    // Get all values
    var ctrl = ix.api.dom.getControl("<ELEMENT-GUID>");
    var values = ctrl.getValues();

    // Possible returned array format:
    [
    { title: "Salami", value: "salami", checked: false },
    { title: "Olive", value: "olive", checked: true }
    ]
  • Checks whether the radio group is enabled.

    Returns boolean

    Indicating whether the radio group is enabled or not.

    Example

    // Check if the radio group is enabled
    var ctrl = ix.api.dom.getControl("<ELEMENT-GUID>");
    console.log(ctrl.isEnabled());
  • Sets the value of the radio group by selecting the radio button with the specified value. If the specified value does not exist among the radio buttons, all buttons are deselected.

    Optionally, triggers the change event based on the settings parameter.

    Parameters

    • value: string

      The value of the radio button to be selected.

    • Optional settings: {
          triggerOnchange: "disabled" | "strict" | "always";
      }

      Optional settings to control the triggering of the change event.

      • triggerOnchange: "disabled" | "strict" | "always"

    Returns void

    Example

    // Get the radio group
    var ctrl = ix.api.dom.getControl("<ELEMENT-GUID>");

    // Select the radio button with the value "olive" and trigger the `change` event
    ctrl.setValue('olive', {
    triggerOnchange: 'always'
    });