smart-html-elements

Tree Blazor API

Tree Properties

Name	Type	Default	Description
AllowDrag	bool	false	Allows drag operation in current tree. When enabled, items can be dragged and dropped to a tree with enabled allowDrop.
AllowDrop	bool	false	Allows drop operation. Dropped items could originate from the current tree or another tree.
AutoHideToggleElement	bool	false	Automatically hides the tree's toggle element (arrow) on mouseleave and shows it on mouseenter.
AutoLoadState	bool	false	Enables or disables auto load state from the browser's localStorage. Information about filtering, sorting, expanded and selected items is loaded.
AutoSaveState	bool	false	Enables or disables auto save state to the browser's localStorage. Information about filtering, sorting, expanded and selected items is saved.
AutoSort	bool	true	Enables or disables auto sorting. If modifications are made to a sorted tree, but autoSort is false, the tree will not be re-sorted automatically.
DataSource	IEnumerable<object>	N/A	Determines the data source that will be loaded to the Tree.
Disabled	bool	false	Enables or disables SmartTree.
DisplayLoadingIndicator	bool	false	Shows or hides loading indicator.
DisplayMember	string	"label"	Determines the field in the data source that corresponds to an item's label.
DragFeedbackFormatFunction	object	N/A	A callback function for customizing the HTML of the drag feedback. It receives one parameter - an array of the currently dragged items.
DragOffset	int[]	new int[]{}	Determines the offset of the drag feedback element from the mouse cursor when dragging items. The first member of the array is the horizontal offset and the second one - the vertical offset.
Editable	bool	false	Enables or disables item's editting. An edit operation can be initiated by double-clicking a tree item or pressing F2 while an item is selected.
ExpandMode	TreeExpandMode	TreeExpandMode.Multiple	Determines the expand behavior of TreeItemsGroups in the Tree.
Filterable	bool	false	Enables or disables filtering. Shows or hides filter input.
FilterInputPlaceholder	string	""	Sets custom text for placeholder in the filter input.
FilterMember	string	"label"	Determines the TreeItem property that will be used as a filtering criteria. By default the label property is used. It can be set to 'value' if the user wants to filter by the value property or 'textContent' if the user wants to filter by text inside the TreeItem's content or any other property.
FilterMode	FilterMode	FilterMode.ContainsIgnoreCase	Sets filter mode.
HasThreeStates	bool	false	Sets or gets whether the tree checkboxes have three states - checked, unchecked and indeterminate. Whorks on selectionMode: 'checkBox'
ItemsMember	string	"items"	Determines the field in the data source that corresponds to an item group's subitems collection.
LoadingIndicatorPlaceholder	string	"Loading..."	Sets custom text for placeholder in the loading indicator if loadingIndicatorPosition is set to 'top' or 'bottom'.
LoadingIndicatorPosition	VerticalAlignment	VerticalAlignment.Center	Sets the position of the loading indicator.
Locale	string	"en"	Sets or gets the locale. Used in conjunction with the property messages.
Messages	object	N/A	Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
Overflow	Overflow	Overflow.Auto	Specifies what should happen with the scrollbar (or scroll buttons in scrollMode: 'scrollButtons') if content overflows the element's box.
Readonly	bool	false	If the element is readonly, users cannot interact with it.
RightToLeft	bool	false	Determines whether the right-to-left support is enabled.
ScrollMode	TreeScrollMode	TreeScrollMode.Scrollbar	Determines whether to use scrollbar or scrollButtons when content overflows an element's box.
SelectedIndexes	string[]	new string[]{}	An array with indexes (paths) of the selected items.
SelectionDisplayMode	TreeSelectionDisplayMode	TreeSelectionDisplayMode.Row	Determines the way selected items are highlighted.
SelectionMode	TreeSelectionMode	TreeSelectionMode.One	Determines selection mode.
SelectionTarget	TreeSelectionTarget	TreeSelectionTarget.All	Determines whether Smart-tree-items-groups can be selected.
ShowLines	bool	false	Shows or hides lines, displaying the relation between elements in group.
ShowRootLines	bool	false	Shows or hides lines starting from the root node. Enabled when 'showLines' is set to true.
Sort	object	N/A	Sets user-defined function about custom sorting.
SortDirection	TreeSortDirection	TreeSortDirection.Asc	Determines sort direction - ascending or descending.
Sorted	bool	false	Enables or disables sorting.
Theme	string	""	Sets or gets the element's visual theme.
ToggleElementPosition	Position	Position.Near	Determines togle element (arrow) position.
ToggleMode	TreeToggleMode	TreeToggleMode.Dblclick	Determines the way to toggle Smart-tree-items-groups.
Unfocusable	bool	false	Sets or gets if the element can be focused.
ValueMember	string	"value"	Determines the field in the data source that corresponds to an item's value.

Tree Methods

