Vue TreeView Default Item Template

This section lists the data source fields that are used in a default item template.

Type:

Object

By default, a predefined item template is applied to display the items of this widget. This template is based on certain fields of the data source provided for this widget. Below is the list of these fields. If the default item template is not appropriate for your task, implement a custom item template based on these or other fields of your data source.

See Also

disabled

Specifies whether a widget item should be disabled.

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 html code inserted into the widget item element.

Type:

String

icon

Specifies the tree view item's icon.

Type:

String

This option accepts one of the following:

items

Holds an array of tree view items.

Type:

Array<dxTreeViewItem>

When specifying the items field for an item, this item becomes a root item. The child items are displayed using the same default item template as the root items. So specify the fields that take part in the default item template when defining items array objects. Alternatively, you can implement a custom item template.

NOTE
Each item of the array passed to the items option can include an items field, which takes on an object with the same structure as a root item. Therefore, you can create as many tree view levels as you need.
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.

selected

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

Type:

Boolean

Default Value: false

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

See Also

template

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

Type:

template

Template Data: undefined

Whether you use a default or a custom template for widget items, you can specify a specific template for a particular item. To do so, set the template field for the data source object of this item. 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 widget item.

Type:

String

visible

Specifies whether or not a widget item must be displayed.

Type:

Boolean

Default Value: true