Element: <oj-selector>

Oracle® JavaScript Extension Toolkit (JET)
9.1.0
F30737-01

Signature:

class ojSelector<K>

QuickNav

Attributes

JET Custom Elements

JET components are implemented as custom HTML elements. In addition to the component attributes documented in this page, JET components also support standard HTML global attributes like id and aria-label.

The JET data binding syntax can be used to define both component and global attributes through the use of dynamically evaluated expressions. All attributes (component and global) support attribute-level binding by prefixing the attribute name with ":" (e.g. :id="[...]"). When using attribute-level binding, all expression values are treated as strings. Additionally, component attributes support property-level binding by using the attribute name directly with no ":" prefix. When using property-level binding, the expressions should evaluate to the types documented by the corresponding attributes. Property-level binding is strongly recommended over attribute-level binding for component attributes.

A detailed description of working with custom HTML elements can be found in: JET Custom Element Usage.


Version:
  • 9.1.0
Since:
  • 9.0.0
Module:
  • ojselector

Module usage

See JET Module Loading for an overview of module usage within JET.

Typescript Import Format
//To typecheck the element APIs, import as below.
import {SelectorElement} from "ojs/ojselector";

//For the transpiled javascript to load the element's module, import as below
import "ojs/ojselector";
Generic Parameters
ParameterDescription
KType of key

JET In Typescript

A detailed description of working with JET elements and classes in your typescript project can be found at: JET Typescript Usage.


JET Selector

Description: A checkbox to support selection in Collection Components

The oj-selector is a component that may be placed within a template for Table, ListView. It presents as a checkbox when the Collection Component is configured for multi-selection.


<oj-list-view id="listview"
     data="[[dataProvider]]"
     selected="{{selectedItems}}"
     selection-mode="[[selectedSelectionMode]]"
     scroll-policy="loadMoreOnScroll">
 <template slot="itemTemplate" data-oj-as="item">
   <li>
     <div class='oj-flex'>
       <div class="oj-flex-item">
         <oj-selector selected-keys='{{selectedItems}}'
                       selection-mode='[[selectedSelectionMode]]'
                       rowKey='[[item.key]]'>
         </oj-selector>
       </div>
       <div class="oj-flex-item">
         <span data-bind="text: 'Name '+ item.data.name"></span>
       </div>
     </div>
   </li>
 </template>
</oj-list-view>

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.

Attributes

row-key :(K|null)

Specifies the row key of each selector. If the selectionMode property is 'all', rowKey is ignored.
Default Value:
  • null
Names
Item Name
Property rowKey
Property change event rowKeyChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-row-key-changed

selected-keys :KeySet.<K>|null

Specifies the selectedKeys, should be hooked into the collection component.
Default Value:
  • null
Supports writeback:
  • true
Names
Item Name
Property selectedKeys
Property change event selectedKeysChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-selected-keys-changed

selection-mode :single|multiple|all

Specifies the selection mode ('single', 'multiple', 'all'). 'all' should only be used for the select all case and will ignore the key property. <oj-selector selected-keys='{{selectedItems}}' selection-mode='all'> </oj-selector>
Supported Values:
Value Description
all Specifies the select all case (rowKey property is ignored).
multiple Multiple items can be selected at the same time.
single Only a single item can be selected at a time.
Default Value:
  • 'multiple'
Names
Item Name
Property selectionMode
Property change event selectionModeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-selection-mode-changed