Vue TreeView - items

An array of items displayed by the UI component.

Raised Events: onOptionChanged

The TreeView works with object collections that can have a plain or hierarchical structure. Depending on the structure, the objects should provide different data fields. Specify the dataStructure property to notify the TreeView of the used structure and refer to the property's description for information on the required fields.

If you need to update the UI component items, reassign the entire items array as shown in the following example:

JavaScript
treeViewInstance.option('items', newItems);

As an alternative to items, you can use the dataSource property. It accepts the DataSource object, whose underlying stores provide an API that allows you to update individual items without reassigning the entire item collection.

NOTE
Do not use the items property if you use dataSource, and vice versa.

component

An alias for the template property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

disabled

Specifies whether the UI component item responds to user interaction.

Type:

Boolean

Default Value: false

expanded

Specifies whether or not the tree view item is displayed expanded.

Type:

Boolean

Default Value: false

This field makes sense no matter whether a custom template or the default one is used.

See Also

hasItems

Specifies whether or not the tree view item has children.

Type:

Boolean

Default Value: undefined

This field is used when the virtual mode is enabled. It can hold a Boolean value or a function that returns a Boolean value.

html

Specifies the HTML markup to be inserted into the item element.

Type:

String

The TreeView component evaluates the html property's value. This evaluation, however, makes the TreeView potentially vulnerable to XSS attacks. To guard against these attacks, encode the HTML markup before you assign it to the html property. Refer to the following help topic for more information: Potentially Vulnerable API - html.

You can use the text property as a safe alternative.

icon

Specifies the tree view item's icon.

Type:

String

This property accepts one of the following:

id

Holds the unique key of an item.

Type:

Number

|

String

Default Value: undefined

items

Specifies nested tree view items.

Nested items should have the same structure as the first-level items.

See Also

parentId

Holds the key of the parent item.

Type:

Number

|

String

Default Value: undefined

This field makes sense no matter whether a custom template or the default one is used.

render

An alias for the template property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

selected

Specifies whether the TreeView item should be displayed as selected.

Type:

Boolean

Default Value: false

See Also

template

Specifies a template that should be used to render this item only.

Type:

template

Template Data: undefined

The following types of the specified value are available.

  • Assign a string containing the name of the required template.
  • Assign a jQuery object of the template's container.
  • Assign a DOM Node of the template's container.
  • Assign a function that returns the jQuery object or a DOM Node of the template's container.
See Also

text

Specifies text displayed for the UI component item.

Type:

String

visible

Specifies whether or not a UI component item must be displayed.

Type:

Boolean

Default Value: true