VirtualTree

new VirtualTree(optionsopt)

Source:

matrix/widgets/virtualtree.js, line 42

Properties:

Name	Type	Attributes	Default	Description
`options.size`	Integer	<optional>	`32`	The size of a single entry in the list.
`options.entry_class`	Object	<optional>	`VirtualTreeEntry`	The class to derive new entries from.
`options.virtualtreeview`	Object			The VirtualTreeDataView.
`options.prerender_top`	number	<optional>	`3`	The number of elements to prerender at the top.
`options.prerender_bottom`	number	<optional>	`3`	The number of elements to prerender at the bottom.

VirtualTree is a scrollable list of VirtualTreeEntrys. It relies on a data model VirtualTreeDataView. Its purpose is to reduce the amount of elements in DOM by only holding the entries which fit inside the area. On scrolling the entries are re-sorted, re-subscribed and micro-scrolled to give the impression of seamless scrolling. It is used to display collapsable lists of hundreds or even thousands of entries in an efficient way.

Parameters:

Name	Type	Attributes	Default	Description
`options`	Object	<optional>	`{ }`	An object containing initial options.

Extends

Scroller

Members

_sizer :HTMLDiv

Source:

matrix/widgets/virtualtree.js, line 453

A container holding the VirtualTreeEntrys. Has class .aux-sizer.

Type:

HTMLDiv

element :HTMLDivElement

Source:

widgets/scroller.js, line 123

Overrides:

Scroller#element

The scrollbar handle. Has class .aux-scrollbar.

Type:

HTMLDivElement

Methods

calculateEntryPosition()

Source:

matrix/widgets/virtualtree.js, line 139

Calculates the pixel position of the entry at the given index.

createEntry() → {Object}

Source:

matrix/widgets/virtualtree.js, line 124

Create and return a new entry based on options.entry_class.

Returns:

entry - The newly created entry instance.

Type: Object

getEntry({number) → {VirtualTreeEntryBase}

Source:

matrix/widgets/virtualtree.js, line 178

Return the entry for the given index. Returns null if there is currently no entry assigned to that index.

Parameters:

Name	Type	Description
`{number`		index The element index.

Returns:

The element with the given id or null.

Type: VirtualTreeEntryBase

getEntryById(id) → {VirtualTreeEntryBase}

Source:

matrix/widgets/virtualtree.js, line 223

Returns the entry for a given id. If no element with the given id can be found or if it is not in view, null will be returned.

Parameters:

Name	Type	Description
`id`	*	The element id.

Returns:

The element with the given id or null.

Type: VirtualTreeEntryBase

getIndexById(id) → {number}

Source:

matrix/widgets/virtualtree.js, line 202

Returns the index of the element with the given id. If no element with the given id can be found or is currently not in the list, -1 is returned.

Parameters:

Name	Type	Description
`id`	*	The element id.

Returns:

The index of the element with the given id.

Type: number

getVisibleRange()

Source:

matrix/widgets/virtualtree.js, line 433

Returns the indices of those entries which are currently in view.

scrollEntryIntoView(index, optionsopt)

Source:

matrix/widgets/virtualtree.js, line 413

Uses the native Element.scrollTo() function to scroll the entry with the given index into view.

Parameters:

Name Type Attributes Description

index

number

The index of the entry in the list.

options

object | boolean

Similar to the options of Element.scrollIntoView(). Currently interpreted are options.block and options.behavior.

Properties

Name	Type	Attributes	Default	Description
`block`	string	<optional>	`'top'`
`behavior`	string	<optional>	`'auto'`

scrollTo(options)

Source:

matrix/widgets/virtualtree.js, line 252

Scroll the VirtualTree to this position.

Parameters:

Name	Type	Description
`options`	Integer \| object	The position to scroll to or a scrollTo() options with `top` entry.

subscribeData()

Source:

matrix/widgets/virtualtreeentry.js, line 145

This function is called internally to subscribe to properties Overload in order to handle additional data being displayed on custom entry classes.

subscribeData(virtualtreeview, index, data, treeposition)

Source:

matrix/widgets/virtualtreeentry.js, line 164

This function is called internally on scroll to update the entries' content. Overload in order to handle additional data being displayed on custom entry classes.

Parameters:

Name	Type	Description
`virtualtreeview`	Object	The VirtualTreeViewData object.
`index`	Integer	the index of the entry inside the list.
`data`	Object	The data model holding the properties values.
`treeposition`	Integer	An array containing information about the entries indentation inside the tree.

subscribeData(virtualtreeview, index, data, treeposition)

Source:

matrix/widgets/virtualtreeentrybase.js, line 20

This function is called internally on scroll to update the entries' content. Overload in order to handle additional data being displayed on custom entry classes.

Parameters:

Name	Type	Description
`virtualtreeview`	Object	The VirtualTreeViewData object.
`index`	Integer	the index of the entry inside the list.
`data`	Object	The data model holding the properties values.
`treeposition`	Integer	An array containing information about the entries indentation inside the tree.

updateEntry(entry, virtualtreeview, index, element, treePosition)

Source:

matrix/widgets/virtualtree.js, line 157

Update the given entry with the new data.

Parameters:

Name	Type	Description
`entry`	VirtualTreeEntry	The entry widget.
`virtualtreeview`	VirtualTreeView	The tree data.
`index`	number	The index of the element in the list.
`element`	Datum	The data model of the entry.
`treePosition`	Array	The tree position of the entry.

Events

scrollTopChanged

Source:

matrix/widgets/virtualtree.js, line 236

Is fired on scrolling the list.

Parameters:

Name	Type	Description
`scroll`	Integer	The amount of pixels scrolled from top.