Element: <oj-c-selector-all>

CORE PACK

Oracle® JavaScript Extension Toolkit (JET)
15.1.0
F83698-01

Since:
  • 15.0.0
Module:
  • selector-all

QuickNav

Attributes

Methods

Other Topics


JET SelectorAll

Description: A checkbox to support select all functionality in Collection Components

The oj-c-selector-all is a component that may be placed above Table, ListView. It presents as a checkbox when the Collection Component is configured for select all.

Note that if the application wants to explicitly update the visual state of the component (e.g. to have it checked when every item in the associated ListView is selected), it will need to update the selectedKeys attribute with an AllKeySetImpl (with empty deletedKeys) to have it checked, or a KeySetImpl (with empty keys) to have it unchecked. Partial state will be shown if either an AllKeySetImpl with non-empty deletedKeys or a KeySetImpl with non-empty keys is specified.


<div class="oj-flex oj-sm-align-items-center">
  <oj-c-selector-all
    id="selectAll"
    selected-keys="{{selectedItems}}">
  </oj-c-selector-all>
  <span>Select All
</div>
<oj-c-list-view
  id="listview"
  data="[[dataProvider]]"
  selected="{{selectedItems}}"
  selection-mode="multiple">
 <template slot="itemTemplate" data-oj-as="item">
   <oj-c-list-item-layout>
     <oj-c-selector
       selected-keys="{{selectedItems}}"
       selection-mode="multiple"
       row-key="[[item.data.id]]"
       slot="selector">
     </oj-c-selector>
     <span>
       <oj-bind-text value="[[item.data.name]]"></oj-bind-text>
     </span>
    </oj-c-list-item-layout>
  </template>
</oj-c-list-view>

Accessibility

Application must specify a value for the aria-label attribute with a meaningful description of the purpose of this selector in order for this to be accessible.


Usage

Signature:

interface CSelectorAllElement<K extends string | number>

Generic Parameters
ParameterDescription
{object}K Type of key
Typescript Import Format
//To typecheck the element APIs, import as below.
import { CSelectorAllElement } from "oj-c/selector-all";

//For the transpiled javascript to load the element's module, import as below
import "oj-c/selector-all";

For additional information visit:

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

selected-keys :ImmutableKeySet.<K>

Specifies the selectedKeys, should be hooked into the collection component.
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

Methods

getProperty(property) : {any}

Retrieves the value of a property or a subproperty.
Parameters:
Name Type Description
property The property name to get. Supports dot notation for subproperty access.
Returns:
Type
any

setProperties(properties) : {void}

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

setProperty(property, value) : {void}

Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a corresponding event.
Parameters:
Name Type Description
property The property name to set. Supports dot notation for subproperty access.
value The new value to set the property to.
Returns:
Type
void