DropDownTreeComponent

The DropDownTree component contains a list of predefined values from which you can choose a single or multiple values.

<ejs-dropdowntree></ejs-dropdowntree>

Properties

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.

Defaults to false

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.

Defaults to true

cssClass

string

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

Defaults to ”

delimiterChar

string

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

Defaults to ”,”

enablePersistence

boolean

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

Defaults to false

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

enabled

boolean

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

Defaults to true

fields

FieldsModel

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

Defaults to {value: ‘value’, text: ‘text’, dataSource: [], child: ‘child’, parentValue: ‘parentValue’, hasChildren: ‘hasChildren’, expanded: ‘expanded’, htmlAttributes: ‘htmlAttributes’, iconCss: ‘iconCss’, imageUrl: ‘imageUrl’, query: null, selected: ‘selected’, tableName: null, tooltip: ‘tooltip’}

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.

Defaults to Syncfusion.EJ2.Inputs.FloatLabelType.Never

footerTemplate

any

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

Defaults to null

headerTemplate

any

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

Defaults to null

htmlAttributes

Object

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

Defaults to {}

itemTemplate

any

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.

Defaults to null

locale

string

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

Defaults to ”

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.

placeholder

string

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

Defaults to null

popupHeight

string | number

Specifies the height of the popup list.

Defaults to ‘300px’

popupWidth

string | number

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

Defaults to ‘100%’

readonly

boolean

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

Defaults to false

selectAllText

string

Specifies the selectAllText to be displayed on the component.

Defaults to ‘Select All’

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.

Defaults to false

showClearButton

boolean

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

Defaults to true

showDropDownIcon

boolean

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

Defaults to true

showSelectAll

boolean

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

Defaults to false

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.

Defaults to ‘None’

text

string

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

Defaults to null

treeSettings

TreeSettingsModel

Configure the TreeView settings.

Defaults to {autoCheck: false, loadOnDemand: true}

unSelectAllText

string

Specifies the UnSelectAllText to be displayed on the component.

Defaults to ‘Unselect All’

value

string[]

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

Defaults to null

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.

Defaults to ‘100%’

zIndex

number

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

Defaults to 1000

Methods

clear

Allows you to clear the selected values from the DropDownTree component

Returns void

destroy

Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.

Returns void

ensureVisible

Ensures visibility of the DropDownTree node by using node ID or node element. When many DropDownTree nodes are present and we need to find a particular node, ensureVisible property helps to bring the node to visibility by expanding the DropDownTree and scrolling to the specific node.

Returns void

getData

To get the updated data source of DropDownTree

Returns *Object[]*

hidePopup

Close the popup that displays the tree items.

Returns void

selectAll

Based on the state parameter, entire list item will be selected/deselected. parameter true - Selects entire list items. false - Un Selects entire list items.

Returns void

showPopup

Opens the popup that displays the tree items.

Returns void

Events

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.