Element: <oj-optgroup>

Oracle® JavaScript Extension Toolkit (JET)
4.2.0

E91398-01

QuickNav

Attributes

PREVIEW: This is a preview API. Preview APIs are production quality, but can be changed on a major version without a deprecation path.

Version:
  • 4.2.0
Since:
  • 4.0.0

JET Custom Elements

JET components are implemented as custom HTML elements. A detailed description of working with these elements can be found in: JET Custom Element Usage.

JET Optgroup

The oj-optgroup element is used to group oj-option elements.

For example:


<oj-select-one>
  <oj-optgroup label="group1 label">
    <oj-option value="option 1">option 1</oj-option>
    <oj-option value="option 2">option 2</oj-option>
  </oj-optgroup>
  <oj-optgroup label="group2 label">
    <oj-option value="option 3">option 3</oj-option>
    <oj-option value="option 4">option 4</oj-option>
  </oj-optgroup>
</oj-select-one> 

Note: Application logic should not interact with the component's properties or invoke its methods until the BusyContext indicates that the component is ready for interaction.

Slots

JET elements can have up to two types of child content:

  • Any child element with a slot attribute will be moved into that named slot, e.g. <span slot='startIcon'>...</span>.
  • Any child element lacking a slot attribute will be moved to the default slot, also known as a regular child. This is documented under the "Default" heading below.

Default

The oj-optgroup element accepts oj-options as children. See the oj-option doc for details about accepted children and slots.

Example

Initialize the oj-optgroup with child content specified:

<oj-optgroup>
  <oj-option value="option1">Option label</oj-option>
</oj-optgroup>

Attributes

disabled :boolean

Disables the oj-optgroup if set to true.

Default Value:
  • false
Names
Item Name
Property disabled
Property change event disabledChanged
Property change listener attribute (must be of type function) on-disabled-changed
Examples

Initialize the oj-optgroup with the disabled attribute specified:

<oj-optgroup disabled="[[isDisabled]]"></oj-optgroup>

Get or set the disabled property after initialization:

// getter
var disabledValue = myOptgroup.disabled;

// setter
myOptgroup.disabled = true;

label :string

Specifies the oj-optgroup's label.

Names
Item Name
Property label
Property change event labelChanged
Property change listener attribute (must be of type function) on-label-changed
Examples

Initialize the oj-optgroup with the label attribute specified:

<oj-optgroup label="group1 label"></oj-optgroup>

Get or set the label property after initialization:

// getter
var labelValue = myOptgroup.label;

// setter
myOptgroup.label = 'Group 1';

Methods

getProperty(property) → {*}

Retrieves a value for a property or a single subproperty for complex properties.
Parameters:
Name Type Description
property string The property name to get. Supports dot notation for subproperty access.
Returns:
Type
*
Example

Get a single subproperty of a complex property:

var subpropValue = myComponent.getProperty('complexProperty.subProperty1.subProperty2');

refresh()

Refreshes the visual state of the component.

setProperties(properties)

Performs a batch set of properties.
Parameters:
Name Type Description
properties Object An object containing the property and value pairs to set.
Example

Set a batch of properties:

myComponent.setProperties({"prop1": "value1", "prop2.subprop": "value2", "prop3": "value3"});

setProperty(property, value)

Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a [property]Changed event.
Parameters:
Name Type Description
property string The property name to set. Supports dot notation for subproperty access.
value * The new value to set the property to.
Example

Set a single subproperty of a complex property:

myComponent.setProperty('complexProperty.subProperty1.subProperty2', "someValue");