Tree — Smart UI JavaScript API

Tree — Smart UI JavaScript API

On this page + Quick start

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Tree - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-tree id="demo-tree"></smart-tree>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.tree.js';

    const el = document.getElementById('demo-tree');
    if (el) {

      el.selectionMode = 'oneOrManyExtended';
      el.toggleMode = 'arrow';
      el.dataSource = [
        { label: 'Solutions', expanded: true, items: [{ label: 'UI Components' }, { label: 'Data Visualization' }] },
        { label: 'Products', items: [{ label: 'Grid' }, { label: 'Scheduler' }, { label: 'Kanban' }] },
        { label: 'Support', items: [{ label: 'Documentation' }, { label: 'Forum' }] }
      ];
      el.selectedIndexes = ['0'];

      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>
For AI tooling

Developer Quick Reference

Component: Tree   Framework: JavaScript   Selector: smart-tree

API counts: 52 properties, 27 methods, 15 events

Common properties: 0, 1, 2, 3, 4, 5

Common methods: addAfter(), addBefore(), addTo(), clearSelection(), collapseAll(), collapseItem()

Common events: change, collapse, collapsing, dragEnd, dragging, dragStart

Module hint: smart-webcomponents/source/modules/smart.tree.js

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

Class

Tree
TreeItem
TreeItemsGroup

Tree

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

Selector

smart-tree

Quick picks

changedataSourcedisabled

Properties

AallowDragEnables drag-and-drop functionality within the current tree structure. When this option is set to 'true', users can drag items from the current tree and drop them into another tree that has the allowDrop setting enabled. This facilitates moving or copying items between compatible trees using a drag-and-drop interface.
AallowDropEnables drag-and-drop functionality, permitting items to be dropped into this tree. The dropped items may originate from either within the current tree or from a different tree, supporting both intra-tree and inter-tree item transfers.
AanimationConfigures or retrieves the current animation mode. When set to 'none', all animations are disabled. Use this property to control whether animations are enabled, disabled, or set to a specific animation style or behavior.
AautoHideToggleElementAutomatically hides the tree's toggle arrow when the mouse pointer leaves the tree area, and displays the toggle arrow again when the mouse pointer enters the tree area. This provides a cleaner interface by only showing the toggle control when the user is actively interacting with the tree.
AautoLoadStateControls whether the component automatically loads its state (including filtering, sorting, expanded, and selected items) from the browser's localStorage. When enabled, any previously saved state is retrieved and applied to the component on initialization, allowing users to resume where they left off. Disabling this option prevents the component from loading state information from localStorage.
AautoSaveStateControls whether the component automatically saves its state—including filtering, sorting, expanded rows, and selected items—to the browser’s localStorage. When enabled, these settings are preserved and restored on page reload, providing a persistent user experience.
AautoSortControls whether the tree is automatically re-sorted after changes. When autoSort is set to false, any modifications made to an already sorted tree will not trigger an automatic re-sorting; you will need to manually sort the tree to update its order. If autoSort is true, the tree will automatically re-sort itself whenever its contents are modified.
DdataSourceSpecifies the data source from which the Tree component will retrieve and display its hierarchical data. This property determines which dataset is loaded and rendered within the Tree structure.
DdisabledControls whether the smartTree widget is enabled or disabled. When enabled, users can interact with the tree and perform standard operations; when disabled, all user interaction is blocked and the tree appears visually inactive.
DdisplayLoadingIndicatorControls the visibility of the loading indicator, allowing you to display it when a process is in progress and hide it when the process completes.
DdisplayMemberSpecifies which field in the data source should be used as the label for each item—this determines the display text shown to users for every item in lists, dropdowns, or other UI elements.
DdragFeedbackFormatFunctionA callback function that allows you to customize the HTML content displayed as drag feedback during a drag-and-drop operation. This function receives a single parameter: an array containing the items currently being dragged. Use this array to generate and return your custom HTML representation for the drag feedback.
DdragOffsetSpecifies the pixel offset of the drag feedback element relative to the mouse cursor during a drag operation. This value is defined as an array, where the first element represents the horizontal (X-axis) offset and the second element represents the vertical (Y-axis) offset. Adjusting these values changes the position of the visual feedback element in relation to the cursor as items are being dragged.
DdropDownHeightSpecifies the height of the Tree component when it is rendered within a drop-down menu. Adjusting this value determines how much vertical space the Tree occupies in drop-down mode, affecting the number of visible items before scrolling is required.
DdropDownModedropDownMode
DdropDownSelectionModedropDownSelectionMode
DdropDownSelectionPathSymboldropDownSelectionPathSymbol
DdropDownSelectTemplatedropDownSelectTemplate
DdropDownWidthSpecifies the width, in pixels, of the Tree component when it appears within a drop-down interface. Adjusting this value controls how wide the drop-down Tree is rendered, allowing for customization to fit various layouts or content requirements.
EeditableControls whether an item can be edited. When enabled, users can initiate editing by double-clicking a tree item or by selecting an item and pressing F2. If disabled, editing operations for the item are prevented.
EexpandModeSpecifies how TreeItemGroups within the Tree expand or collapse, controlling whether multiple groups can be expanded simultaneously, only one group can be expanded at a time, or all groups are collapsed by default. This setting defines the expand/collapse interaction pattern for grouped items in the Tree structure.
FfilterableControls the filtering functionality within the component. When enabled, a filter input field is displayed, allowing users to refine visible data based on their input. When disabled, the filter input is hidden, and all data items are shown without filtering options.
FfilterInputPlaceholderDefines a custom placeholder text to display within the filter input field, guiding users on what they can search or filter for.
FfilterMemberSpecifies which property of the TreeItem will be used as the filtering criterion. By default, the component filters using the label property of each TreeItem. You can change this behavior by setting the property to value to filter based on the value property, or to textContent to filter based on the textual content within the TreeItem. You may also specify any other valid property name to customize the filtering logic according to your data structure. This allows for flexible and precise filtering of TreeItems based on your application's requirements.
FfilterModeSpecifies the filtering method to be applied when processing data, such as selecting between different filter types (e.g., linear, nearest, or custom). Determines how input data is modified or constrained based on the selected filter mode.
FfilterOnEnterTriggers the filter action exclusively when the 'Enter' key is pressed, ensuring that filtering occurs only after user confirmation rather than on every input change.
HhasThreeStatesConfigures or retrieves whether the tree checkboxes support three distinct states: checked, unchecked, and indeterminate. This property is applicable only when the selectionMode is set to 'checkBox'. When enabled, the indeterminate state allows parent checkboxes to visually reflect that only some of their child nodes are selected.
IitemsMemberSpecifies the field in the data source that contains the collection of subitems associated with each item group. This property maps the hierarchical structure by identifying where the subitems data for each group is stored, enabling the component to correctly render nested or grouped elements.
LloadingIndicatorPlaceholderSpecifies a custom placeholder text to display within the loading indicator when the loadingIndicatorPosition property is set to either 'top' or 'bottom'. This allows you to personalize the message shown to users while content is loading in these positions.
LloadingIndicatorPositionSpecifies the location on the screen where the loading indicator will appear, such as 'top', 'bottom', 'center', or a custom position.
LlocaleSets or retrieves the current locale (language and regional settings) used by the component. This property works together with the messages property, which provides localized text and translations based on the selected locale. Use this property to display content in different languages and formats according to user preferences.
LlocalizeFormatFunctionCallback function associated with the localization module, typically used to handle events such as language changes, translation updates, or localization data loading. This function enables the application to respond dynamically to localization-related operations.
MmessagesDefines or retrieves an object containing the text strings displayed by the widget, enabling customization for different languages and regions. This property is used together with the locale property to provide localization support, allowing you to easily translate or adjust interface text based on the user's language settings.
OoverflowDefines the behavior of the scrollbar—or, when 'scrollMode' is set to ''scrollButtons'', the scroll buttons—when the content exceeds the visible area of the element. This setting determines how users can navigate overflow content, such as automatically displaying scrollbars, enabling scroll buttons, or applying custom overflow handling.
RreadonlyIf the element is set to readonly, users will be able to see its value but will not be able to modify, edit, or interact with its content in any way. The element will appear as non-editable, ensuring that its value remains unchanged by user input.
RrightToLeftSpecifies whether right-to-left (RTL) layout support is activated. When enabled, the user interface elements, text direction, and content flow are adjusted to accommodate languages that are read from right to left, such as Arabic or Hebrew.
SscrollModeSpecifies whether to display a traditional scrollbar or to use scroll buttons for navigating content when the element’s content exceeds its visible area. This setting controls the user’s method of scrolling in overflow situations.
SselectedIndexesA list (array) containing the index paths of the currently selected items. Each element in the array represents the hierarchical position of a selected item within the data structure, allowing precise identification of multiple selections.
SselectionDisplayModeSpecifies the visual style or method used to highlight selected items, such as changing their background color, border, or font style, to indicate their selection state to the user.
SselectionModeSpecifies how selections can be made within the component, such as allowing single selection, multiple selections, or no selection at all.
SselectionTargetSpecifies whether selection is enabled for smart-tree-items-groups, allowing users to select one or more groups within the tree component. When set to true, group items in the smartTree can be selected by user interaction.
SshowLinesDisplays or hides connector lines that visually represent the relationships between elements within a group, making it easier to understand how the elements are interconnected.
SshowRootLinesControls the visibility of connector lines between tree nodes, starting from the root node. When the 'showLines' property is set to true, lines connecting the hierarchical levels of the tree are displayed; if set to false, these lines are hidden.
SsortDefines a user-provided function to specify custom sorting logic. This function allows you to determine how items are ordered, overriding the default sort behavior. It receives two items as arguments and should return a value indicating their sort order.
SsortDirectionSpecifies the sort order to be applied, allowing values of either 'ascending' (arranging items from lowest to highest) or 'descending' (arranging items from highest to lowest).
SsortedControls whether sorting functionality is enabled or disabled for the data set. When enabled, users can sort items based on specified criteria or columns; when disabled, sorting is not available.
TthemeSets or retrieves the visual theme applied to the element, allowing you to customize its appearance (such as color scheme, style, or overall look) by selecting from predefined theme options.
TtoggleElementPositionSpecifies the position of the toggle element (such as an arrow) within the component, indicating where the toggle control will be displayed relative to the content (e.g., left, right, top, or bottom).
TtoggleModeControls how groups within smart-tree-items are expanded or collapsed. Specifies the toggle behavior for displaying or hiding group items in the smartTree component.
UunfocusableDetermines whether the element can receive keyboard focus. When set, the element is focusable using keyboard navigation (such as the Tab key) or scripting. This property can also be used to check the current focusable state of the element.
UunlockKeySets or retrieves the unlockKey value used to grant access to the product. The unlockKey acts as an authorization token or password that allows users to unlock and use the product’s features.
VvalueMemberSpecifies which field in the data source provides the value for each item. This property maps item values in your component or UI element to the corresponding field in your underlying data source, ensuring the correct value is referenced and displayed.

Events

CchangeThis event is triggered whenever the selected item(s) in the smart-tree component change. It occurs both when a user selects a new item or deselects a previously selected item, allowing developers to execute custom logic in response to changes in the tree's selection state.
CcloseThis event is triggered whenever the dropdown menu is closed, either by user interaction (such as clicking outside the dropdown or selecting an option) or programmatically through the application logic. Use this event to execute any cleanup tasks or update UI elements that depend on the dropdown’s visibility state.
CcollapseThis event is triggered whenever a smart-tree-items-group component is collapsed by the user. It occurs immediately after the group transitions from an expanded (open) state to a collapsed (closed) state, allowing you to execute custom logic in response to this action.
CcollapsingThis event fires immediately before a smart-tree-items-group collapses, providing an opportunity to intercept the action. Within the event handler, you can call event.preventDefault() to cancel the collapsing operation, preventing the group from being closed. This allows developers to implement custom logic—such as confirmation dialogs or validation checks—prior to the group’s collapse.
DdragEndThis event is triggered when a smart-tree-item or smart-tree-items-group element is dropped onto a target location within the DOM during a drag-and-drop operation. You can prevent the drop action from completing—effectively canceling the move—by calling event.preventDefault() within your event handler function. This allows you to implement custom logic to determine whether the drop should be allowed or denied.
DdraggingThis event is triggered when a smart-tree-item or smart-tree-items-group component starts being dragged by the user. It occurs at the moment the drag operation begins, allowing you to implement custom logic or UI feedback during the drag-and-drop interaction within the smartTree widget.
DdragStartThis event is fired when a drag operation begins within the smart-tree component. It allows you to intercept the initiation of the drag action. By invoking event.preventDefault() within your event handler, you can cancel the drag operation before it proceeds. This provides an opportunity to implement custom logic, such as conditional validations or user permissions, before allowing or preventing the drag from taking place.
EexpandThis event is triggered when a `smart-tree-items-group` element within the tree is expanded by the user, either through a mouse click or keyboard interaction. It allows developers to execute custom logic in response to the expansion of a specific group of items within the smartTree component.
EexpandingThis event is fired just before a smart-tree-items-group is expanded. At this stage, the expansion process has not yet occurred, allowing you to perform custom logic or checks. If you want to prevent the group from expanding, call event.preventDefault() within your event handler; this will cancel the default expand action.
FfilterChangeThis event is triggered whenever the selected item in the smart-tree component changes. It occurs after a user selects a different tree node, either through mouse interaction or keyboard navigation, allowing you to respond to selection changes within the tree.
OopenThis event is triggered each time the dropdown menu becomes visible to the user, such as when the user clicks on the dropdown or focuses on the dropdown field, causing the options list to appear. Use this event to perform actions whenever the dropdown is opened, such as loading options dynamically or tracking user interactions.
SscrollBottomReachedThis event is triggered when the user scrolls the Tree component all the way to its bottom edge, indicating that the last visible item in the Tree is fully displayed. You can use this event to implement features such as infinite scrolling, lazy loading, or displaying additional content as the user reaches the end of the Tree.
SscrollTopReachedThis event is triggered when the user scrolls the Tree component and reaches the very topmost position, indicating that no more content is available above within the scrollable area.
SswipeleftThis event is triggered when the user performs a leftward swipe gesture within the Tree component. It detects when the user places their finger or cursor on the Tree and moves it horizontally to the left, allowing you to handle custom interactions or navigation in response to this action.
SswiperightThis event is triggered when the user performs a rightward swipe gesture within the Tree component. It detects when a swipe action starts inside the Tree and moves in the right direction, allowing developers to implement custom behaviors in response to this specific user interaction.

Methods

AaddAfterInserts a new item immediately after a specified item within the same parent, making it a sibling element in the list or hierarchy.
AaddBeforeInserts a new item directly before a specified existing item within the same parent, making both items siblings in the data structure.
AaddToAppends a new item to the end of the specified parent item's list of children, making it the last child within the parent structure.
CclearSelectionRemoves any current selections, resetting the selection state to none. This action ensures that no items remain highlighted or marked as selected.
CcloseDropDownCloses the dropdown menu when the Tree component is operating in dropdown mode, ensuring that the dropdown is dismissed upon selection or when appropriate user interactions occur.
CcollapseAllCollapses all elements with the class smart-tree-items-group, ensuring that every expandable group within the tree component is minimized and any nested content is hidden from view. This action provides a streamlined overview of the tree by hiding detailed or child items under each group.
CcollapseItemCollapses the specified smart-tree-items-group, hiding all of its nested child items from view within the tree component. This action changes the group's state to collapsed, providing a more compact tree display by temporarily concealing its contents.
EensureVisibleEnsures that a specified item is brought into the visible area of the scrollable container by automatically scrolling the container as needed, so the item is fully or partially in view for the user.
EexpandAllExpands all elements within the tree component that are assigned the 'smart-tree-items-group' class, making every group and its child items visible in the tree view.
EexpandItemExpands a specific group within the smartTree component, displaying all child items associated with the selected tree group. This action reveals the contents of a single smart-tree-items-group node, making its nested items visible to the user.
FfilterApplies a filter to the Tree component, displaying only the nodes that match the specified criteria while hiding all others. This helps users easily find and focus on relevant items within the tree structure.
GgetFilterRetrieves the currently active filter, including its criteria and settings, that has been applied to the data set.
GgetItemRetrieves a specific item by using either its unique identifier (ID) or a numeric path value. This function supports both string-based IDs and numeric paths to locate and return the corresponding item from the collection.
GgetSelectedValuesRetrieves the currently selected values from the component. If no value is explicitly set, the method returns the labels of the selected items instead.
GgetStateReturns the current state of the smartTree component, including information such as which nodes are expanded, collapsed, selected, or checked. This allows you to save or restore the tree’s structure and user interactions.
IinsertInserts a specified item into the array or list at the designated index, shifting subsequent items to the right to accommodate the new element. If the given position is out of range, an error may be thrown or the item may be added at the nearest valid position, depending on implementation.
LloadStateLoads and restores the current state of the Tree, including expanded or collapsed branches, selected nodes, and any custom configurations. This ensures the Tree appears as it was previously saved or last interacted with.
MmoveDownMoves the selected item one position lower in the order among its sibling elements, placing it directly after the next sibling in the list.
MmoveUpMoves the specified item one position higher in the list of its sibling items, effectively placing it before the previous sibling in the order.
OopenDropDownDisplays the dropdown menu when the Tree component is set to dropdown mode, allowing users to interact with the tree structure within a dropdown interface.
RremoveItemRemoves a specified item from the collection or list. This operation locates the target item based on the provided identifier or criteria and deletes it from the data structure, ensuring that the collection is updated accordingly. If the item does not exist, no action is taken.
SsaveStatePersists the current state of the Tree structure, including all nodes, their expanded or collapsed statuses, and any selection information, allowing the Tree to be accurately restored in future sessions.
SselectAllows selection of an item either by specifying its numerical index in the list or by providing the item's unique HTMLElement ID. This enables precise targeting of elements for further operations.
SsetSelectedValuesSelects one or multiple items from a list based on their specified values. This allows you to programmatically choose which items are highlighted or marked as selected, using their corresponding value identifiers.
UunselectDeselects a specified item, either by providing its numeric index in the list or by passing the item's HTMLElement ID as a string.
UunselectValuesDeselects one or more items based on their specified values, removing them from the current selection set.
UupdateItemUpdates an existing item in the database with new values provided in the request. This operation locates the item by its unique identifier and applies the specified changes to its properties. Returns the updated item upon success.

Properties

allowDragEnables drag-and-drop functionality within the current tree structure. When this option is set to 'true', users can drag items from the current tree and drop them into another tree that has the allowDrop setting enabled. This facilitates moving or copying items between compatible trees using a drag-and-drop interface.boolean

Enables drag-and-drop functionality within the current tree structure. When this option is set to 'true', users can drag items from the current tree and drop them into another tree that has the allowDrop setting enabled. This facilitates moving or copying items between compatible trees using a drag-and-drop interface.

Default value

false
Try a demo showcasing the allowDrag property.

Examples

Markup and runtime examples for allowDrag:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

allowDropEnables drag-and-drop functionality, permitting items to be dropped into this tree. The dropped items may originate from either within the current tree or from a different tree, supporting both intra-tree and inter-tree item transfers.boolean

Enables drag-and-drop functionality, permitting items to be dropped into this tree. The dropped items may originate from either within the current tree or from a different tree, supporting both intra-tree and inter-tree item transfers.

Default value

false
Try a demo showcasing the allowDrop property.

Examples

Markup and runtime examples for allowDrop:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

animationConfigures or retrieves the current animation mode. When set to 'none', all animations are disabled. Use this property to control whether animations are enabled, disabled, or set to a specific animation style or behavior."none" | "simple" | "advanced"

Configures or retrieves the current animation mode. When set to 'none', all animations are disabled. Use this property to control whether animations are enabled, disabled, or set to a specific animation style or behavior.

Allowed Values

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

Default value

"advanced"

Examples

Markup and runtime examples for animation:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

autoHideToggleElementAutomatically hides the tree's toggle arrow when the mouse pointer leaves the tree area, and displays the toggle arrow again when the mouse pointer enters the tree area. This provides a cleaner interface by only showing the toggle control when the user is actively interacting with the tree.boolean

Automatically hides the tree's toggle arrow when the mouse pointer leaves the tree area, and displays the toggle arrow again when the mouse pointer enters the tree area. This provides a cleaner interface by only showing the toggle control when the user is actively interacting with the tree.

Default value

false
Try a demo showcasing the autoHideToggleElement property.

Examples

Markup and runtime examples for autoHideToggleElement:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

autoLoadStateControls whether the component automatically loads its state (including filtering, sorting, expanded, and selected items) from the browser's localStorage. When enabled, any previously saved state is retrieved and applied to the component on initialization, allowing users to resume where they left off. Disabling this option prevents the component from loading state information from localStorage.boolean

Controls whether the component automatically loads its state (including filtering, sorting, expanded, and selected items) from the browser's localStorage. When enabled, any previously saved state is retrieved and applied to the component on initialization, allowing users to resume where they left off. Disabling this option prevents the component from loading state information from localStorage.

Default value

false
Try a demo showcasing the autoLoadState property.

Examples

Markup and runtime examples for autoLoadState:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

autoSaveStateControls whether the component automatically saves its state—including filtering, sorting, expanded rows, and selected items—to the browser’s localStorage. When enabled, these settings are preserved and restored on page reload, providing a persistent user experience.boolean

Controls whether the component automatically saves its state—including filtering, sorting, expanded rows, and selected items—to the browser’s localStorage. When enabled, these settings are preserved and restored on page reload, providing a persistent user experience.

Default value

false
Try a demo showcasing the autoSaveState property.

Examples

Markup and runtime examples for autoSaveState:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

autoSortControls whether the tree is automatically re-sorted after changes. When autoSort is set to false, any modifications made to an already sorted tree will not trigger an automatic re-sorting; you will need to manually sort the tree to update its order. If autoSort is true, the tree will automatically re-sort itself whenever its contents are modified.boolean

Controls whether the tree is automatically re-sorted after changes. When autoSort is set to false, any modifications made to an already sorted tree will not trigger an automatic re-sorting; you will need to manually sort the tree to update its order. If autoSort is true, the tree will automatically re-sort itself whenever its contents are modified.

Default value

true
Try a demo showcasing the autoSort property.

Examples

Markup and runtime examples for autoSort:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

dataSourceSpecifies the data source from which the Tree component will retrieve and display its hierarchical data. This property determines which dataset is loaded and rendered within the Tree structure.{label?: string, checked?: boolean, shortcut?: string, value?: any, selected?: boolean, items?: any[]}[]

Specifies the data source from which the Tree component will retrieve and display its hierarchical data. This property determines which dataset is loaded and rendered within the Tree structure.

Try a demo showcasing the dataSource property.

Examples

Markup and runtime examples for dataSource:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

disabledControls whether the smartTree widget is enabled or disabled. When enabled, users can interact with the tree and perform standard operations; when disabled, all user interaction is blocked and the tree appears visually inactive.boolean

Controls whether the smartTree widget is enabled or disabled. When enabled, users can interact with the tree and perform standard operations; when disabled, all user interaction is blocked and the tree appears visually inactive.

Default value

false
Try a demo showcasing the disabled property.

Examples

Markup and runtime examples for disabled:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

displayLoadingIndicatorControls the visibility of the loading indicator, allowing you to display it when a process is in progress and hide it when the process completes.boolean

Controls the visibility of the loading indicator, allowing you to display it when a process is in progress and hide it when the process completes.

Default value

false
Try a demo showcasing the displayLoadingIndicator property.

Examples

Markup and runtime examples for displayLoadingIndicator:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

displayMemberSpecifies which field in the data source should be used as the label for each item—this determines the display text shown to users for every item in lists, dropdowns, or other UI elements.string

Specifies which field in the data source should be used as the label for each item—this determines the display text shown to users for every item in lists, dropdowns, or other UI elements.

Default value

"label"

Examples

Markup and runtime examples for displayMember:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

dragFeedbackFormatFunctionA callback function that allows you to customize the HTML content displayed as drag feedback during a drag-and-drop operation. This function receives a single parameter: an array containing the items currently being dragged. Use this array to generate and return your custom HTML representation for the drag feedback.function | null

A callback function that allows you to customize the HTML content displayed as drag feedback during a drag-and-drop operation. This function receives a single parameter: an array containing the items currently being dragged. Use this array to generate and return your custom HTML representation for the drag feedback.

Examples

Markup and runtime examples for dragFeedbackFormatFunction:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

dragOffsetSpecifies the pixel offset of the drag feedback element relative to the mouse cursor during a drag operation. This value is defined as an array, where the first element represents the horizontal (X-axis) offset and the second element represents the vertical (Y-axis) offset. Adjusting these values changes the position of the visual feedback element in relation to the cursor as items are being dragged. number[]

Specifies the pixel offset of the drag feedback element relative to the mouse cursor during a drag operation. This value is defined as an array, where the first element represents the horizontal (X-axis) offset and the second element represents the vertical (Y-axis) offset. Adjusting these values changes the position of the visual feedback element in relation to the cursor as items are being dragged.

Examples

Markup and runtime examples for dragOffset:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

dropDownHeightSpecifies the height of the Tree component when it is rendered within a drop-down menu. Adjusting this value determines how much vertical space the Tree occupies in drop-down mode, affecting the number of visible items before scrolling is required.number

Specifies the height of the Tree component when it is rendered within a drop-down menu. Adjusting this value determines how much vertical space the Tree occupies in drop-down mode, affecting the number of visible items before scrolling is required.

Default value

400
Try a demo showcasing the dropDownHeight property.

Examples

Markup and runtime examples for dropDownHeight:

HTML:

<smart-tree drop-down-height="null"></smart-tree>

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

dropDownModeboolean

Default value

false

HTML attribute:

<smart-tree drop-down-mode></smart-tree>

dropDownSelectionMode"label" | "path"



Allowed Values

  • "label" - Displays the selected item's label.
  • "path" - Displays the selected path i.e the selected item's label and the labels of its parents.

Default value

"label"
Try a demo showcasing the dropDownSelectionMode property.

dropDownSelectionPathSymbolstring

Default value

"→"
Try a demo showcasing the dropDownSelectionPathSymbol property.

dropDownSelectTemplateany

Try a demo showcasing the dropDownSelectTemplate property.

dropDownWidthSpecifies the width, in pixels, of the Tree component when it appears within a drop-down interface. Adjusting this value controls how wide the drop-down Tree is rendered, allowing for customization to fit various layouts or content requirements.number

Specifies the width, in pixels, of the Tree component when it appears within a drop-down interface. Adjusting this value controls how wide the drop-down Tree is rendered, allowing for customization to fit various layouts or content requirements.

Default value

300

Examples

Markup and runtime examples for dropDownWidth:

HTML:

<smart-tree drop-down-width="null"></smart-tree>

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

editableControls whether an item can be edited. When enabled, users can initiate editing by double-clicking a tree item or by selecting an item and pressing F2. If disabled, editing operations for the item are prevented.boolean

Controls whether an item can be edited. When enabled, users can initiate editing by double-clicking a tree item or by selecting an item and pressing F2. If disabled, editing operations for the item are prevented.

Default value

false
Try a demo showcasing the editable property.

Examples

Markup and runtime examples for editable:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

expandModeSpecifies how TreeItemGroups within the Tree expand or collapse, controlling whether multiple groups can be expanded simultaneously, only one group can be expanded at a time, or all groups are collapsed by default. This setting defines the expand/collapse interaction pattern for grouped items in the Tree structure."multiple" | "single"

Specifies how TreeItemGroups within the Tree expand or collapse, controlling whether multiple groups can be expanded simultaneously, only one group can be expanded at a time, or all groups are collapsed by default. This setting defines the expand/collapse interaction pattern for grouped items in the Tree structure.

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"

Examples

Markup and runtime examples for expandMode:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-tree');
el.expandMode = "multiple";

Read the current value:

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

filterableControls the filtering functionality within the component. When enabled, a filter input field is displayed, allowing users to refine visible data based on their input. When disabled, the filter input is hidden, and all data items are shown without filtering options.boolean

Controls the filtering functionality within the component. When enabled, a filter input field is displayed, allowing users to refine visible data based on their input. When disabled, the filter input is hidden, and all data items are shown without filtering options.

Default value

false
Try a demo showcasing the filterable property.

Examples

Markup and runtime examples for filterable:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

filterInputPlaceholderDefines a custom placeholder text to display within the filter input field, guiding users on what they can search or filter for.string

Defines a custom placeholder text to display within the filter input field, guiding users on what they can search or filter for.

Default value

""
Try a demo showcasing the filterInputPlaceholder property.

Examples

Markup and runtime examples for filterInputPlaceholder:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

filterMemberSpecifies which property of the TreeItem will be used as the filtering criterion. By default, the component filters using the label property of each TreeItem. You can change this behavior by setting the property to value to filter based on the value property, or to textContent to filter based on the textual content within the TreeItem. You may also specify any other valid property name to customize the filtering logic according to your data structure. This allows for flexible and precise filtering of TreeItems based on your application's requirements.string

Specifies which property of the TreeItem will be used as the filtering criterion. By default, the component filters using the label property of each TreeItem. You can change this behavior by setting the property to value to filter based on the value property, or to textContent to filter based on the textual content within the TreeItem. You may also specify any other valid property name to customize the filtering logic according to your data structure. This allows for flexible and precise filtering of TreeItems based on your application's requirements.

Default value

"label"
Try a demo showcasing the filterMember property.

Examples

Markup and runtime examples for filterMember:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-tree');
el.filterMember = "textContent";

Read the current value:

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

filterModeSpecifies the filtering method to be applied when processing data, such as selecting between different filter types (e.g., linear, nearest, or custom). Determines how input data is modified or constrained based on the selected filter mode."contains" | "containsIgnoreCase" | "doesNotContain" | "doesNotContainIgnoreCase" | "equals" | "equalsIgnoreCase" | "startsWith" | "startsWithIgnoreCase" | "endsWith" | "endsWithIgnoreCase"

Specifies the filtering method to be applied when processing data, such as selecting between different filter types (e.g., linear, nearest, or custom). Determines how input data is modified or constrained based on the selected 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.

Examples

Markup and runtime examples for filterMode:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

filterOnEnterTriggers the filter action exclusively when the 'Enter' key is pressed, ensuring that filtering occurs only after user confirmation rather than on every input change.boolean

Triggers the filter action exclusively when the 'Enter' key is pressed, ensuring that filtering occurs only after user confirmation rather than on every input change.

Default value

false
Try a demo showcasing the filterOnEnter property.

Examples

Markup and runtime examples for filterOnEnter:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

hasThreeStatesConfigures or retrieves whether the tree checkboxes support three distinct states: checked, unchecked, and indeterminate. This property is applicable only when the selectionMode is set to 'checkBox'. When enabled, the indeterminate state allows parent checkboxes to visually reflect that only some of their child nodes are selected.boolean

Configures or retrieves whether the tree checkboxes support three distinct states: checked, unchecked, and indeterminate. This property is applicable only when the selectionMode is set to 'checkBox'. When enabled, the indeterminate state allows parent checkboxes to visually reflect that only some of their child nodes are selected.

Default value

false
Try a demo showcasing the hasThreeStates property.

Examples

Markup and runtime examples for hasThreeStates:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

itemsMemberSpecifies the field in the data source that contains the collection of subitems associated with each item group. This property maps the hierarchical structure by identifying where the subitems data for each group is stored, enabling the component to correctly render nested or grouped elements.string

Specifies the field in the data source that contains the collection of subitems associated with each item group. This property maps the hierarchical structure by identifying where the subitems data for each group is stored, enabling the component to correctly render nested or grouped elements.

Default value

"items"

Examples

Markup and runtime examples for itemsMember:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

loadingIndicatorPlaceholderSpecifies a custom placeholder text to display within the loading indicator when the loadingIndicatorPosition property is set to either 'top' or 'bottom'. This allows you to personalize the message shown to users while content is loading in these positions.string

Specifies a custom placeholder text to display within the loading indicator when the loadingIndicatorPosition property is set to either 'top' or 'bottom'. This allows you to personalize the message shown to users while content is loading in these positions.

Default value

"Loading..."

Examples

Markup and runtime examples for loadingIndicatorPlaceholder:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

loadingIndicatorPositionSpecifies the location on the screen where the loading indicator will appear, such as 'top', 'bottom', 'center', or a custom position."bottom" | "center" | "top"

Specifies the location on the screen where the loading indicator will appear, such as 'top', 'bottom', 'center', or a custom position.

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"

Examples

Markup and runtime examples for loadingIndicatorPosition:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

localeSets or retrieves the current locale (language and regional settings) used by the component. This property works together with the messages property, which provides localized text and translations based on the selected locale. Use this property to display content in different languages and formats according to user preferences.string

Sets or retrieves the current locale (language and regional settings) used by the component. This property works together with the messages property, which provides localized text and translations based on the selected locale. Use this property to display content in different languages and formats according to user preferences.

Default value

"en"
Try a demo showcasing the locale property.

Examples

Markup and runtime examples for locale:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

localizeFormatFunctionCallback function associated with the localization module, typically used to handle events such as language changes, translation updates, or localization data loading. This function enables the application to respond dynamically to localization-related operations.function | null

Callback function associated with the localization module, typically used to handle events such as language changes, translation updates, or localization data loading. This function enables the application to respond dynamically to localization-related operations.

Examples

Markup and runtime examples for localizeFormatFunction:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

messagesDefines or retrieves an object containing the text strings displayed by the widget, enabling customization for different languages and regions. This property is used together with the locale property to provide localization support, allowing you to easily translate or adjust interface text based on the user's language settings.object

Defines or retrieves an object containing the text strings displayed by the widget, enabling customization for different languages and regions. This property is used together with the locale property to provide localization support, allowing you to easily translate or adjust interface text based on the user's language settings.

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

}

