Tree Typescript API

Interface

Tree

Treeview component is a user interface that is used to represent hierarchical data in a tree structure.

Selector

smart-tree

Properties

allowDragboolean

Allows drag operation in current tree. When enabled, items can be dragged and dropped to a tree with enabled allowDrop.

Default valuefalse

allowDropboolean

Allows drop operation. Dropped items could originate from the current tree or another tree.

Default valuefalse

animationAnimation

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Default valueadvanced

autoHideToggleElementboolean

Automatically hides the tree's toggle element (arrow) on mouseleave and shows it on mouseenter.

Default valuefalse

autoLoadStateboolean

Enables or disables auto load state from the browser's localStorage. Information about filtering, sorting, expanded and selected items is loaded.

Default valuefalse

autoSaveStateboolean

Enables or disables auto save state to the browser's localStorage. Information about filtering, sorting, expanded and selected items is saved.

Default valuefalse

autoSortboolean

Enables or disables auto sorting. If modifications are made to a sorted tree, but autoSort is false, the tree will not be re-sorted automatically.

Default valuetrue

dataSourceany

Determines the data source that will be loaded to the Tree.

disabledboolean

Enables or disables smartTree.

Default valuefalse

displayLoadingIndicatorboolean

Shows or hides loading indicator.

Default valuefalse

displayMemberstring

Determines the field in the data source that corresponds to an item's label.

Default value"label

dragFeedbackFormatFunctionany

A callback function for customizing the HTML of the drag feedback. It receives one parameter - an array of the currently dragged items.

dragOffsetnumber[]

Determines the offset of the drag feedback element from the mouse cursor when dragging items. The first member of the array is the horizontal offset and the second one - the vertical offset.

editableboolean

Enables or disables item's editting. An edit operation can be initiated by double-clicking a tree item or pressing F2 while an item is selected.

Default valuefalse

filterableboolean

Enables or disables filtering. Shows or hides filter input.

Default valuefalse

filterInputPlaceholderstring

Sets custom text for placeholder in the filter input.

Default value"

filterModeFilterMode

Sets filter mode.

Default valuecontainsIgnoreCase

hasThreeStatesboolean

Sets or gets whether the tree checkboxes have three states - checked, unchecked and indeterminate. Whorks on selectionMode: 'checkBox'

Default valuefalse

itemsMemberstring

Determines the field in the data source that corresponds to an item group's subitems collection.

Default value"items

loadingIndicatorPlaceholderstring

Sets custom text for placeholder in the loading indicator if loadingIndicatorPosition is set to 'top' or 'bottom'.

Default value"Loading...

loadingIndicatorPositionVerticalAlignment

Sets the position of the loading indicator.

Default valuecenter

localestring

Sets or gets the locale. Used in conjunction with the property messages.

Default value"en

localizeFormatFunctionany

Callback, related to localization module.

messagesany

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.

Default value


"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",

"noId": "smart-tree: Saving and loading the element's state are not available if the element has no id."

}

overflowOverflow

Specifies what should happen with the scrollbar (or scroll buttons in scrollMode: 'scrollButtons') if content overflows the element's box.

Default valueauto

readonlyboolean

If the element is readonly, users cannot interact with it.

Default valuefalse

rightToLeftboolean

Determines whether the right-to-left support is enabled.

Default valuefalse

scrollModeTreeScrollMode

Determines whether to use scrollbar or scrollButtons when content overflows an element's box.

Default valuescrollbar

selectedIndexesstring[]

An array with indexes (paths) of the selected items.

selectionDisplayModeTreeSelectionDisplayMode

Determines the way selected items are highlighted.

Default valuerow

selectionModeTreeSelectionMode

Determines selection mode.

Default valueone

showLinesboolean

Shows or hides lines, displaying the relation between elements in group.

Default valuefalse

showRootLinesboolean

Shows or hides lines starting from the root node. Enabled when 'showLines' is set to true.

Default valuefalse

sortany

Sets user-defined function about custom sorting.

sortDirectionTreeSortDirection

Determines sort direction - ascending or descending.

Default valueasc

sortedboolean

Enables or disables sorting.

Default valuefalse

themestring

Sets or gets the element's visual theme.

Default value"

toggleElementPositionPosition

Determines togle element (arrow) position.

Default valuenear

toggleModeTreeToggleMode

Determines the way to toggle smart-tree-items-groups.

Default valuedblclick

unfocusableboolean

Sets or gets if the element can be focused.

Default valuefalse

valueMemberstring

Determines the field in the data source that corresponds to an item's value.

Default value"value

onchange((this: Window, ev: Event) => any) | null

This event is triggered when selection in smart-tree is changed.

Arguments

oncollapse((this: Window, ev: Event) => any) | null

This event is triggered when a smart-tree-items-group is collapsed.

Arguments

oncollapsing((this: Window, ev: Event) => any) | null

This event is triggered when a smart-tree-items-group is about to be collapsed. The collapsing operation can be canceled by calling event.preventDefault() in the event handler function.

Arguments

ondragend((this: Window, ev: Event) => any) | null

This event is triggered when a smart-tree-item/smart-tree-items-group is dropped somewhere in the DOM. The dragging operation can be canceled by calling event.preventDefault() in the event handler function.

Arguments

ondragging((this: Window, ev: Event) => any) | null

This event is triggered when a smart-tree-item/smart-tree-items-group is being dragged.

Arguments

ondragstart((this: Window, ev: Event) => any) | null

This event is triggered when a dragging operation is started in smart-tree. The dragging operation can be canceled by calling event.preventDefault() in the event handler function.