Name	Type	Arguments	Description
AddAfter	void	object item, string sibling	Adds an item after another item as a sibling.Args: object item - A smart-tree-item/smart-tree-items-group to add to the Tree,string sibling - The smart-tree-item/smart-tree-items-group (or its id or numeric path) to add the item after.
AddBefore	void	object item, string sibling	Adds an item before another item as a sibling.Args: object item - A smart-tree-item/smart-tree-items-group to add to the Tree,string sibling - The smart-tree-item/smart-tree-items-group (or its id or numeric path) to add the item before.
AddTo	void	object item, string parent	Adds an item as the last child of a parent item.Args: object item - A smart-tree-item/smart-tree-items-group to add to the Tree,string parent - The smart-tree-items-group (or its id or numeric path) to add the item to.
AddTo	void	object item	Adds an item as the last child of a parent item.
ClearSelection	void	N/A	Clears selection.
CollapseAll	void	bool animation	Collapses all smart-tree-items-groups.Args: bool animation - If set to false, disables collapse animation even if animation is enabled for the element.
CollapseAll	void	N/A	Collapses all smart-tree-items-groups.
CollapseItem	void	object item, bool animation	Collapses a smart-tree-items-group.Args: object item - smart-tree-items-group (or its id or numeric path).,bool animation - If set to false, disables collapse animation even if animation is enabled for the element.
CollapseItem	void	object item	Collapses a smart-tree-items-group.
EnsureVisible	void	object item	Makes sure an item is visible by scrolling to it.Args: object item - The id or numeric path of an item
ExpandAll	void	string animation	Expands all smart-tree-items-groups.Args: string animation - If set to false, disables expand animation even if animation is enabled for the element.
ExpandAll	void	N/A	Expands all smart-tree-items-groups.
ExpandItem	void	object item, bool animation	Expands single smart-tree-items-group.Args: object item - smart-tree-items-group (or its id or numeric path).,bool animation - If set to false, disables expand animation even if animation is enabled for the element.
ExpandItem	void	object item	Expands single smart-tree-items-group.
Filter	void	string filterQuery	Applies filter to the Tree.Args: string filterQuery - Filter query.
GetDataSourceAsync()	Task<IEnumerable<object>>	'N/A'	Gets the "DataSource" property as Task<IEnumerable<object>>.
GetItem	object	string id	Gets an item by its id or numeric path.Args: string id - The id or numeric path of an item.
GetSelectedIndexesAsync()	Task<string[]>	'N/A'	Gets the "SelectedIndexes" property as Task<string[]>.
GetState	object	N/A	Returns SmartTree's state
Insert	void	object item, string path	Inserts an item at the given position.Args: object item - 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.,string path - The path to insert the item at.
Insert	void	object item	Inserts an item at the given position.
LoadState	void	object state	Loads the Tree's state.Args: object state - 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.
LoadState	void	N/A	Loads the Tree's state.
MoveDown	void	object item	Moves an item down relative to its siblings.Args: object item - The smart-tree-item/smart-tree-items-group (or its id or numeric path) to remove.
MoveUp	void	object item	Moves an item up relative to its siblings.Args: object item - The smart-tree-item/smart-tree-items-group (or its id or numeric path) to remove.
Refresh	void	'N/A'	Refreshes the Blazor Component. Performs a layout of the HTML Elements and recalculates the measurements.
RemoveItem	void	object item	Removes an item.Args: object item - The smart-tree-item/smart-tree-items-group (or its id or numeric path) to remove.
Render	void	'N/A'	Re-renders the Blazor Component. This method will make a full re-render.
SaveState	object	N/A	Saves the Tree's state.
Select	void	object item	Selects an item.Args: object item - The smart-tree-item/smart-tree-items-group (or its id or numeric path) to remove.
StateHasChanged	void	'N/A'	Refreshes the state and Re-renders the Blazor Component, if necessary.
Unselect	void	object item	Unselects an item.Args: object item - The smart-tree-item/smart-tree-items-group (or its id or numeric path) to remove.
UpdateItem	void	object item, object newItem	Updates an item.Args: object item - smart-tree-item/smart-tree-items-group (or its id or numeric path).,object newItem - An object with updated properties.

Tree Events