Examples

Markup and runtime examples for messages:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

overflowDefines the behavior of the scrollbar—or, when 'scrollMode' is set to ''scrollButtons'', the scroll buttons—when the content exceeds the visible area of the element. This setting determines how users can navigate overflow content, such as automatically displaying scrollbars, enabling scroll buttons, or applying custom overflow handling."auto" | "hidden" | "scroll"

Defines the behavior of the scrollbar—or, when 'scrollMode' is set to ''scrollButtons'', the scroll buttons—when the content exceeds the visible area of the element. This setting determines how users can navigate overflow content, such as automatically displaying scrollbars, enabling scroll buttons, or applying custom overflow handling.

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.

Examples

Markup and runtime examples for overflow:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

readonlyIf the element is set to readonly, users will be able to see its value but will not be able to modify, edit, or interact with its content in any way. The element will appear as non-editable, ensuring that its value remains unchanged by user input.boolean

If the element is set to readonly, users will be able to see its value but will not be able to modify, edit, or interact with its content in any way. The element will appear as non-editable, ensuring that its value remains unchanged by user input.

Default value

false
Try a demo showcasing the readonly property.

Examples

Markup and runtime examples for readonly:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

rightToLeftSpecifies whether right-to-left (RTL) layout support is activated. When enabled, the user interface elements, text direction, and content flow are adjusted to accommodate languages that are read from right to left, such as Arabic or Hebrew.boolean