Arguments

onexpand((this: Window, ev: Event) => any) | null

This event is triggered when a smart-tree-items-group is expanded.

Arguments

onexpanding((this: Window, ev: Event) => any) | null

This event is triggered when a smart-tree-items-group is about to be expanded. The expanding operation can be canceled by calling event.preventDefault() in the event handler function.

Arguments

onscrollbottomreached((this: Window, ev: Event) => any) | null

This event is triggered when the Tree has been scrolled to the bottom.

Arguments

onscrolltopreached((this: Window, ev: Event) => any) | null

This event is triggered when the Tree has been scrolled to the top.

Arguments

Methods

addAfter( item: HTMLElement, sibling: string | HTMLElement): void

Adds an item after another item as a sibling.

Arguments

itemHTMLElement

A smart-tree-item/smart-tree-items-group to add to the Tree

siblingstring | HTMLElement

The smart-tree-item/smart-tree-items-group (or its id or numeric path) to add the item after.

addBefore( item: HTMLElement, sibling: string | HTMLElement): void

Adds an item before another item as a sibling.

Arguments

itemHTMLElement

A smart-tree-item/smart-tree-items-group to add to the Tree

siblingstring | HTMLElement

The smart-tree-item/smart-tree-items-group (or its id or numeric path) to add the item before.

addTo( item: HTMLElement, parent?: string | HTMLElement): void

Adds an item as the last child of a parent item.

Arguments

itemHTMLElement

A smart-tree-item/smart-tree-items-group to add to the Tree

parent?string | HTMLElement

The smart-tree-items-group (or its id or numeric path) to add the item to.

clearSelection(): void

Clears selection.

collapseAll( animation?: boolean): void

Collapses all smart-tree-items-groups.

Arguments

animation?boolean

If set to false, disables collapse animation even if animation is enabled for the element.

collapseItem( item: HTMLElement | string, animation?: boolean): void

Collapses a smart-tree-items-group.

Arguments

itemHTMLElement | string

smart-tree-items-group (or its id or numeric path).

animation?boolean

If set to false, disables collapse animation even if animation is enabled for the element.

ensureVisible( item: HTMLElement | string): void

Makes sure an item is visible by scrolling to it.

Arguments

itemHTMLElement | string

The id or numeric path of an item

expandAll( animation?: string): void

Expands all smart-tree-items-groups.

Arguments

animation?string

If set to false, disables expand animation even if animation is enabled for the element.

expandItem( item: HTMLElement | string, animation?: boolean): void

Expands single smart-tree-items-group.

Arguments

itemHTMLElement | string

smart-tree-items-group (or its id or numeric path).

animation?boolean

If set to false, disables expand animation even if animation is enabled for the element.

filter( filterQuery: string): void

Applies filter to the Tree.

Arguments

filterQuerystring

Filter query.

getItem( id: string): any

Gets an item by its id or numeric path.

Arguments

idstring

The id or numeric path of an item.

Returnsany

getState(): any

Returns smartTree's state

Returnsany

insert( item: any, path?: string): void

Inserts an item at the given position.

Arguments

itemany

A smart-tree-item/smart-tree-items-group (or an Object to create an item from) to add to the Tree. If an Object is passed, the available fields are tagName ('smart-tree-item' - default - or 'smart-tree-items-group'), disabled, expanded (only if tagName is 'smart-tree-items-group'), (items) (only if tagName is 'smart-tree-items-group'), (label), separator, shortcut (only if tagName is 'smart-tree-item'), and (value). (items), (label), and (value) have to correspond to the values of itemsMember, displayMember, and valueMember respectively.

path?string

The path to insert the item at.

loadState( state?: any): void

Loads the Tree's state.

Arguments

state?any

An object returned by one of the methods getState or saveState. If a state is not passed, the method tries to load the state from the browser's localStorage.

moveDown( item: HTMLElement | string): void

Moves an item down relative to its siblings.

Arguments

itemHTMLElement | string

The smart-tree-item/smart-tree-items-group (or its id or numeric path) to remove.

moveUp( item: HTMLElement | string): void

Moves an item up relative to its siblings.

Arguments

itemHTMLElement | string

The smart-tree-item/smart-tree-items-group (or its id or numeric path) to remove.

removeItem( item: HTMLElement | string): void

Removes an item.

Arguments

itemHTMLElement | string

The smart-tree-item/smart-tree-items-group (or its id or numeric path) to remove.

saveState(): any

Saves the Tree's state.

Returnsany

select( item: HTMLElement | string): void

Selects an item.

Arguments

itemHTMLElement | string

The smart-tree-item/smart-tree-items-group (or its id or numeric path) to remove.

unselect( item: HTMLElement | string): void

Unselects an item.

Arguments

itemHTMLElement | string

The smart-tree-item/smart-tree-items-group (or its id or numeric path) to remove.

updateItem( item: HTMLElement | string, newItem: any): void

Updates an item.

Arguments

itemHTMLElement | string

smart-tree-item/smart-tree-items-group (or its id or numeric path).

newItemany

An object with updated properties.

Enums

TreeItem

Defines a tree items.

Selector

smart-tree-item

Properties

checkedboolean

Default valuetrue

itemsany

labelany

Default value

levelnumber

separatorboolean

Default valuetrue

shortcutstring

Default value"

valueany

selectedboolean

Default valuefalse

TreeItemsGroup

Defines a group of tree items.

Selector

smart-tree-items-group

Properties

selectedboolean

Default valuefalse