Tree JAVASCRIPT UI Component API

Tree Javascript API

Tree

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

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

Try a demo showcasing the allowDrag property.

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

Try a demo showcasing the allowDrop property.

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'

Allowed Values

"none" - animation is disabled
"simple" - ripple animation is disabled
"advanced" - all animations are enabled

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

Try a demo showcasing the autoHideToggleElement property.

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

Try a demo showcasing the autoLoadState property.

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

Try a demo showcasing the autoSaveState property.

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

Try a demo showcasing the autoSort property.

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.

Try a demo showcasing the dataSource property.

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

Try a demo showcasing the displayLoadingIndicator property.

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

Try a demo showcasing the editable property.

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;

expandMode"multiple" | "single"

Determines the expand behavior of TreeItemsGroups in the Tree.

Allowed Values

"multiple" - Multiple TreeItemsGroups can be expanded at the same time.
"single" - Only one TreeItemsGroup from a group of siblings can be expanded.

Default value

"multiple"

Example

Set the expandMode property.

 <smart-tree expand-mode='single'></smart-tree>

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

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

 tree.expandMode = 'multiple';

Get the expandMode property.

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

 let expandMode = tree.expandMode;

filterableboolean

Enables or disables filtering. Shows or hides filter input.

Default value

false

Try a demo showcasing the filterable property.

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;

filterOnEnterboolean

Applies a filter only after the 'Enter' key is pressed.

Default value

false

Try a demo showcasing the filterOnEnter property.

Example

Set the filterOnEnter property.

 <smart-tree filter-on-enter></smart-tree>

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

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

 tree.filterOnEnter = false;

Get the filterOnEnter property.

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

 let filterOnEnter = tree.filterOnEnter;

filterInputPlaceholderstring

Sets custom text for placeholder in the filter input.

Default value

Try a demo showcasing the filterInputPlaceholder property.

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;

Determines the TreeItem property that will be used as a filtering criteria. By default the label property is used. It can be set to 'value' if the user wants to filter by the value property or 'textContent' if the user wants to filter by text inside the TreeItem's content or any other property.

Default value

"label"

Example

Set the filterMember property.

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

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

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

 tree.filterMember = 'textContent';

Get the filterMember property.

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

 let filterMember = tree.filterMember;

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

Sets filter mode.

Allowed Values

"contains" - displays only items with labels that contain the filter string (case sensitive)
"containsIgnoreCase" - displays only items with labels that contain the filter string (case insensitive)
"doesNotContain" - displays only items with labels that do not contain the filter string (case sensitive)
"doesNotContainIgnoreCase" - displays only items with labels that do not contain the filter string (case insensitive)
"equals" - displays only items with labels that equal the filter string (case sensitive)
"equalsIgnoreCase" - displays only items with labels that equal the filter string (case insensitive)
"startsWith" - displays only items with labels that start with the filter string (case sensitive)
"startsWithIgnoreCase" - displays only items with labels that start with the filter string (case insensitive)
"endsWith" - displays only items with labels that end with the filter string (case sensitive)
"endsWithIgnoreCase" - displays only items with labels that end with the filter string (case insensitive)

Default value

"containsIgnoreCase"

Try a demo showcasing the filterMode property.

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

Try a demo showcasing the hasThreeStates property.

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.

Allowed Values

"bottom" - positions the loading indicator at the bottom of the tree
"center" - positions the loading indicator at the center of the tree
"top" - positions the loading indicator at the top of the tree

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.

Allowed Values

"auto" - scrollbar's scroll buttons are shown only when there is not enough space for the content
"hidden" - scrollbar's scroll buttons are never shown
"scroll" - scrollbar's scroll buttons are always shown

Default value

"auto"

Try a demo showcasing the overflow property.

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

Try a demo showcasing the rightToLeft property.

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.

Allowed Values

"scrollbar" - displays scrollbar
"scrollButtons" - displays scroll buttons

Default value

"scrollbar"

Try a demo showcasing the scrollMode property.

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.

Allowed Values

"row" - the entirety of the selected item's width is highlighted
"label" - only the selected item's label is highlighted

Default value

"row"

Try a demo showcasing the selectionDisplayMode property.

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" | "zeroAndOne" | "zeroOrOne" | "one" | "checkBox" | "radioButton"

Determines selection mode.

Allowed Values