Specifies whether right-to-left (RTL) layout support is activated. When enabled, the user interface elements, text direction, and content flow are adjusted to accommodate languages that are read from right to left, such as Arabic or Hebrew.

Default value

false
Try a demo showcasing the rightToLeft property.

Examples

Markup and runtime examples for rightToLeft:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

scrollModeSpecifies whether to display a traditional scrollbar or to use scroll buttons for navigating content when the element’s content exceeds its visible area. This setting controls the user’s method of scrolling in overflow situations."scrollbar" | "scrollButtons"

Specifies whether to display a traditional scrollbar or to use scroll buttons for navigating content when the element’s content exceeds its visible area. This setting controls the user’s method of scrolling in overflow situations.

Allowed Values

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

Default value

"scrollbar"
Try a demo showcasing the scrollMode property.

Examples

Markup and runtime examples for scrollMode:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

selectedIndexesA list (array) containing the index paths of the currently selected items. Each element in the array represents the hierarchical position of a selected item within the data structure, allowing precise identification of multiple selections. string[]

A list (array) containing the index paths of the currently selected items. Each element in the array represents the hierarchical position of a selected item within the data structure, allowing precise identification of multiple selections.

Try a demo showcasing the selectedIndexes property.

Examples

Markup and runtime examples for selectedIndexes:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

