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 components that allow child content support slots. Please see the slots section of the JET component overview doc for more information on allowed slot content and slot types.
-
groupTemplate
-
The
groupTemplate
slot is used to specify the template for rendering each non-leaf item in the list. The slot content must be a <template> element.If a
groupTemplate
is not specified theitemTemplate
will be used as a fallback.The content inside the template must have a single Element as the root node. It cannot have multiple root nodes, incluidng Text and Comment nodes. The root node also cannot be a JET Binding Element, you must wrap it with an Element node. If the content do contain multiple nodes, StreamList will take the first Element node it encountered and ignore the rest.
When the template is executed for each item, it will have access to the binding context containing the following properties:
- $current - an object that contains information for the current item. (See oj.ojStreamList.ItemTemplateContext)
Properties of $current:
Name Type Argument Description data
D The data for the current item being rendered. key
K The key of the current item being rendered. depth
number <optional>
The zero-based depth of the current item, null if not a TreeDataProvider. parentKey
K <optional>
The key of the parent current item being rendered, null if not a TreeDataProvider. leaf
boolean <optional>
If the current item has children, null if not a TreeDataProvider. -
itemTemplate
-
The
itemTemplate
slot is used to specify the template for rendering each item in the list. The slot content must be a <template> element.This slot is required or there will be no default rendering. If a
groupTemplate
is not specified theitemTemplate
will be used as a fallback.The content inside the template must have a single Element as the root node. It cannot have multiple root nodes, incluidng Text and Comment nodes. The root node also cannot be a JET Binding Element, you must wrap it with an Element node. If the content do contain multiple nodes, StreamList will take the first Element node it encountered and ignore the rest.
When the template is executed for each item, it will have access to the binding context containing the following properties:
- $current - an object that contains information for the current item. (See oj.ojStreamList.ItemTemplateContext)
Properties of $current:
Name Type Argument Description data
D The data for the current item being rendered. key
K The key of the current item being rendered. depth
number <optional>
The zero-based depth of the current item, null if not a TreeDataProvider. parentKey
K <optional>
The key of the parent current item being rendered, null if not a TreeDataProvider. leaf
boolean <optional>
If the current item has children, null if not a TreeDataProvider.
Attributes
-
data :oj.DataProvider<K, D>|oj.TreeDataProvider<K, D>|null
-
The data for StreamList. Must be of type DataProvider or TreeDataProvider.
- Default Value:
null
Names
Item Name Property data
Property change event dataChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-data-changed
-
expanded :oj.KeySet<K>
-
Specifies the key set containing the keys of the items that should be expanded. Use the KeySetImpl class to specify items to expand. Use the AllKeySetImpl class to expand all items.
- Default Value:
new KeySetImpl();
- Supports writeback:
true
Names
Item Name Property expanded
Property change event expandedChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-expanded-changed
-
scroll-policy :loadAll|loadMoreOnScroll
-
Specifies the mechanism used to scroll the data inside the StreamList. Possible values are: "loadMoreOnScroll", and "loadAll". When "loadMoreOnScroll" is specified, additional data is fetched when the user scrolls to the bottom of the StreamList. Note that the component must have a height specified or inside a height constraint element so that the component element is scrollable. When "loadAll" is specified, StreamList will fetch all the data when it is initially rendered.
- Default Value:
"loadMoreOnScroll"
Supported Values:
Value Description loadAll
Fetch and render all data. loadMoreOnScroll
Additional data is fetched when the user scrolls towards the bottom of the list. Names
Item Name Property scrollPolicy
Property change event scrollPolicyChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-scroll-policy-changed
-
scroll-policy-options :Object.<string, any>|null
-
scrollPolicy options.
The following options are supported:
- fetchSize: The number of items fetched each time when scroll to the end.
- maxCount: Maximum rows which will be displayed before fetching more rows will be stopped.
- scroller: The element which StreamList uses to determine the scroll position as well as the maximum scroll position where scroll to the end will trigger a fetch. If not specified then the oj-stream-list element is used.
Names
Item Name Property scrollPolicyOptions
Property change event scrollPolicyOptionsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-scroll-policy-options-changed
-
(nullable) scroll-policy-options.fetch-size :number
-
The number of items to fetch in each block.
- Default Value:
25
Names
Item Name Property scrollPolicyOptions.fetchSize
-
(nullable) scroll-policy-options.max-count :number
-
The maximum total number of items to fetch.
- Default Value:
500
Names
Item Name Property scrollPolicyOptions.maxCount
-
(nullable) scroll-policy-options.scroller :Element
-
The element which StreamList uses to determine the scroll position as well as the maximum scroll position.
- Default Value:
null
Names
Item Name Property scrollPolicyOptions.scroller
-
scroll-position :(oj.ojStreamList.ScrollPositionType.<K>|null)
-
The current scroll position of StreamList. The scroll position is updated when the vertical scroll position (or its scroller, as specified in scrollPolicyOptions.scroller) has changed. The value contains the y scroll position, the key of the item closest to the top of the viewport, as well as vertical offset from the position of the item to the actual scroll position.
The default value contains just the scroll position. Once data is fetched the 'key' and 'offsetY' sub-properties will be added. If there is no data then the 'key' sub-properties will not be available.
When setting the scrollPosition property, applications can change any combination of the sub-properties. If both key and y sub-properties are set at once then key will take precedent. If offsetY is specified, it will be used to adjust the scroll position from the position where the key of the item is located.
If a sparse object is set the other sub-properties will be populated and updated once StreamList has scrolled to that position.
Also, if scrollPolicy is set to 'loadMoreOnScroll' and the scrollPosition is set to a value outside of the currently rendered region, then the value of scrollPosition will be ignored.
Lastly, when a re-rendered is triggered by a refresh event from the DataProvider, or if the value for data attribute has changed, then the scrollPosition will by default remain at the top.- Default Value:
{"y": 0}
- Supports writeback:
true
Properties:
Name Type Argument Description y
number <optional>
The vertical position in pixels. key
K <optional>
The key of the item. If DataProvider is used for data and the key does not exists in the DataProvider or if the item has not been fetched yet, then the value is ignored. offsetY
number <optional>
The vertical offset in pixels relative to the item identified by key. parentKey
K <optional>
The key of the parent if tree data. Names
Item Name Property scrollPosition
Property change event scrollPositionChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-scroll-position-changed
Methods
-
getProperty(property) : {any}
-
Retrieves the value of a property or a subproperty. The return type will be the same as the type of the property as specified in this API document. If the method is invoked with an incorrect property/subproperty name, it returns undefined.
Parameters:
Name Type Description property
string The property name to get. Supports dot notation for subproperty access. - Since:
- 4.0.0
Returns:
- Type
- any
Example
Get a single subproperty of a complex property:
let subpropValue = myComponent.getProperty('complexProperty.subProperty1.subProperty2');
-
setProperties(properties) : {void}
-
Performs a batch set of properties. The type of value for each property being set must match the type of the property as specified in this API document.
Parameters:
Name Type Description properties
Object An object containing the property and value pairs to set. - Since:
- 4.0.0
Returns:
- Type
- void
Example
Set a batch of properties:
myComponent.setProperties({"prop1": "value1", "prop2.subprop": "value2", "prop3": "value3"});
-
setProperty(property, value) : {void}
-
Sets a property or a subproperty (of a complex property) and notifies the component of the change, triggering a [property]Changed event. The value should be of the same type as the type of the attribute mentioned in this API document.
Parameters:
Name Type Description property
string The property name to set. Supports dot notation for subproperty access. value
any The new value to set the property to. - Since:
- 4.0.0
Returns:
- Type
- void
Example
Set a single subproperty of a complex property:
myComponent.setProperty('complexProperty.subProperty1.subProperty2', "someValue");
Type Definitions
-
ItemTemplateContext<K,D>
-
Properties:
Name Type Argument Description data
D The data for the current item being rendered. key
K The key of the current item being rendered. depth
number <optional>
The zero-based depth of the current item, null if not a TreeDataProvider. parentKey
K <optional>
The key of the parent current item being rendered, null if not a TreeDataProvider. leaf
boolean <optional>
If the current item has children, null if not a TreeDataProvider. -
ScrollPositionType<K>
-
Properties:
Name Type Argument Description y
number <optional>
The vertical position in pixels. key
K <optional>
The key of the item. If DataProvider is used for data and the key does not exists in the DataProvider or if the item has not been fetched yet, then the value is ignored. offsetY
number <optional>
The vertical offset in pixels relative to the item identified by key. parentKey
K <optional>
The key of the parent if tree data.