Name	Type	Description	Event Detail
OnChange	EventCallback<Event>	This event is triggered when selection in jqx-tree is changed.	dynamic item- The item the user has interacted with to change the selection (only when applicable)., IEnumerable<string> oldSelectedIndexes- The selected indexes before the selection is changed., IEnumerable<string> selectedIndexes- The selected indexes after the selection is changed.
Changed	event TreeChangedEventHandler	This event is triggered when selection in jqx-tree is changed.	TreeChangedEventArgs
OnCollapse	EventCallback<Event>	This event is triggered when a jqx-tree-items-group is collapsed.	dynamic item- the collapsed jqx-tree-items-group, string label- the label of the collapsed jqx-tree-items-group, dynamic path- the path of the collapsed jqx-tree-items-group, dynamic value- the value of the collapsed jqx-tree-items-group, dynamic children- the children of the collapsed jqx-tree-items-group
Collapsed	event TreeCollapsedEventHandler	This event is triggered when a jqx-tree-items-group is collapsed.	TreeCollapsedEventArgs
OnCollapsing	EventCallback<Event>	This event is triggered when a jqx-tree-items-group is about to be collapsed. The collapsing operation can be canceled by calling event.preventDefault() in the event handler function.	dynamic item- the jqx-tree-items-group to be collapsed, string label- the label of the jqx-tree-items-group to be collapsed, dynamic path- the path of the jqx-tree-items-group to be collapsed, dynamic value- the value of the jqx-tree-items-group to be collapsed, dynamic children- the children of the jqx-tree-items-group to be collapsed
Collapsing	event TreeCollapsingEventHandler	This event is triggered when a jqx-tree-items-group is about to be collapsed. The collapsing operation can be canceled by calling event.preventDefault() in the event handler function.	TreeCollapsingEventArgs
OnDragEnd	EventCallback<Event>	This event is triggered when a jqx-tree-item/jqx-tree-items-group is dropped somewhere in the DOM. The dragging operation can be canceled by calling event.preventDefault() in the event handler function.	dynamic container- the tree the dragged item(s) is dropped to, dynamic data- an object with additional drag details, dynamic item- the item that is dragged; if multiple items are dragged, this is the item that has been clicked when initiating the drag operation, dynamic items- an array with all dragged items, dynamic originalEvent- the original, browser, event that initiates the drop operation, dynamic previousContainer- the tree the dragged item(s) is dragged from, dynamic target- the element the dragged items are dropped to
DragEnded	event TreeDragEndedEventHandler	This event is triggered when a jqx-tree-item/jqx-tree-items-group is dropped somewhere in the DOM. The dragging operation can be canceled by calling event.preventDefault() in the event handler function.	TreeDragEndedEventArgs
OnDragging	EventCallback<Event>	This event is triggered when a jqx-tree-item/jqx-tree-items-group is being dragged.	dynamic data- an object with additional drag details, dynamic item- the item that is dragged; if multiple items are dragged, this is the item that has been clicked when initiating the drag operation, dynamic items- an array with all dragged items, dynamic originalEvent- the original, browser, event that initiates the dragging operation
Dragging	event TreeDraggingEventHandler	This event is triggered when a jqx-tree-item/jqx-tree-items-group is being dragged.	TreeDraggingEventArgs
OnDragStart	EventCallback<Event>	This event is triggered when a dragging operation is started in jqx-tree. The dragging operation can be canceled by calling event.preventDefault() in the event handler function.	dynamic container- the tree the dragged item(s) is dragged from, dynamic data- an object with additional drag details, dynamic item- the item that is dragged; if multiple items are dragged, this is the item that has been clicked when initiating the drag operation, dynamic items- an array with all dragged items, dynamic originalEvent- the original, browser, event that initiates the drag operation, dynamic previousContainer- the tree the dragged item(s) is dragged from
DragStarted	event TreeDragStartedEventHandler	This event is triggered when a dragging operation is started in jqx-tree. The dragging operation can be canceled by calling event.preventDefault() in the event handler function.	TreeDragStartedEventArgs
OnExpand	EventCallback<Event>	This event is triggered when a jqx-tree-items-group is expanded.	dynamic item- the expanded jqx-tree-items-group, string label- the label of the expanded jqx-tree-items-group, dynamic path- the path of the expanded jqx-tree-items-group, dynamic value- the value of the expanded jqx-tree-items-group, dynamic children- the children of the expanded jqx-tree-items-group
Expanded	event TreeExpandedEventHandler	This event is triggered when a jqx-tree-items-group is expanded.	TreeExpandedEventArgs
OnExpanding	EventCallback<Event>	This event is triggered when a jqx-tree-items-group is about to be expanded. The expanding operation can be canceled by calling event.preventDefault() in the event handler function.	dynamic item- the jqx-tree-items-group to be expanded, string label- the label of the jqx-tree-items-group to be expanded, dynamic path- the path of the jqx-tree-items-group to be expanded, dynamic value- the value of the jqx-tree-items-group to be expanded, dynamic children- the children of the jqx-tree-items-group to be expanded
Expanding	event TreeExpandingEventHandler	This event is triggered when a jqx-tree-items-group is about to be expanded. The expanding operation can be canceled by calling event.preventDefault() in the event handler function.	TreeExpandingEventArgs
OnScrollBottomReached	EventCallback<Event>	This event is triggered when the Tree has been scrolled to the bottom.	N/A
ScrollBottomReached	event TreeScrollBottomReachedEventHandler	This event is triggered when the Tree has been scrolled to the bottom.	TreeScrollBottomReachedEventArgs
OnScrollTopReached	EventCallback<Event>	This event is triggered when the Tree has been scrolled to the top.	N/A
ScrollTopReached	event TreeScrollTopReachedEventHandler	This event is triggered when the Tree has been scrolled to the top.	TreeScrollTopReachedEventArgs
OnSwipeleft	EventCallback<Event>	This event is triggered when the user swipes to the left inside the Tree.	N/A
SwipedLeft	event TreeSwipedLeftEventHandler	This event is triggered when the user swipes to the left inside the Tree.	TreeSwipedLeftEventArgs
OnSwiperight	EventCallback<Event>	This event is triggered when the user swipes to the right inside the Tree.	N/A
SwipeRight	event TreeSwipeRightEventHandler	This event is triggered when the user swipes to the right inside the Tree.	TreeSwipeRightEventArgs