selectionDisplayModeSpecifies the visual style or method used to highlight selected items, such as changing their background color, border, or font style, to indicate their selection state to the user."row" | "label"

Specifies the visual style or method used to highlight selected items, such as changing their background color, border, or font style, to indicate their selection state to the user.

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.

Examples

Markup and runtime examples for selectionDisplayMode:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

selectionModeSpecifies how selections can be made within the component, such as allowing single selection, multiple selections, or no selection at all."none" | "oneOrManyExtended" | "zeroOrMany" | "oneOrMany" | "zeroAndOne" | "zeroOrOne" | "one" | "checkBox" | "radioButton"

Specifies how selections can be made within the component, such as allowing single selection, multiple selections, or no selection at all.

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.

Examples

Markup and runtime examples for selectionMode:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

selectionTargetSpecifies whether selection is enabled for smart-tree-items-groups, allowing users to select one or more groups within the tree component. When set to true, group items in the smartTree can be selected by user interaction."all" | "leaf"

Specifies whether selection is enabled for smart-tree-items-groups, allowing users to select one or more groups within the tree component. When set to true, group items in the smartTree can be selected by user interaction.

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"
Try a demo showcasing the selectionTarget property.

Examples

Markup and runtime examples for selectionTarget:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-tree');
el.selectionTarget = "all";

