Tree API

Tree Javascript API

Class

Tree

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

Selector

smart-tree

Properties

Events

Methods

Properties

allowDragboolean

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

Default value

false

Example

Set the allowDrag property.

 <smart-tree allow-drag></smart-tree>

Set the allowDrag property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.allowDrag = false;

Get the allowDrag property.

 const tree = document.querySelector('smart-tree');
 let allowDrag = tree.allowDrag;

allowDropboolean

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

Default value

false

Example

Set the allowDrop property.

 <smart-tree allow-drop></smart-tree>

Set the allowDrop property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.allowDrop = false;

Get the allowDrop property.

 const tree = document.querySelector('smart-tree');
 let allowDrop = tree.allowDrop;

animation"none" | "simple" | "advanced"

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

Default value

"advanced"

Example

Set the animation property.

 <smart-tree animation='none'></smart-tree>

Set the animation property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.animation = 'simple';

Get the animation property.

 const tree = document.querySelector('smart-tree');
 let animation = tree.animation;

autoHideToggleElementboolean

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

Default value

false

Example

Set the autoHideToggleElement property.

 <smart-tree auto-hide-toggle-element></smart-tree>

Set the autoHideToggleElement property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.autoHideToggleElement = false;

Get the autoHideToggleElement property.

 const tree = document.querySelector('smart-tree');
 let autoHideToggleElement = tree.autoHideToggleElement;

autoLoadStateboolean

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

Default value

false

Example

Set the autoLoadState property.

 <smart-tree auto-load-state></smart-tree>

Set the autoLoadState property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.autoLoadState = false;

Get the autoLoadState property.

 const tree = document.querySelector('smart-tree');
 let autoLoadState = tree.autoLoadState;

autoSaveStateboolean

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

Default value

false

Example

Set the autoSaveState property.

 <smart-tree auto-save-state></smart-tree>

Set the autoSaveState property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.autoSaveState = false;

Get the autoSaveState property.

 const tree = document.querySelector('smart-tree');
 let autoSaveState = tree.autoSaveState;

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 value

true

Example

Set the autoSort property.

 <smart-tree auto-sort></smart-tree>

Set the autoSort property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.autoSort = false;

Get the autoSort property.

 const tree = document.querySelector('smart-tree');
 let autoSort = tree.autoSort;

dataSource{label?: string, checked?: boolean, shortcut?: string, value?: any, selected?: boolean, items?: any[]}[]

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

Example

Set the dataSource property.

 <smart-tree data-source='[{ label: 'Cats', selected: true, items: [ { label: 'Tiger', selected: true }, { label: 'Lion' } ] }]'></smart-tree>

Set the dataSource property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.dataSource = [{ label: 'Cats', selected: true, items: [ { label: 'Tiger', selected: true }, { label: 'Lion' } ] }, { label: 'Dogs', expanded: true, items: [ { label: 'Gray wolf' }, { label: 'Ethiopian wolf', selected: true } ]}];

Get the dataSource property.

 const tree = document.querySelector('smart-tree');
 let dataSource = tree.dataSource;

disabledboolean

Enables or disables smartTree.

Default value

false

Example

Set the disabled property.

 <smart-tree disabled></smart-tree>

Set the disabled property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.disabled = false;

Get the disabled property.

 const tree = document.querySelector('smart-tree');
 let disabled = tree.disabled;

displayLoadingIndicatorboolean

Shows or hides loading indicator.

Default value

false

Example

Set the displayLoadingIndicator property.

 <smart-tree display-loading-indicator></smart-tree>

Set the displayLoadingIndicator property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.displayLoadingIndicator = false;

Get the displayLoadingIndicator property.

 const tree = document.querySelector('smart-tree');
 let displayLoadingIndicator = tree.displayLoadingIndicator;

displayMemberstring

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

Default value

"label"

Example

Set the displayMember property.

 <smart-tree display-member='title'></smart-tree>

Set the displayMember property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.displayMember = 'caption';

Get the displayMember property.

 const tree = document.querySelector('smart-tree');
 let displayMember = tree.displayMember;

dragFeedbackFormatFunctionfunction | null

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

