components/List

Render lists of entities and relationships (vertices/edges)

The list could be a static list or a infinite loading list of elements. The container component is responsible for listening for events to request more elements and fulfilling that request.

Source:
Mixes In:
See:
Examples

Static list

List.attachTo(node, {
    items: [vertices]
})

Infinite Scroll

// See example below for listening for infiniteScrollRequest
List.attachTo(node, {
    items: [page1Elements]
    nextOffset: 10,
    total: 100
})
Attributes:
Name Type Description
items Array.<Object> Elements (vertices/edges) to render
singleSelection boolean Whether the user can use keyboard shift/alt to select multiple
infiniteScrolling boolean Whether the component should request more elements after scrolling
total number The total count of items. Required when `infiniteScrolling` enabled.
nextOffset number When `infiniteScrolling` is enabled, specifies where the next request should start
usageContext string | undefined Describes the context this component is used so ListItemRenderers can determine if they should override behavior.
Fires:
Listens to Events:

Events

addInfiniteItems

Source:
Properties:
Name Type Description
data object
Properties
Name Type Description
success boolean

Whether the request succeeded or not

items Array.<object>

The new items to place

nextOffset number

The next offset to request

total number | undefined

The new total (optional)

The Element List component registers a listener for this event that should be fired by the consuming component in response to infiniteScrollRequest events.

Example
$node.on('infiniteScrollRequest', function(event, data) {
    makeRequestStartingAtOffset(data.paging.offset)
    .then(function(results) {
        $(event.target).trigger('addInfiniteItems', {
            items: results,
            nextOffset: data.paging.offset + results.length
        })
    })
});
List.attachTo($node, {
    items: [],
    infiniteScrolling: true,
    nextOffset: 10
})
Listeners of This Event:

infiniteScrollRequest

Source:
Properties:
Name Type Description
data object
Properties
Name Type Description
paging object
Properties
Name Type Description
offset number

Paging offset

Fired when the user scrolls to the end of a list that has infiniteScrolling enabled. The controlling component should listen and trigger addInfiniteItems events.