Read the current value:

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

showLinesDisplays or hides connector lines that visually represent the relationships between elements within a group, making it easier to understand how the elements are interconnected.boolean

Displays or hides connector lines that visually represent the relationships between elements within a group, making it easier to understand how the elements are interconnected.

Default value

false
Try a demo showcasing the showLines property.

Examples

Markup and runtime examples for showLines:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

showRootLinesControls the visibility of connector lines between tree nodes, starting from the root node. When the 'showLines' property is set to true, lines connecting the hierarchical levels of the tree are displayed; if set to false, these lines are hidden.boolean

Controls the visibility of connector lines between tree nodes, starting from the root node. When the 'showLines' property is set to true, lines connecting the hierarchical levels of the tree are displayed; if set to false, these lines are hidden.

Default value

false
Try a demo showcasing the showRootLines property.

Examples

Markup and runtime examples for showRootLines:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

sortDefines a user-provided function to specify custom sorting logic. This function allows you to determine how items are ordered, overriding the default sort behavior. It receives two items as arguments and should return a value indicating their sort order.function | null

Defines a user-provided function to specify custom sorting logic. This function allows you to determine how items are ordered, overriding the default sort behavior. It receives two items as arguments and should return a value indicating their sort order.

Try a demo showcasing the sort property.

Examples

Markup and runtime examples for sort:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

sortDirectionSpecifies the sort order to be applied, allowing values of either 'ascending' (arranging items from lowest to highest) or 'descending' (arranging items from highest to lowest)."ascending" | "descending"

Specifies the sort order to be applied, allowing values of either 'ascending' (arranging items from lowest to highest) or 'descending' (arranging items from highest to lowest).

Allowed Values

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

Default value

"asc"
Try a demo showcasing the sortDirection property.

Examples

Markup and runtime examples for sortDirection:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

sortedControls whether sorting functionality is enabled or disabled for the data set. When enabled, users can sort items based on specified criteria or columns; when disabled, sorting is not available.boolean

Controls whether sorting functionality is enabled or disabled for the data set. When enabled, users can sort items based on specified criteria or columns; when disabled, sorting is not available.

Default value

false
Try a demo showcasing the sorted property.

Examples

Markup and runtime examples for sorted:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

themeSets or retrieves the visual theme applied to the element, allowing you to customize its appearance (such as color scheme, style, or overall look) by selecting from predefined theme options.string

Sets or retrieves the visual theme applied to the element, allowing you to customize its appearance (such as color scheme, style, or overall look) by selecting from predefined theme options.

Default value

""
Try a demo showcasing the theme property.

Examples

Markup and runtime examples for theme:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

toggleElementPositionSpecifies the position of the toggle element (such as an arrow) within the component, indicating where the toggle control will be displayed relative to the content (e.g., left, right, top, or bottom)."near" | "far"

Specifies the position of the toggle element (such as an arrow) within the component, indicating where the toggle control will be displayed relative to the content (e.g., left, right, top, or bottom).

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.

Examples

Markup and runtime examples for toggleElementPosition:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

toggleModeControls how groups within smart-tree-items are expanded or collapsed. Specifies the toggle behavior for displaying or hiding group items in the smartTree component."click" | "dblclick" | "arrow"

Controls how groups within smart-tree-items are expanded or collapsed. Specifies the toggle behavior for displaying or hiding group items in the smartTree component.

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"
Try a demo showcasing the toggleMode property.

Examples

Markup and runtime examples for toggleMode:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

unfocusableDetermines whether the element can receive keyboard focus. When set, the element is focusable using keyboard navigation (such as the Tab key) or scripting. This property can also be used to check the current focusable state of the element.boolean

Determines whether the element can receive keyboard focus. When set, the element is focusable using keyboard navigation (such as the Tab key) or scripting. This property can also be used to check the current focusable state of the element.

Default value

false
Try a demo showcasing the unfocusable property.

Examples

Markup and runtime examples for unfocusable:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

unlockKeySets or retrieves the unlockKey value used to grant access to the product. The unlockKey acts as an authorization token or password that allows users to unlock and use the product’s features.string

Sets or retrieves the unlockKey value used to grant access to the product. The unlockKey acts as an authorization token or password that allows users to unlock and use the product’s features.

Default value

""

Examples

Markup and runtime examples for unlockKey:

HTML:

<smart-tree unlock-key=""></smart-tree>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-tree');
el.unlockKey = "1111-2222-3333-4444-5555";