Example

Set the dragFeedbackFormatFunction property.

 <smart-tree drag-feedback-format-function='dragFeedbackFormatFunction'></smart-tree>

Set the dragFeedbackFormatFunction property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.dragFeedbackFormatFunction = function dragFeedbackFormatFunction(draggedItems) { return 'Dragging: ' + draggedItems[0].label; };

Get the dragFeedbackFormatFunction property.

 const tree = document.querySelector('smart-tree');
 let dragFeedbackFormatFunction = tree.dragFeedbackFormatFunction;

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.

Example

Set the dragOffset property.

 <smart-tree drag-offset='[0, 0]'></smart-tree>

Set the dragOffset property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.dragOffset = [-60, 20];

Get the dragOffset property.

 const tree = document.querySelector('smart-tree');
 let dragOffset = tree.dragOffset;

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 value

false

Example

Set the editable property.

 <smart-tree editable></smart-tree>

Set the editable property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.editable = false;

Get the editable property.

 const tree = document.querySelector('smart-tree');
 let editable = tree.editable;

filterableboolean

Enables or disables filtering. Shows or hides filter input.

Default value

false

Example

Set the filterable property.

 <smart-tree filterable></smart-tree>

Set the filterable property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.filterable = false;

Get the filterable property.

 const tree = document.querySelector('smart-tree');
 let filterable = tree.filterable;

filterInputPlaceholderstring

Sets custom text for placeholder in the filter input.

Default value

""

Example

Set the filterInputPlaceholder property.

 <smart-tree filter-input-placeholder='Filter'></smart-tree>

Set the filterInputPlaceholder property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.filterInputPlaceholder = 'Filter Text';

Get the filterInputPlaceholder property.

 const tree = document.querySelector('smart-tree');
 let filterInputPlaceholder = tree.filterInputPlaceholder;

filterMode"contains" | "containsIgnoreCase" | "doesNotContain" | "doesNotContainIgnoreCase" | "equals" | "equalsIgnoreCase" | "startsWith" | "startsWithIgnoreCase" | "endsWith" | "endsWithIgnoreCase"

Sets filter mode.

Default value

"containsIgnoreCase"

Example

Set the filterMode property.

 <smart-tree filter-mode='containsIgnoreCase'></smart-tree>

Set the filterMode property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.filterMode = 'doesNotContain';

Get the filterMode property.

 const tree = document.querySelector('smart-tree');
 let filterMode = tree.filterMode;

hasThreeStatesboolean

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

Default value

false

Example

Set the hasThreeStates property.

 <smart-tree has-three-states></smart-tree>

Set the hasThreeStates property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.hasThreeStates = false;

Get the hasThreeStates property.

 const tree = document.querySelector('smart-tree');
 let hasThreeStates = tree.hasThreeStates;

itemsMemberstring

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

Default value

"items"

Example

Set the itemsMember property.

 <smart-tree items-member='children'></smart-tree>

Set the itemsMember property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.itemsMember = 'subitems';

Get the itemsMember property.

 const tree = document.querySelector('smart-tree');
 let itemsMember = tree.itemsMember;

loadingIndicatorPlaceholderstring

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

Default value

"Loading..."

Example

Set the loadingIndicatorPlaceholder property.

 <smart-tree loading-indicator-placeholder='Chargement...'></smart-tree>

Set the loadingIndicatorPlaceholder property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.loadingIndicatorPlaceholder = 'Wird geladen...';

Get the loadingIndicatorPlaceholder property.

 const tree = document.querySelector('smart-tree');
 let loadingIndicatorPlaceholder = tree.loadingIndicatorPlaceholder;

loadingIndicatorPosition"bottom" | "center" | "top"

Sets the position of the loading indicator.

Default value

"center"

Example

Set the loadingIndicatorPosition property.

 <smart-tree loading-indicator-position='bottom'></smart-tree>

Set the loadingIndicatorPosition property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.loadingIndicatorPosition = 'top';

Get the loadingIndicatorPosition property.

 const tree = document.querySelector('smart-tree');
 let loadingIndicatorPosition = tree.loadingIndicatorPosition;

