Treeselect JS - Documentation (O11) | OutSystems

Log in

Stable version 1.0.1 (Compatible with OutSystems 11)

Uploaded

on 28 March 2024

by

0.0

(0 ratings)

treeselect-js

Documentation

1.0.0

Core props

Name	Type (default)	Description
parentHtmlContainer	HTMLElement (required!)	It should be a HTML element (div), it will be changed to the list container.
value	Array[String \| Number] ([])	An array of `value` from `options` prop. This value will be selected on load of the treeselect. You can call `updateValue` to update prop or set value `treeselect.value` and call `mount`. The `value` changes if you check/uncheck checkboxes or remove tags from the input.
options	Array[Object] ([])	It is an array of objects `{name: String, value: String, disabled?: Boolean, htmlAttr?: object, children: [] }`, where children are the same array of objects. Do not use duplicated `value` field. But you can use duplicated names. Read more.
disabled	Boolean (false)	List will be disabled.
id	String ('')	id attribute for the accessibility.
ariaLabel	String ('')	ariaLabel attribute for the accessibility.
isSingleSelect	Boolean (false)	Converts multi-select to the single value select. Checkboxes will be removed. You should pass only one id instead of array of values. Also you can set showTags to false. It helps to show treeselect as a dropdown.
isGroupedValue	Boolean (false)	Return groups if they selected instead of separate ids. Treeselect returns only leaves ids by default.
isIndependentNodes	Boolean (false)	All nodes in treeselect work as an independent entity. Check/uncheck action ignore children/parent updates workflow. Disabled nodes ignore children/parent workflow as well.
rtl	Boolean (false)	RTL mode.

List settings props

Name	Type (default)	Description
disabledBranchNode	Boolean (false)	It is impossible to select groups. You can select only leaves.
openLevel	Number (0)	All groups will be opened to this level.
appendToBody	Boolean (false)	List will be appended to the body instead of the input container.
alwaysOpen	Boolean (false)	List will be always opened. You can use it for comfortable style changing. If you what to use it as an opened list, turn `staticList` to `true`.
staticList	Boolean (false)	Add the list as a static DOM element. List doesn't overlap content. This prop will be ignored if you use `appendToBody`.
emptyText	String ('No results found...')	A empty list text.
listSlotHtmlComponent	HTMLElement (null)	It should be a HTML element, it will be append to the end of the list.
direction	String (auto)	A force direction for the list. Supported values: `auto`, `top`, `bottom`.
expandSelected	Boolean (false)	All groups which have checked values will be expanded on the init.
saveScrollPosition	Boolean (true)	The list saves the last scroll position before close. If you open the list your scroll will be on the previous position. If you set the value to `false` - the scroll will have position 0 and the first item will be focused every time.

Input settings props

Name	Type (default)	Description
showTags	Boolean (true)	Selected values look like tags. The false value shows results as '{count} elements selected'. You can change text if you use `tagsCountText` prop. For one selected element, you will see a name of this element.
tagsCountText	String ('elements selected')	This text will be shown if you use 'showTags'. This text will be inserted after the count of the selected elements - `'{count} {tagsCountText}'`.
showCount	Boolean (false)	Shows count of children near the group's name.
clearable	Boolean (true)	Clear icon is available.
searchable	Boolean (true)	Search is available.
placeholder	String ('Search...')	Placeholder text.
grouped	Boolean (true)	Show groups in the input and group leafs if all group selected.

Callback props

Check Emits section for more info.

Name	Type (default)	Description
inputCallback	(value) => void (undefined)	Callback method for `input` if you don't want to to eventListener.
openCallback	(value) => void (undefined)	Callback method for `open` if you don't want to use eventListener.
closeCallback	(value) => void (undefined)	Callback method for `close` if you don't want to use eventListener.
nameChangeCallback	(name) => void (undefined)	Callback method for `name-change` if you don't want to use eventListener.
searchCallback	(value) => void (undefined)	Callback method for `search` if you don't want to use eventListener.
openCloseGroupCallback	(groupId: ValueOptionType, isClosed: boolean) => void (undefined)	Callback method for `open-close-group` if you don't want to use eventListener.