Read the current value:

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

valueMemberSpecifies which field in the data source provides the value for each item. This property maps item values in your component or UI element to the corresponding field in your underlying data source, ensuring the correct value is referenced and displayed.string

Specifies which field in the data source provides the value for each item. This property maps item values in your component or UI element to the corresponding field in your underlying data source, ensuring the correct value is referenced and displayed.

Default value

"value"

Examples

Markup and runtime examples for valueMember:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

Events

changeThis event is triggered whenever the selected item(s) in the smart-tree component change. It occurs both when a user selects a new item or deselects a previously selected item, allowing developers to execute custom logic in response to changes in the tree's selection state.CustomEvent

This event is triggered whenever the selected item(s) in the smart-tree component change. It occurs both when a user selects a new item or deselects a previously selected item, allowing developers to execute custom logic in response to changes in the tree's selection state.

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

Try a demo showcasing the change event.

Examples

Listen for change using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

closeThis event is triggered whenever the dropdown menu is closed, either by user interaction (such as clicking outside the dropdown or selecting an option) or programmatically through the application logic. Use this event to execute any cleanup tasks or update UI elements that depend on the dropdown’s visibility state.CustomEvent

This event is triggered whenever the dropdown menu is closed, either by user interaction (such as clicking outside the dropdown or selecting an option) or programmatically through the application logic. Use this event to execute any cleanup tasks or update UI elements that depend on the dropdown’s visibility state.

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

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.

Try a demo showcasing the close event.

Examples

Listen for close using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-tree')?.addEventListener('close', (event) => {
	// event handling code goes here.
})

collapseThis event is triggered whenever a smart-tree-items-group component is collapsed by the user. It occurs immediately after the group transitions from an expanded (open) state to a collapsed (closed) state, allowing you to execute custom logic in response to this action.CustomEvent

This event is triggered whenever a smart-tree-items-group component is collapsed by the user. It occurs immediately after the group transitions from an expanded (open) state to a collapsed (closed) state, allowing you to execute custom logic in response to this action.

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

Try a demo showcasing the collapse event.

Examples

Listen for collapse using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-tree')?.addEventListener('collapse', (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.
})

collapsingThis event fires immediately before a smart-tree-items-group collapses, providing an opportunity to intercept the action. Within the event handler, you can call event.preventDefault() to cancel the collapsing operation, preventing the group from being closed. This allows developers to implement custom logic—such as confirmation dialogs or validation checks—prior to the group’s collapse.CustomEvent

This event fires immediately before a smart-tree-items-group collapses, providing an opportunity to intercept the action. Within the event handler, you can call event.preventDefault() to cancel the collapsing operation, preventing the group from being closed. This allows developers to implement custom logic—such as confirmation dialogs or validation checks—prior to the group’s collapse.

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

Examples

Listen for collapsing using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-tree')?.addEventListener('collapsing', (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.
})

dragEndThis event is triggered when a smart-tree-item or smart-tree-items-group element is dropped onto a target location within the DOM during a drag-and-drop operation. You can prevent the drop action from completing—effectively canceling the move—by calling event.preventDefault() within your event handler function. This allows you to implement custom logic to determine whether the drop should be allowed or denied.CustomEvent

This event is triggered when a smart-tree-item or smart-tree-items-group element is dropped onto a target location within the DOM during a drag-and-drop operation. You can prevent the drop action from completing—effectively canceling the move—by calling event.preventDefault() within your event handler function. This allows you to implement custom logic to determine whether the drop should be allowed or denied.

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

Examples

Listen for dragEnd using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-tree')?.addEventListener('dragEnd', (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.
})

draggingThis event is triggered when a smart-tree-item or smart-tree-items-group component starts being dragged by the user. It occurs at the moment the drag operation begins, allowing you to implement custom logic or UI feedback during the drag-and-drop interaction within the smartTree widget.CustomEvent

This event is triggered when a smart-tree-item or smart-tree-items-group component starts being dragged by the user. It occurs at the moment the drag operation begins, allowing you to implement custom logic or UI feedback during the drag-and-drop interaction within the smartTree widget.

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

Examples

Listen for dragging using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

dragStartThis event is fired when a drag operation begins within the smart-tree component. It allows you to intercept the initiation of the drag action. By invoking event.preventDefault() within your event handler, you can cancel the drag operation before it proceeds. This provides an opportunity to implement custom logic, such as conditional validations or user permissions, before allowing or preventing the drag from taking place.CustomEvent

This event is fired when a drag operation begins within the smart-tree component. It allows you to intercept the initiation of the drag action. By invoking event.preventDefault() within your event handler, you can cancel the drag operation before it proceeds. This provides an opportunity to implement custom logic, such as conditional validations or user permissions, before allowing or preventing the drag from taking place.

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

Examples

Listen for dragStart using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-tree')?.addEventListener('dragStart', (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.
})

expandThis event is triggered when a `smart-tree-items-group` element within the tree is expanded by the user, either through a mouse click or keyboard interaction. It allows developers to execute custom logic in response to the expansion of a specific group of items within the smartTree component.CustomEvent

This event is triggered when a `smart-tree-items-group` element within the tree is expanded by the user, either through a mouse click or keyboard interaction. It allows developers to execute custom logic in response to the expansion of a specific group of items within the smartTree component.

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

Try a demo showcasing the expand event.

Examples

Listen for expand using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-tree')?.addEventListener('expand', (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.
})

expandingThis event is fired just before a smart-tree-items-group is expanded. At this stage, the expansion process has not yet occurred, allowing you to perform custom logic or checks. If you want to prevent the group from expanding, call event.preventDefault() within your event handler; this will cancel the default expand action.CustomEvent

This event is fired just before a smart-tree-items-group is expanded. At this stage, the expansion process has not yet occurred, allowing you to perform custom logic or checks. If you want to prevent the group from expanding, call event.preventDefault() within your event handler; this will cancel the default expand action.

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

Try a demo showcasing the expanding event.

Examples

Listen for expanding using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-tree')?.addEventListener('expanding', (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.
})

filterChangeThis event is triggered whenever the selected item in the smart-tree component changes. It occurs after a user selects a different tree node, either through mouse interaction or keyboard navigation, allowing you to respond to selection changes within the tree.CustomEvent

This event is triggered whenever the selected item in the smart-tree component changes. It occurs after a user selects a different tree node, either through mouse interaction or keyboard navigation, allowing you to respond to selection changes within the tree.

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

Arguments

evCustomEvent
ev.detailObject
ev.detail.value - The filter input value.

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

Examples

Listen for filterChange using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-tree')?.addEventListener('filterChange', (event) => {
    const detail = event.detail,
        value = detail.value;

	// event handling code goes here.
})

openThis event is triggered each time the dropdown menu becomes visible to the user, such as when the user clicks on the dropdown or focuses on the dropdown field, causing the options list to appear. Use this event to perform actions whenever the dropdown is opened, such as loading options dynamically or tracking user interactions.CustomEvent

This event is triggered each time the dropdown menu becomes visible to the user, such as when the user clicks on the dropdown or focuses on the dropdown field, causing the options list to appear. Use this event to perform actions whenever the dropdown is opened, such as loading options dynamically or tracking user interactions.

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

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.

Try a demo showcasing the open event.

Examples

Listen for open using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-tree')?.addEventListener('open', (event) => {
	// event handling code goes here.
})

scrollBottomReachedThis event is triggered when the user scrolls the Tree component all the way to its bottom edge, indicating that the last visible item in the Tree is fully displayed. You can use this event to implement features such as infinite scrolling, lazy loading, or displaying additional content as the user reaches the end of the Tree.CustomEvent

This event is triggered when the user scrolls the Tree component all the way to its bottom edge, indicating that the last visible item in the Tree is fully displayed. You can use this event to implement features such as infinite scrolling, lazy loading, or displaying additional content as the user reaches the end of the Tree.

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

Try a demo showcasing the scrollBottomReached event.

Examples

Listen for scrollBottomReached using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

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

scrollTopReachedThis event is triggered when the user scrolls the Tree component and reaches the very topmost position, indicating that no more content is available above within the scrollable area.CustomEvent

This event is triggered when the user scrolls the Tree component and reaches the very topmost position, indicating that no more content is available above within the scrollable area.

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

Try a demo showcasing the scrollTopReached event.

Examples

Listen for scrollTopReached using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

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

swipeleftThis event is triggered when the user performs a leftward swipe gesture within the Tree component. It detects when the user places their finger or cursor on the Tree and moves it horizontally to the left, allowing you to handle custom interactions or navigation in response to this action.CustomEvent

