DropDownTreeModel API in Vue Dropdown Tree API component

Interface for a class DropDownTree

Properties

actionFailure

EmitType<Object>

Triggers when the data fetch request from the remote server fails.

beforeOpen

EmitType<DdtBeforeOpenEventArgs>

Fires when popup opens before animation.

blur

EmitType<Object>

Triggers when focus moves out from the component.

change

EmitType<DdtChangeEventArgs>

Triggers when an item in a popup is selected or when the model value is changed by user.

close

EmitType<DdtPopupEventArgs>

Fires when popup close after animation completion.

created

EmitType<Object>

Triggers when the DropDownTree control is created successfully.

dataBound

EmitType<DdtDataBoundEventArgs>

Triggers when data source is populated in the DropDownTree.

destroyed

EmitType<Object>

Triggers when the DropDownTree control is destroyed successfully.

focus

EmitType<DdtFocusEventArgs>

Triggers when the component is focused.

open

EmitType<DdtPopupEventArgs>

Fires when popup opens after animation completion.

select

EmitType<DdtSelectEventArgs>

Triggers when an item in the popup is selected by the user either with mouse/tap or with keyboard navigation.

actionFailureTemplate

string

Accepts the template and assigns it to the popup list content of the component when the data fetch request from the remote server fails.

allowMultiSelection

boolean

Enables or disables multi-selection of nodes. To select multiple nodes:

• Select the nodes by holding down the CTRL key while clicking on the nodes.
• Select consecutive nodes by clicking the first node to select and hold down the SHIFT key and click the last node to select.

changeOnBlur

boolean

By default, the DropDownTree component fires the change event while focus out the component. If you want to fires the change event on every value selection and remove, then disable the changeOnBlur property.

cssClass

string

Sets CSS classes to the root element of the component that allows customization of appearance.

delimiterChar

string

Sets the delimiter character for ‘default’ , ‘box’ ‘delimiter’ visibility modes

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

enableRtl

boolean

Enable or disable rendering component in right to left direction.

enabled

boolean

Specifies a value that indicates whether the DropDownTree component is enabled or not.

fields

FieldsModel

Specifies the data source and mapping fields to render DropDownTree nodes.

floatLabelType

FloatLabelType

Specifies whether to display the floating label above the input element. Possible values are:

• Never: The label will never float in the input when the placeholder is available.
• Always: The floating label will always float above the input.
• Auto: The floating label will float above the input after focusing or entering a value in the input.

footerTemplate

string

Accepts the template design and assigns it to the footer container of the popup list.

headerTemplate

string

Accepts the template design and assigns it to the header container of the popup list.

htmlAttributes

Object

Allows additional HTML attributes such as title, name, etc., and accepts n number of attributes in a key-value pair format.

itemTemplate

string

Specifies a template to render customized content for all the nodes. If the itemTemplate property is set, the template content overrides the displayed node text. The property accepts template string template string or HTML element ID holding the content.

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

mode

string

configures visibility mode for component interaction when allowMultiSelection or showCheckBox is enabled

• Different modes are:
• Box : Selected items will be visualized in chip.
• Delimiter : Selected items will be visualized in text content.
• Default : On focus in, the component will act in box mode. on blur component will act in delimiter mode.

noRecordsTemplate

string

Accepts the template design and assigns it to popup list of component when no data is available on the component.

placeholder

string

Specifies a short hint that describes the expected value of the DropDownTree component.

popupHeight

string | number

Specifies the height of the popup list.

popupWidth

string | number

Specifies the width of the popup list. By default, the popup width sets based on the width of the component.

readonly

boolean

When set to true, the user interactions on the component are disabled.

selectAllText

string

Specifies the selectAllText to be displayed on the component.

showCheckBox

boolean

Indicates that the nodes will display CheckBoxes in the DropDownTree. The CheckBox will be displayed next to the expand/collapse icon of the node.

showClearButton

boolean

Specifies whether to show or hide the clear button. When the clear button is clicked, value, text properties are reset to null.

showDropDownIcon

boolean

Allows you to either show or hide the DropDown button on the component

showSelectAll

boolean

Allows you to either show or hide the selectAll option on the component.

sortOrder

string

Specifies a value that indicates whether the nodes are sorted in the ascending or descending order, or are not sorted at all. The available types of sort order are,

• None - The nodes are not sorted.
• Ascending - The nodes are sorted in the ascending order.
• Descending - The nodes are sorted in the ascending order.

text

string

Gets or sets the display text of the selected item in the component.

treeSettings

TreeSettingsModel

Configure the TreeView settings.

unSelectAllText

string

Specifies the UnSelectAllText to be displayed on the component.

value

string[]

Gets or sets the value of the selected item in the component.

width

string | number

Specifies the width of the component. By default, the component width sets based on the width of its parent container. You can also set the width in pixel values.

zIndex

number

specifies the z-index value of the component popup element.