localestring

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

Default value

"en"

Example

Set the locale property.

 <smart-tree locale='de'></smart-tree>

Set the locale property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.locale = 'fr';

Get the locale property.

 const tree = document.querySelector('smart-tree');
 let locale = tree.locale;

localizeFormatFunctionfunction | null

Callback, related to localization module.

Example

Set the localizeFormatFunction property.

 <smart-tree localize-format-function='function(defaultMessage, message, messageArguments){return '...'}'></smart-tree>

Set the localizeFormatFunction property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.localizeFormatFunction = function(defaultMessage, message, messageArguments){return '...'};

Get the localizeFormatFunction property.

 const tree = document.querySelector('smart-tree');
 let localizeFormatFunction = tree.localizeFormatFunction;

messagesobject

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."

}

Example

Set the messages property.

 <smart-tree messages='{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss.","noId":"{{elementType}}: Das Speichern und Laden des Elementstatus ist nicht verfugbar, wenn das Element keine ID hat."}}'></smart-tree>

Set the messages property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.messages = {"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."}};

Get the messages property.

 const tree = document.querySelector('smart-tree');
 let messages = tree.messages;

overflow"auto" | "hidden" | "scroll"

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

Default value

"auto"

Example

Set the overflow property.

 <smart-tree overflow='hidden'></smart-tree>

Set the overflow property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.overflow = 'scroll';

Get the overflow property.

 const tree = document.querySelector('smart-tree');
 let overflow = tree.overflow;

readonlyboolean

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

Default value

false

Example

Set the readonly property.

 <smart-tree readonly></smart-tree>

Set the readonly property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.readonly = true;

Get the readonly property.

 const tree = document.querySelector('smart-tree');
 let readonly = tree.readonly;

rightToLeftboolean

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

Default value

false

Example

Set the rightToLeft property.

 <smart-tree right-to-left></smart-tree>

Set the rightToLeft property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.rightToLeft = false;

Get the rightToLeft property.

 const tree = document.querySelector('smart-tree');
 let rightToLeft = tree.rightToLeft;

scrollMode"scrollbar" | "scrollButtons"

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

Default value

"scrollbar"

Example

Set the scrollMode property.

 <smart-tree scroll-mode='scrollButtons'></smart-tree>

Set the scrollMode property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.scrollMode = 'scrollbar';

Get the scrollMode property.

 const tree = document.querySelector('smart-tree');
 let scrollMode = tree.scrollMode;

selectedIndexesstring[]

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

Example

Set the selectedIndexes property.

 <smart-tree selected-indexes='[ '0.3', '0.4', '1' ]'></smart-tree>

Set the selectedIndexes property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.selectedIndexes = ['0.1'];

Get the selectedIndexes property.

 const tree = document.querySelector('smart-tree');
 let selectedIndexes = tree.selectedIndexes;

selectionDisplayMode"row" | "label"

Determines the way selected items are highlighted.

Default value

"row"

Example

Set the selectionDisplayMode property.

 <smart-tree selection-display-mode='oneOrMany'></smart-tree>

Set the selectionDisplayMode property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.selectionDisplayMode = 'zeroOrOne';

Get the selectionDisplayMode property.

 const tree = document.querySelector('smart-tree');
 let selectionDisplayMode = tree.selectionDisplayMode;

selectionMode"none" | "oneOrManyExtended" | "zeroOrMany" | "oneOrMany" | "zeroOrOne" | "one" | "checkBox" | "radioButton"

Determines selection mode.

Default value

"one"

Example

Set the selectionMode property.

 <smart-tree selection-mode='oneOrMany'></smart-tree>

Set the selectionMode property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.selectionMode = 'zeroOrOne';

Get the selectionMode property.

 const tree = document.querySelector('smart-tree');
 let selectionMode = tree.selectionMode;

showLinesboolean

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

Default value

false

Example

Set the showLines property.

 <smart-tree show-lines></smart-tree>

Set the showLines property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.showLines = false;

Get the showLines property.

 const tree = document.querySelector('smart-tree');
 let showLines = tree.showLines;

showRootLinesboolean

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

Default value

false

