Specify if dragging tree nodes is allowed. This could be a boolean, or a function that receives a TreeNode and returns a boolean
Default value: false
Example:
options = {
allowDrag: true
}
Boolean flag to allow adding and removing is-dragging-over and is-dragging-over-disabled classes.
If set to false it will not add the above mentioned classes and you should handle the styling yourself with css and in the actionMapping -> mouse -> dragEnter, dragLeave
Default Value: true
example:
options = {
allowDrop: true,
allowDragoverStyling: false
}
Specify whether dropping inside the tree is allowed. Optional types:
Default Value: true
example:
options = {
allowDrop: (element, {parent, index}) => parent.isLeaf
}
Increase of expand animation speed (described in multiply per 17 ms).
Default Value: 1.2
Boolean whether or not to animate expand / collapse of nodes.
Default Value: false
Speed of expand animation (described in pixels per 17 ms).
Default Value: 30
A string representing the attribute of the node that contains the array of children.
Default value: children.
For example, if your nodes have a nodes attribute, that contains the children, use:
options = { childrenField: 'nodes' }
A string representing the attribute of the node to display.
Default value: name
For example, if your nodes have a title attribute that should be displayed, use:
options = { displayField: 'title' }
For use with useVirtualScroll option.
Specify a height for drop slots (located between nodes) in pixels
Default Value: 2
Function for loading a node's children. The function receives a TreeNode, and returns a value or a promise that resolves to the node's children.
This function will be called whenever a node is expanded, the hasChildren (options.hasChildrenField)
field is true, and the children field is empty.
The result will be loaded into the node's children attribute.
Example:
options = {
getChildren: (node:TreeNode) => {
return request('/api/children/' + node.id);
}
}
Function to clone a node. Receives a TreeNode object, and returns a node object (only the data). This callback will be called when copying a node inside the tree, by either calling copyNode, or by dragging and holding the ctrl key
For example:
options: ITreeOptions = {
getNodeClone: (node) => ({
...node.data,
id: uuid.v4(),
name: `copy of ${node.data.name}`
})
};
Default Value: clone the node using Object.assign, and remove 'id' property
A string representing the attribute of the node that indicates whether there are child nodes.
Default value: hasChildren.
For example, if your nodes have an isDirectory attribute that indicates whether there are children, use:
options = { hasChildrenField: 'isDirectory' }
A string representing the attribute of the node that contains the unique ID.
This will be used to construct the path, which is an array of IDs that point to the node.
Default value: id.
For example, if your nodes have a uuid attribute, that contains the unique key, use:
options = { idField: 'uuid' }
A string representing the attribute of the node that contains whether the node starts as expanded.
Default value: isExpanded.
For example, if your nodes have an expanded attribute, that contains a boolean value, use:
options = { isExpandedField: 'expanded' }
Specify padding per node (integer). Each node will have padding-left value of level * levelPadding, instead of using the default padding for children.
This option is good for example for allowing whole row selection, etc.
You can alternatively use the tree-node-level-X classes to give padding on a per-level basis.
Default value: 0
Specify a function that returns a class per node. Useful for styling the nodes individually.
Example:
options = {
nodeClass: (node:TreeNode) => {
return 'icon-' + node.data.icon;
}
}
For use with useVirtualScroll option.
Specify a height for nodes in pixels. Could be either:
Default Value: 22
Specifies id of root node (virtualRoot)
Makes the tree right-to-left. This include direction, expander style, and change key binding (right key collapse and left key expands instead of vice-versa)
The HTML element that is the scroll container for the tree. The default behaviour is to wrap the tree with a container that has overflow: hidden, and then the scrolling container is the viewport inside the tree component
Whether to scroll to the node to make it visible when it is activated.
Default Value: true
Whether to display a checkbox next to the node or not
Whether to use master checkboxes mechanism if the useCheckbox is set to true
Boolean flag to use the virtual scroll option.
To use this option, you must supply the height of the container, and the height of each node in the tree.
You can also specify height for the dropSlot which is located between nodes.
Default Value: false
example:
options = {
useVirtualScroll: true,
nodeHeight: (node: TreeNode) => node.myHeight,
dropSlotHeight: 3
}
Generated using TypeDoc
Rewire which trigger causes which action using this attribute, or create custom actions / event bindings. See the Action Mapping Section for more details.