This event is triggered when the user performs a leftward swipe gesture within the Tree component. It detects when the user places their finger or cursor on the Tree and moves it horizontally to the left, allowing you to handle custom interactions or navigation in response to this action.

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

Try a demo showcasing the swipeleft event.

Examples

Listen for swipeleft using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

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

swiperightThis event is triggered when the user performs a rightward swipe gesture within the Tree component. It detects when a swipe action starts inside the Tree and moves in the right direction, allowing developers to implement custom behaviors in response to this specific user interaction.CustomEvent

This event is triggered when the user performs a rightward swipe gesture within the Tree component. It detects when a swipe action starts inside the Tree and moves in the right direction, allowing developers to implement custom behaviors in response to this specific user interaction.

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

Try a demo showcasing the swiperight event.

Examples

Listen for swiperight using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-tree')?.addEventListener('swiperight', (event) => {
	// event handling code goes here.
})

Methods

addAfter( item: HTMLElement, sibling: string | HTMLElement): voidInserts a new item immediately after a specified item within the same parent, making it a sibling element in the list or hierarchy.

Inserts a new item immediately after a specified item within the same parent, making it a sibling element in the list or hierarchy.

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.

On the custom element in the DOM (narrow the selector, e.g. to #my-tree, if you host multiple widgets):

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

Try a demo showcasing the addAfter method.

addBefore( item: HTMLElement, sibling: string | HTMLElement): voidInserts a new item directly before a specified existing item within the same parent, making both items siblings in the data structure.

Inserts a new item directly before a specified existing item within the same parent, making both items siblings in the data structure.

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.

On the custom element in the DOM (narrow the selector, e.g. to #my-tree, if you host multiple widgets):

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

Try a demo showcasing the addBefore method.

addTo( item: HTMLElement, parent?: string | HTMLElement): voidAppends a new item to the end of the specified parent item's list of children, making it the last child within the parent structure.

Appends a new item to the end of the specified parent item's list of children, making it the last child within the parent structure.

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.

On the custom element in the DOM (narrow the selector, e.g. to #my-tree, if you host multiple widgets):

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

Try a demo showcasing the addTo method.

clearSelection(): voidRemoves any current selections, resetting the selection state to none. This action ensures that no items remain highlighted or marked as selected.

Removes any current selections, resetting the selection state to none. This action ensures that no items remain highlighted or marked as selected.

On the custom element in the DOM (narrow the selector, e.g. to #my-tree, if you host multiple widgets):

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

Try a demo showcasing the clearSelection method.

closeDropDown(): voidCloses the dropdown menu when the Tree component is operating in dropdown mode, ensuring that the dropdown is dismissed upon selection or when appropriate user interactions occur.

Closes the dropdown menu when the Tree component is operating in dropdown mode, ensuring that the dropdown is dismissed upon selection or when appropriate user interactions occur.

On the custom element in the DOM (narrow the selector, e.g. to #my-tree, if you host multiple widgets):

document.querySelector('smart-tree')?.closeDropDown("");

Try a demo showcasing the closeDropDown method.

collapseAll( animation?: boolean): voidCollapses all elements with the class smart-tree-items-group, ensuring that every expandable group within the tree component is minimized and any nested content is hidden from view. This action provides a streamlined overview of the tree by hiding detailed or child items under each group.

Collapses all elements with the class smart-tree-items-group, ensuring that every expandable group within the tree component is minimized and any nested content is hidden from view. This action provides a streamlined overview of the tree by hiding detailed or child items under each group.

Arguments

animation?boolean

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

On the custom element in the DOM (narrow the selector, e.g. to #my-tree, if you host multiple widgets):

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

collapseItem( item: HTMLElement | string, animation?: boolean): voidCollapses the specified smart-tree-items-group, hiding all of its nested child items from view within the tree component. This action changes the group's state to collapsed, providing a more compact tree display by temporarily concealing its contents.

Collapses the specified smart-tree-items-group, hiding all of its nested child items from view within the tree component. This action changes the group's state to collapsed, providing a more compact tree display by temporarily concealing its contents.

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.

On the custom element in the DOM (narrow the selector, e.g. to #my-tree, if you host multiple widgets):

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

Try a demo showcasing the collapseItem method.

ensureVisible( item: HTMLElement | string): voidEnsures that a specified item is brought into the visible area of the scrollable container by automatically scrolling the container as needed, so the item is fully or partially in view for the user.

Ensures that a specified item is brought into the visible area of the scrollable container by automatically scrolling the container as needed, so the item is fully or partially in view for the user.

Arguments

itemHTMLElement | string

The id or numeric path of an item

On the custom element in the DOM (narrow the selector, e.g. to #my-tree, if you host multiple widgets):

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

Try a demo showcasing the ensureVisible method.

expandAll( animation?: string): voidExpands all elements within the tree component that are assigned the 'smart-tree-items-group' class, making every group and its child items visible in the tree view.

Expands all elements within the tree component that are assigned the 'smart-tree-items-group' class, making every group and its child items visible in the tree view.

Arguments

animation?string

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

On the custom element in the DOM (narrow the selector, e.g. to #my-tree, if you host multiple widgets):

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

expandItem( item: HTMLElement | string, animation?: boolean): voidExpands a specific group within the smartTree component, displaying all child items associated with the selected tree group. This action reveals the contents of a single smart-tree-items-group node, making its nested items visible to the user.

Expands a specific group within the smartTree component, displaying all child items associated with the selected tree group. This action reveals the contents of a single smart-tree-items-group node, making its nested items visible to the user.

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.

On the custom element in the DOM (narrow the selector, e.g. to #my-tree, if you host multiple widgets):

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

Try a demo showcasing the expandItem method.

filter( filterQuery: string): voidApplies a filter to the Tree component, displaying only the nodes that match the specified criteria while hiding all others. This helps users easily find and focus on relevant items within the tree structure.

Applies a filter to the Tree component, displaying only the nodes that match the specified criteria while hiding all others. This helps users easily find and focus on relevant items within the tree structure.

Arguments

filterQuerystring

Filter query.

On the custom element in the DOM (narrow the selector, e.g. to #my-tree, if you host multiple widgets):

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

Try a demo showcasing the filter method.

getFilter(): stringRetrieves the currently active filter, including its criteria and settings, that has been applied to the data set.

Retrieves the currently active filter, including its criteria and settings, that has been applied to the data set.

Returnsstring

On the custom element in the DOM (narrow the selector, e.g. to #my-tree, if you host multiple widgets):

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

Try a demo showcasing the getFilter method.

getItem( id: string): HTMLElementRetrieves a specific item by using either its unique identifier (ID) or a numeric path value. This function supports both string-based IDs and numeric paths to locate and return the corresponding item from the collection.

Retrieves a specific item by using either its unique identifier (ID) or a numeric path value. This function supports both string-based IDs and numeric paths to locate and return the corresponding item from the collection.

Arguments

idstring

The id or numeric path of an item.

ReturnsHTMLElement

On the custom element in the DOM (narrow the selector, e.g. to #my-tree, if you host multiple widgets):

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

Try a demo showcasing the getItem method.

getSelectedValues(): string[]Retrieves the currently selected values from the component. If no value is explicitly set, the method returns the labels of the selected items instead.

Retrieves the currently selected values from the component. If no value is explicitly set, the method returns the labels of the selected items instead.

Returnsstring[]

On the custom element in the DOM (narrow the selector, e.g. to #my-tree, if you host multiple widgets):

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

Try a demo showcasing the getSelectedValues method.

getState(): objectReturns the current state of the smartTree component, including information such as which nodes are expanded, collapsed, selected, or checked. This allows you to save or restore the tree’s structure and user interactions.

Returns the current state of the smartTree component, including information such as which nodes are expanded, collapsed, selected, or checked. This allows you to save or restore the tree’s structure and user interactions.

Returnsobject

On the custom element in the DOM (narrow the selector, e.g. to #my-tree, if you host multiple widgets):

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

Try a demo showcasing the getState method.

insert( item: any, path?: string): voidInserts a specified item into the array or list at the designated index, shifting subsequent items to the right to accommodate the new element. If the given position is out of range, an error may be thrown or the item may be added at the nearest valid position, depending on implementation.

Inserts a specified item into the array or list at the designated index, shifting subsequent items to the right to accommodate the new element. If the given position is out of range, an error may be thrown or the item may be added at the nearest valid position, depending on implementation.

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.

On the custom element in the DOM (narrow the selector, e.g. to #my-tree, if you host multiple widgets):

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

loadState( state?: any): voidLoads and restores the current state of the Tree, including expanded or collapsed branches, selected nodes, and any custom configurations. This ensures the Tree appears as it was previously saved or last interacted with.

Loads and restores the current state of the Tree, including expanded or collapsed branches, selected nodes, and any custom configurations. This ensures the Tree appears as it was previously saved or last interacted with.

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.

On the custom element in the DOM (narrow the selector, e.g. to #my-tree, if you host multiple widgets):

document.querySelector('smart-tree')?.loadState();

Try a demo showcasing the loadState method.

moveDown( item: HTMLElement | string): voidMoves the selected item one position lower in the order among its sibling elements, placing it directly after the next sibling in the list.

Moves the selected item one position lower in the order among its sibling elements, placing it directly after the next sibling in the list.

Arguments

itemHTMLElement | string

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

On the custom element in the DOM (narrow the selector, e.g. to #my-tree, if you host multiple widgets):

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

Try a demo showcasing the moveDown method.

moveUp( item: HTMLElement | string): voidMoves the specified item one position higher in the list of its sibling items, effectively placing it before the previous sibling in the order.

Moves the specified item one position higher in the list of its sibling items, effectively placing it before the previous sibling in the order.

Arguments

itemHTMLElement | string

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

On the custom element in the DOM (narrow the selector, e.g. to #my-tree, if you host multiple widgets):

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

Try a demo showcasing the moveUp method.

openDropDown(): voidDisplays the dropdown menu when the Tree component is set to dropdown mode, allowing users to interact with the tree structure within a dropdown interface.

Displays the dropdown menu when the Tree component is set to dropdown mode, allowing users to interact with the tree structure within a dropdown interface.

On the custom element in the DOM (narrow the selector, e.g. to #my-tree, if you host multiple widgets):

document.querySelector('smart-tree')?.openDropDown("");

Try a demo showcasing the openDropDown method.

removeItem( item: HTMLElement | string): voidRemoves a specified item from the collection or list. This operation locates the target item based on the provided identifier or criteria and deletes it from the data structure, ensuring that the collection is updated accordingly. If the item does not exist, no action is taken.

Removes a specified item from the collection or list. This operation locates the target item based on the provided identifier or criteria and deletes it from the data structure, ensuring that the collection is updated accordingly. If the item does not exist, no action is taken.

Arguments

itemHTMLElement | string

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

On the custom element in the DOM (narrow the selector, e.g. to #my-tree, if you host multiple widgets):

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

Try a demo showcasing the removeItem method.

saveState(): objectPersists the current state of the Tree structure, including all nodes, their expanded or collapsed statuses, and any selection information, allowing the Tree to be accurately restored in future sessions.

Persists the current state of the Tree structure, including all nodes, their expanded or collapsed statuses, and any selection information, allowing the Tree to be accurately restored in future sessions.

Returnsobject

On the custom element in the DOM (narrow the selector, e.g. to #my-tree, if you host multiple widgets):

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

Try a demo showcasing the saveState method.

select( item: HTMLElement | string): voidAllows selection of an item either by specifying its numerical index in the list or by providing the item's unique HTMLElement ID. This enables precise targeting of elements for further operations.

Allows selection of an item either by specifying its numerical index in the list or by providing the item's unique HTMLElement ID. This enables precise targeting of elements for further operations.

Arguments

itemHTMLElement | string

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

On the custom element in the DOM (narrow the selector, e.g. to #my-tree, if you host multiple widgets):

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

Try a demo showcasing the select method.

setSelectedValues( items: string | string[]): voidSelects one or multiple items from a list based on their specified values. This allows you to programmatically choose which items are highlighted or marked as selected, using their corresponding value identifiers.

Selects one or multiple items from a list based on their specified values. This allows you to programmatically choose which items are highlighted or marked as selected, using their corresponding value identifiers.

Arguments

itemsstring | string[]

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

On the custom element in the DOM (narrow the selector, e.g. to #my-tree, if you host multiple widgets):

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

Try a demo showcasing the setSelectedValues method.

unselect( item: HTMLElement | string): voidDeselects a specified item, either by providing its numeric index in the list or by passing the item's HTMLElement ID as a string.

Deselects a specified item, either by providing its numeric index in the list or by passing the item's HTMLElement ID as a string.

Arguments

itemHTMLElement | string

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

On the custom element in the DOM (narrow the selector, e.g. to #my-tree, if you host multiple widgets):

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

Try a demo showcasing the unselect method.

unselectValues( items: string | string[]): voidDeselects one or more items based on their specified values, removing them from the current selection set.

Deselects one or more items based on their specified values, removing them from the current selection set.

Arguments

itemsstring | string[]

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

On the custom element in the DOM (narrow the selector, e.g. to #my-tree, if you host multiple widgets):

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

Try a demo showcasing the unselectValues method.

updateItem( item: HTMLElement | string, newItem: any): voidUpdates an existing item in the database with new values provided in the request. This operation locates the item by its unique identifier and applies the specified changes to its properties. Returns the updated item upon success.

Updates an existing item in the database with new values provided in the request. This operation locates the item by its unique identifier and applies the specified changes to its properties. Returns the updated item upon success.

Arguments

itemHTMLElement | string

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

newItemany

An object with updated properties.

On the custom element in the DOM (narrow the selector, e.g. to #my-tree, if you host multiple widgets):

document.querySelector('smart-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

Quick picks

disabledvalue

Properties

DdisabledControls whether the element is enabled (interactive) or disabled (non-interactive). When disabled, the element cannot be interacted with by the user and may appear visually dimmed or inactive.
DdisableDragdisableDrag
Llabellabel
Llevellevel
RreadonlyPrevents users from interacting with the item, disabling all actions such as clicking, tapping, dragging, or keyboard input. The item will not respond to any user-generated events while this setting is enabled.
Sselectedselected
Sseparatorseparator
Sshortcutshortcut
Vvaluevalue

Properties

disabledControls whether the element is enabled (interactive) or disabled (non-interactive). When disabled, the element cannot be interacted with by the user and may appear visually dimmed or inactive.boolean

Controls whether the element is enabled (interactive) or disabled (non-interactive). When disabled, the element cannot be interacted with by the user and may appear visually dimmed or inactive.

Default value

false

Examples

Markup and runtime examples for disabled:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

disableDragboolean

Default value

false

HTML attribute:

<smart-tree-item disable-drag></smart-tree-item>

labelany

Default value

""

levelnumber

readonlyPrevents users from interacting with the item, disabling all actions such as clicking, tapping, dragging, or keyboard input. The item will not respond to any user-generated events while this setting is enabled.boolean

Prevents users from interacting with the item, disabling all actions such as clicking, tapping, dragging, or keyboard input. The item will not respond to any user-generated events while this setting is enabled.

Default value

false

Examples

Markup and runtime examples for readonly:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

selectedboolean

Default value

false

HTML attribute:

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

separatorboolean

Default value

true

HTML attribute:

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

shortcutstring

Default value

""

valueany

TreeItemsGroup

Defines a group of tree items.

Selector

smart-tree-items-group

Quick picks

disabledvalue

Properties

DdisabledControls whether the element is active and can be interacted with by the user. When enabled, the element responds to user input; when disabled, it appears inactive and does not accept interactions.
DdisableDragdisableDrag
Eexpandedexpanded
Llabellabel
Llevellevel
RreadonlyPrevents users from interacting with the item by disabling all mouse, keyboard, and touch events, making the item unresponsive to user actions.
Sselectedselected
Sseparatorseparator
Vvaluevalue

Properties

disabledControls whether the element is active and can be interacted with by the user. When enabled, the element responds to user input; when disabled, it appears inactive and does not accept interactions.boolean

Controls whether the element is active and can be interacted with by the user. When enabled, the element responds to user input; when disabled, it appears inactive and does not accept interactions.

Default value

false

Examples

Markup and runtime examples for disabled:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

disableDragboolean

Default value

false

HTML attribute:

<smart-tree-items-group disable-drag></smart-tree-items-group>

expandedboolean

Default value

false

HTML attribute:

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

labelany

Default value

""

levelnumber

readonlyPrevents users from interacting with the item by disabling all mouse, keyboard, and touch events, making the item unresponsive to user actions.boolean

Prevents users from interacting with the item by disabling all mouse, keyboard, and touch events, making the item unresponsive to user actions.

Default value

false

Examples

Markup and runtime examples for readonly:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

selectedboolean

Default value

false

HTML attribute:

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

separatorboolean

Default value

true

HTML attribute:

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

valueany