Example

Set the showRootLines property.

 <smart-tree show-root-lines></smart-tree>

Set the showRootLines property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.showRootLines = false;

Get the showRootLines property.

 const tree = document.querySelector('smart-tree');
 let showRootLines = tree.showRootLines;

sortfunction | null

Sets user-defined function about custom sorting.

Example

Set the sort property.

 <smart-tree sort='customSortingFunction1'></smart-tree>

Set the sort property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.sort = customSortingFunction2;

Get the sort property.

 const tree = document.querySelector('smart-tree');
 let sort = tree.sort;

sortDirection"ascending" | "descending"

Determines sort direction - ascending or descending.

Default value

"asc"

Example

Set the sortDirection property.

 <smart-tree sort-direction='desc'></smart-tree>

Set the sortDirection property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.sortDirection = 'asc';

Get the sortDirection property.

 const tree = document.querySelector('smart-tree');
 let sortDirection = tree.sortDirection;

sortedboolean

Enables or disables sorting.

Default value

false

Example

Set the sorted property.

 <smart-tree sorted></smart-tree>

Set the sorted property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.sorted = false;

Get the sorted property.

 const tree = document.querySelector('smart-tree');
 let sorted = tree.sorted;

themestring

Sets or gets the element's visual theme.

Default value

""

Example

Set the theme property.

 <smart-tree theme='dark'></smart-tree>

Set the theme property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.theme = 'red';

Get the theme property.

 const tree = document.querySelector('smart-tree');
 let theme = tree.theme;

toggleElementPosition"near" | "far"

Determines togle element (arrow) position.

Default value

"near"

Example

Set the toggleElementPosition property.

 <smart-tree toggle-element-position='far'></smart-tree>

Set the toggleElementPosition property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.toggleElementPosition = 'near';

Get the toggleElementPosition property.

 const tree = document.querySelector('smart-tree');
 let toggleElementPosition = tree.toggleElementPosition;

toggleMode"click" | "dblclick" | "arrow"

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

Default value

"dblclick"

Example

Set the toggleMode property.

 <smart-tree toggle-mode='click'></smart-tree>

Set the toggleMode property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.toggleMode = 'arrow';

Get the toggleMode property.

 const tree = document.querySelector('smart-tree');
 let toggleMode = tree.toggleMode;

unfocusableboolean

Sets or gets if the element can be focused.

Default value

false

Example

Set the unfocusable property.

 <smart-tree unfocusable></smart-tree>

Set the unfocusable property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.unfocusable = false;

Get the unfocusable property.

 const tree = document.querySelector('smart-tree');
 let unfocusable = tree.unfocusable;

valueMemberstring

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

Default value

"value"

Example

Set the valueMember property.

 <smart-tree value-member='info'></smart-tree>

Set the valueMember property by using the HTML Element's instance.

 const tree = document.querySelector('smart-tree');
 tree.valueMember = 'details';

Get the valueMember property.

 const tree = document.querySelector('smart-tree');
 let valueMember = tree.valueMember;

Events

changeCustomEvent

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

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onChange

Arguments

evCustomEvent
ev.detailObject
ev.detail.item - The item the user has interacted with to change the selection (only when applicable).
ev.detail.oldSelectedIndexes - The selected indexes before the selection is changed.
ev.detail.selectedIndexes - The selected indexes after the selection is changed.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of change event.

