Tree API overview
Methods
| Name | Description |
|---|---|
| checkItem() | checks the checkbox of a tree item and all its sub-items |
| collapse() | collapses a tree item by id |
| collapseAll() | collapses all expanded Tree items |
| destructor() | releases the occupied resources |
| editItem() | edits a Tree item |
| expand() | expands a tree item by id |
| expandAll() | expands all collapsed tree items |
| focusItem() | sets focus to an item by its id and moves the scroll to it |
| getChecked() | gets all checked tree items |
| getState() | gets the state of a tree |
| paint() | repaints Tree on a page |
| setState() | sets state for a tree |
| toggle() | opens/closes a tree item by id |
| uncheckItem() | unchecks the checkbox of a tree item and all its sub-items |
important
- Use the methods of TreeCollection to work with data.
- Apply the methods of Selection to manage the selection of Tree items.
Events
| Name | Description |
|---|---|
| afterCheck | fires after the state of an item is changed |
| afterCollapse | fires after collapsing a tree item |
| afterDrag | fires after dragging of an item is finished |
| afterDrop | fires before the user has finished dragging an item but after the mouse button is released |
| afterEditEnd | fires after editing of a tree item is finished |
| afterEditStart | fires after editing of a tree item has started |
| afterExpand | fires after expanding a tree item |
| beforeCheck | fires before the state of an item is changed |
| beforeCollapse | fires before collapsing a tree item |
| beforeDrag | fires before dragging of an item has started |
| beforeDrop | fires before the user has finished dragging an item and released the mouse button |
| beforeEditEnd | fires before editing of a tree item is finished |
| beforeEditStart | fires before editing of an item has started |
| beforeExpand | fires before expanding a tree item |
| cancelDrop | fires on moving a mouse pointer out of item's borders while dragging the item |
| canDrop | fires when a dragged item is over a target item |
| dragIn | fires when an item is dragged to another potential target |
| dragOut | fires when an item is dragged out of a potential target |
| dragStart | fires when dragging of an item has started |
| focusChange | fires on moving focus to a new item |
| itemClick | fires on clicking a tree item |
| itemDblClick | fires on double-clicking a tree item |
| itemRightClick | fires on right-clicking a tree item |
important
- Use the events of TreeCollection to work with data of Tree.
- Apply the events of Selection to control the selection of Tree items.
Properties
| Name | Description |
|---|---|
| autoload | Optional. Defines that the structure of a tree is being built while opening items |
| checkbox | Optional. Adds checkboxes to tree items |
| collapsed | Optional. Defines that a tree is initialized in the collapsed state |
| css | Optional. Adds a CSS class(es) to the component |
| data | Optional. Sets a dataset for a tree |
| dragCopy | Optional. Defines that an item is copied to a target during drag-n-drop |
| dragMode | Optional. Enables drag-n-drop in Tree |
| dropBehaviour | Optional. Defines the behaviour of a dragged item |
| editable | Optional. Enables editing of Tree items on a double-click |
| eventHandlers | Optional. Adds event handlers to the HTML elements of a custom template |
| icon | Optional. Allows adding custom icons for tree items |
| isFolder | Optional. Defines whether an item should be rendered as a folder |
| itemHeight | Optional. Sets the height of an item |
| keyNavigation | Optional. Enables key navigation in a tree |
| rootId | Optional. Sets the id for the root element |
| selection | Optional. Enables selection of Tree items |
| template | Optional. Specifies a template for Tree items |