"none" - no items can be selected
"oneOrManyExtended" - one or more items can be selected; selection with Ctrl and Shift is allowed. There is always at least one selected item in the Tree.
"zeroOrMany" - any number of items can be selected or none at all
"oneOrMany" - one or more items can be selected. There is always at least one selected item
"zeroAndOne" - only one item can optionally be selected.
"zeroOrOne" - only one item can optionally be selected. Click on the selected item unselects it.
"one" - only one item can be selected. There is always at least one selected item in the Tree.
"checkBox" - items are selected by checking or unchecking checkboxes
"radioButton" - items are selected by checking radio buttons; radio button selection is applied based on groups of sibling items

Default value

"one"

Try a demo showcasing the selectionMode property.

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;

selectionTarget"all" | "leaf"

Determines whether smart-tree-items-groups can be selected.

Allowed Values

"all" - All enabled smart-tree-item and smart-tree-items-group sub-elements can be selected.
"leaf" - Only enabled smart-tree-item sub-elements can be selected; smart-tree-items-groups cannot be selected.

Default value

"all"

Example

Set the selectionTarget property.

 <smart-tree selection-target='leaf'></smart-tree>

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

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

 tree.selectionTarget = 'all';

Get the selectionTarget property.

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

 let selectionTarget = tree.selectionTarget;

showLinesboolean

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

Default value

false

Try a demo showcasing the showLines property.

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

Try a demo showcasing the showRootLines property.

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.

Try a demo showcasing the sort property.

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.

Allowed Values

"ascending" - sorts ascending
"descending" - sorts descending

Default value

"asc"

Try a demo showcasing the sortDirection property.

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

Try a demo showcasing the sorted property.

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.

Allowed Values

"near" - toggle elements are on the left
"far" - toggle elements are on the right

Default value

"near"

Try a demo showcasing the toggleElementPosition property.

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.

Allowed Values

"click" - toggles groups on click of group or toggle element (arrow)
"dblclick" - toggles groups on double-click of group or click of toggle element (arrow)
"arrow" - toggles groups only on click of toggle element (arrow)

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.

Try a demo showcasing the dragEnd event.

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.

Try a demo showcasing the dragStart event.

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.
})

swipeleftCustomEvent

This event is triggered when the user swipes to the left inside the Tree.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onSwipeleft

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 swipeleft event.

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

swiperightCustomEvent

This event is triggered when the user swipes to the right inside the Tree.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onSwiperight

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 swiperight event.

const tree = document.querySelector('smart-tree');
tree.addEventListener('swiperight', 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'");

getSelectedValues(): string[]

Gets the selected values. If value is not defined, returns the selected labels.

Returnsstring[]

Invoke the getSelectedValues method.

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

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();

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 by its index or by HTMLElement id.

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'");

setSelectedValues( items: string | string[]): void

Selects an item or items by values.

Arguments

itemsstring | string[]

The smart-tree-item/smart-tree-items-group values or labels, if values are not defined.

Invoke the setSelectedValues method.

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

unselect( item: HTMLElement | string): void

Unselects an item by its index or by HTMLElement id.

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'");

unselectValues( items: string | string[]): void

Unselects an item or items by values.

Arguments

itemsstring | string[]

The smart-tree-item/smart-tree-items-group values or labels, if values are not defined.

Invoke the unselectValues method.

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

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.

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;

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;

Tree Javascript API

allowDragboolean

Default value

Example

allowDropboolean

Default value

Example

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

Default value

Example

autoHideToggleElementboolean

Default value

Example

autoLoadStateboolean

Default value

Example

autoSaveStateboolean

Default value

Example

autoSortboolean

Default value

Example

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

Example

disabledboolean

Default value

Example

displayLoadingIndicatorboolean

Default value

Example

displayMemberstring

Default value

Example

dragFeedbackFormatFunctionfunction | null

Example

dragOffsetnumber[]

Example

editableboolean

Default value

Example

expandMode"multiple" | "single"

Default value

Example

filterableboolean

Default value

Example

filterOnEnterboolean

Default value

Example

filterInputPlaceholderstring

Default value

Example

filterMemberstring

Default value

Example

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

Default value

Example

hasThreeStatesboolean

Default value

Example

itemsMemberstring

Default value

Example

loadingIndicatorPlaceholderstring

Default value

Example