const tree = document.querySelector('smart-tree');
tree.addEventListener('change', function (event) {
    const detail = event.detail,
        item = detail.item,
        oldSelectedIndexes = detail.oldSelectedIndexes,
        selectedIndexes = detail.selectedIndexes;

	// event handling code goes here.
}

collapseCustomEvent

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

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onCollapse

Arguments

evCustomEvent
ev.detailObject
ev.detail.item - the collapsed smart-tree-items-group
ev.detail.label - the label of the collapsed smart-tree-items-group
ev.detail.path - the path of the collapsed smart-tree-items-group
ev.detail.value - the value of the collapsed smart-tree-items-group
ev.detail.children - the children of the collapsed smart-tree-items-group

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of collapse event.

const tree = document.querySelector('smart-tree');
tree.addEventListener('collapse', function (event) {
    const detail = event.detail,
        item = detail.item,
        label = detail.label,
        path = detail.path,
        value = detail.value,
        children = detail.children;

	// event handling code goes here.
}

collapsingCustomEvent

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.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onCollapsing

Arguments

evCustomEvent
ev.detailObject
ev.detail.item - the smart-tree-items-group to be collapsed
ev.detail.label - the label of the smart-tree-items-group to be collapsed
ev.detail.path - the path of the smart-tree-items-group to be collapsed
ev.detail.value - the value of the smart-tree-items-group to be collapsed
ev.detail.children - the children of the smart-tree-items-group to be collapsed

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of collapsing event.

const tree = document.querySelector('smart-tree');
tree.addEventListener('collapsing', function (event) {
    const detail = event.detail,
        item = detail.item,
        label = detail.label,
        path = detail.path,
        value = detail.value,
        children = detail.children;

	// event handling code goes here.
}

dragEndCustomEvent

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.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onDragEnd

Arguments

evCustomEvent
ev.detailObject
ev.detail.container - the tree the dragged item(s) is dropped to
ev.detail.data - an object with additional drag details
ev.detail.item - the item that is dragged; if multiple items are dragged, this is the item that has been clicked when initiating the drag operation
ev.detail.items - an array with all dragged items
ev.detail.originalEvent - the original, browser, event that initiates the drop operation
ev.detail.previousContainer - the tree the dragged item(s) is dragged from
ev.detail.target - the element the dragged items are dropped to

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of dragEnd event.

const tree = document.querySelector('smart-tree');
tree.addEventListener('dragEnd', function (event) {
    const detail = event.detail,
        container = detail.container,
        data = detail.data,
        item = detail.item,
        items = detail.items,
        originalEvent = detail.originalEvent,
        previousContainer = detail.previousContainer,
        target = detail.target;

	// event handling code goes here.
}

draggingCustomEvent

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

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onDragging

Arguments

evCustomEvent
ev.detailObject
ev.detail.data - an object with additional drag details
ev.detail.item - the item that is dragged; if multiple items are dragged, this is the item that has been clicked when initiating the drag operation
ev.detail.items - an array with all dragged items
ev.detail.originalEvent - the original, browser, event that initiates the dragging operation

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of dragging event.

const tree = document.querySelector('smart-tree');
tree.addEventListener('dragging', function (event) {
    const detail = event.detail,
        data = detail.data,
        item = detail.item,
        items = detail.items,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
}

dragStartCustomEvent

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.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onDragStart

Arguments

evCustomEvent
ev.detailObject
ev.detail.container - the tree the dragged item(s) is dragged from
ev.detail.data - an object with additional drag details
ev.detail.item - the item that is dragged; if multiple items are dragged, this is the item that has been clicked when initiating the drag operation
ev.detail.items - an array with all dragged items
ev.detail.originalEvent - the original, browser, event that initiates the drag operation
ev.detail.previousContainer - the tree the dragged item(s) is dragged from

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of dragStart event.

const tree = document.querySelector('smart-tree');
tree.addEventListener('dragStart', function (event) {
    const detail = event.detail,
        container = detail.container,
        data = detail.data,
        item = detail.item,
        items = detail.items,
        originalEvent = detail.originalEvent,
        previousContainer = detail.previousContainer;

	// event handling code goes here.
}

expandCustomEvent

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

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onExpand

Arguments

evCustomEvent
ev.detailObject
ev.detail.item - the expanded smart-tree-items-group
ev.detail.label - the label of the expanded smart-tree-items-group
ev.detail.path - the path of the expanded smart-tree-items-group
ev.detail.value - the value of the expanded smart-tree-items-group
ev.detail.children - the children of the expanded smart-tree-items-group

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of expand event.

const tree = document.querySelector('smart-tree');
tree.addEventListener('expand', function (event) {
    const detail = event.detail,
        item = detail.item,
        label = detail.label,
        path = detail.path,
        value = detail.value,
        children = detail.children;

	// event handling code goes here.
}

expandingCustomEvent

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.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onExpanding

Arguments

evCustomEvent
ev.detailObject
ev.detail.item - the smart-tree-items-group to be expanded
ev.detail.label - the label of the smart-tree-items-group to be expanded
ev.detail.path - the path of the smart-tree-items-group to be expanded
ev.detail.value - the value of the smart-tree-items-group to be expanded
ev.detail.children - the children of the smart-tree-items-group to be expanded

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of expanding event.

const tree = document.querySelector('smart-tree');
tree.addEventListener('expanding', function (event) {
    const detail = event.detail,
        item = detail.item,
        label = detail.label,
        path = detail.path,
        value = detail.value,
        children = detail.children;

	// event handling code goes here.
}

scrollBottomReachedCustomEvent

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

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onScrollBottomReached

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of scrollBottomReached event.

const tree = document.querySelector('smart-tree');
tree.addEventListener('scrollBottomReached', function (event) {
	// event handling code goes here.
}

scrollTopReachedCustomEvent

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

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onScrollTopReached

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of scrollTopReached event.

const tree = document.querySelector('smart-tree');
tree.addEventListener('scrollTopReached', function (event) {
	// event handling code goes here.
}

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.


Invoke the addAfter method.

const tree = document.querySelector('smart-tree');
tree.addAfter("newItem, 'zed'");

Try a demo showcasing the addAfter method.

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.


Invoke the addBefore method.

const tree = document.querySelector('smart-tree');
tree.addBefore("newItem, 'zed'");

Try a demo showcasing the addBefore method.

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.


Invoke the addTo method.

const tree = document.querySelector('smart-tree');
tree.addTo("newItem, 'letters'");

Try a demo showcasing the addTo method.

clearSelection(): void

Clears selection.


Invoke the clearSelection method.

const tree = document.querySelector('smart-tree');
tree.clearSelection("");

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.


Invoke the collapseAll method.

const tree = document.querySelector('smart-tree');
tree.collapseAll("true");

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.


Invoke the collapseItem method.

const tree = document.querySelector('smart-tree');
tree.collapseItem("'0.0'");

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


Invoke the ensureVisible method.

const tree = document.querySelector('smart-tree');
tree.ensureVisible("'0.0'");

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.


Invoke the expandAll method.

const tree = document.querySelector('smart-tree');
tree.expandAll("");

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.


Invoke the expandItem method.

const tree = document.querySelector('smart-tree');
tree.expandItem("'0.0'");

filter( filterQuery: string): void

Applies filter to the Tree.

Arguments

filterQuerystring

Filter query.


Invoke the filter method.

const tree = document.querySelector('smart-tree');
tree.filter("'Sun'");

getItem( id: string): HTMLElement

Gets an item by its id or numeric path.

Arguments

idstring

The id or numeric path of an item.

ReturnsHTMLElement

Invoke the getItem method.

const tree = document.querySelector('smart-tree');
const result = tree.getItem("'0.0'");

getState(): object

Returns smartTree's state

Returnsobject

Invoke the getState method.

const tree = document.querySelector('smart-tree');
const result = tree.getState("");

Try a demo showcasing the getState method.

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.


Invoke the insert method.

const tree = document.querySelector('smart-tree');
tree.insert("{ label: 'New item', shortcut: 'Ctrl+N', tagName: 'smart-tree-item' }, '1.1'");

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.


Invoke the loadState method.

const tree = document.querySelector('smart-tree');
tree.loadState(false);

Try a demo showcasing the loadState method.

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.


Invoke the moveDown method.

const tree = document.querySelector('smart-tree');
tree.moveDown("'0.0'");

Try a demo showcasing the moveDown method.

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.


Invoke the moveUp method.

const tree = document.querySelector('smart-tree');
tree.moveUp("'0.0'");

Try a demo showcasing the moveUp method.

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.


Invoke the removeItem method.

const tree = document.querySelector('smart-tree');
tree.removeItem("'0.0'");

Try a demo showcasing the removeItem method.

saveState(): object

Saves the Tree's state.

Returnsobject

Invoke the saveState method.

const tree = document.querySelector('smart-tree');
const result = tree.saveState("");

Try a demo showcasing the saveState method.

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.


Invoke the select method.

const tree = document.querySelector('smart-tree');
tree.select("'0.0'");

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.


Invoke the unselect method.

const tree = document.querySelector('smart-tree');
tree.unselect("'0.0'");

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.


Invoke the updateItem method.

const tree = document.querySelector('smart-tree');
tree.updateItem("'0.0', { disabled: false }");

CSS Variables

--smart-tree-default-widthvar()

Default value

"var(--smart-box-width)"

smartTree default width

--smart-tree-default-heightvar()

Default value

"var(--smart-box-height)"

smartTree default height

--smart-tree-scroll-button-sizevar()

Default value

"20px"

smartTree scroll buttons size

--smart-tree-lines-stylevar()

Default value

"dashed"

Default style of the connecting tree lines.

--smart-tree-indentvar()

Default value

"16px"

Defines the indent(hierarchy offset) size of the tree items.

--smart-tree-lines-colorvar()

Default value

"var(--smart-border)"

Defines the color of the connecting lines.

--smart-tree-lines-widthvar()

Default value

"1px"

Defines the width of the connecting lines.

--smart-tree-item-label-heightvar()

Default value

"36px"

Defines the height of tree item labels.

--smart-tree-item-paddingvar()

Default value

"9px 12px"

Defines the padding of the tree items.

--smart-tree-item-vertical-offsetvar()

Default value

"3px"

Defines the vertical offset of the tree items.

--smart-tree-item-horizontal-offsetvar()

Default value

"3px"

Defines the horizontal offset of the tree items.


TreeItem

Defines a tree items.

Selector

smart-tree-item

Properties

Properties

disabledboolean

Enables or disables element.

Default value

false

Example

Set the disabled property.

 <smart-tree-item disabled></smart-tree-item>

Set the disabled property by using the HTML Element's instance.

 const treeitem = document.querySelector('smart-tree-item');
 treeitem.disabled = false;

Get the disabled property.

 const treeitem = document.querySelector('smart-tree-item');
 let disabled = treeitem.disabled;

labelany

Default value

""

levelnumber

selectedboolean

Default value

false
 <smart-tree-item selected></smart-tree-item>

separatorboolean

Default value

true
 <smart-tree-item separator></smart-tree-item>

shortcutstring

Default value

""

valueany

readonlyboolean

Disables user interaction with the item.

Default value

false

Example

Set the readonly property.

 <smart-tree-item readonly></smart-tree-item>

Set the readonly property by using the HTML Element's instance.

 const treeitem = document.querySelector('smart-tree-item');
 treeitem.readonly = false;

Get the readonly property.

 const treeitem = document.querySelector('smart-tree-item');
 let readonly = treeitem.readonly;

TreeItemsGroup

Defines a group of tree items.

Selector

smart-tree-items-group

Properties

Properties

disabledboolean

Enables or disables element.

Default value

false

Example

Set the disabled property.

 <smart-tree-items-group disabled></smart-tree-items-group>

Set the disabled property by using the HTML Element's instance.

 const treeitemsgroup = document.querySelector('smart-tree-items-group');
 treeitemsgroup.disabled = false;

Get the disabled property.

 const treeitemsgroup = document.querySelector('smart-tree-items-group');
 let disabled = treeitemsgroup.disabled;

expandedboolean

Default value

false
 <smart-tree-items-group expanded></smart-tree-items-group>

labelany

Default value

""

levelnumber

selectedboolean

Default value

false
 <smart-tree-items-group selected></smart-tree-items-group>

separatorboolean

Default value

true
 <smart-tree-items-group separator></smart-tree-items-group>

valueany

readonlyboolean

Disables user interaction with the item.

Default value

false

Example

Set the readonly property.

 <smart-tree-items-group readonly></smart-tree-items-group>

Set the readonly property by using the HTML Element's instance.

 const treeitemsgroup = document.querySelector('smart-tree-items-group');
 treeitemsgroup.readonly = false;

Get the readonly property.

 const treeitemsgroup = document.querySelector('smart-tree-items-group');
 let readonly = treeitemsgroup.readonly;