DropDownTree

The Dropdown Tree control allows you to select single or multiple values from hierarchical data in a tree-like structure. It has several out-of-the-box features, such as data binding, check boxes, templates, filter, UI customization, accessibility, and preselected values.

  <ejs-dropdowntree></ejs-dropdowntree>

Properties

actionFailureTemplate

string

Specifies the template that renders to the popup list content of the Dropdown Tree component when the data fetch request from the remote server fails.

Defaults to ‘The Request Failed’

allowFiltering

boolean

When allowFiltering is set to true, show the filter bar (search text box) of the component. The filter action retrieves matched items through the filtering event based on the characters typed in the search text box. If no match is found, the value of the noRecordsTemplate property will be displayed.

Defaults to false

allowMultiSelection

boolean

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

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

Defaults to false

changeOnBlur

boolean

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

Defaults to true

cssClass

string

Specifies the CSS classes to be added with the root and popup element of the Dropdown Tree component. that allows customization of appearance.

Defaults to ”

delimiterChar

string

Defines the value separator character in the input element when multi-selection or checkbox is enabled in the Dropdown Tree. The delimiter character is applicable only for default and 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 Dropdown Tree component is enabled or not.

Defaults to true

fields

FieldsModel

Specifies the data source and mapping fields to render Dropdown Tree items.

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’}

filterBarPlaceholder

string

Accepts the value to be displayed as a watermark text on the filter bar.

Defaults to null

filterType

string

Determines on which filter type, the component needs to be considered on search action. The TreeFilterType and its supported data types are,

The default value set to StartsWith, all the suggestion items which starts with typed characters to listed in the suggestion popup.

Defaults to ‘StartsWith’

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

string

Specifies the template that renders a customized footer container at the bottom of the pop-up list. By default the footerTemplate will be null and there will no footer container for the pop-up list.

Defaults to null

headerTemplate

string

Specifies the template that renders a customized header container in the top of the pop-up list. By default the headerTemplate will be null and there will no header container for the pop-up 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 {}

ignoreAccent

boolean

When ignoreAccent set to true, then ignores the diacritic characters or accents when filtering.

ignoreCase

boolean

When set to false, consider the case-sensitive on performing the search to find suggestions. By default, consider the casing.

Defaults to true

itemTemplate

string

Specifies a template to render customized content for all the items. If the itemTemplate property is set, the template content overrides the displayed item text. The property accepts 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 checkbox 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

Specifies the template that renders a customized pop-up list content when there no data available to be displayed within the pop-up.

Defaults to ‘No Records Found’

placeholder

string

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

Defaults to null

popupHeight

string | number

Specifies the height of the pop-up 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 Dropdown Tree element.

Defaults to ‘100%’

readonly

boolean

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

Defaults to false

selectAllText

string

Specifies the display text for the selectAll checkbox in the pop-up.

Defaults to ‘Select All’

showCheckBox

boolean

Enables or disables the checkbox option in the Dropdown Tree component. If enable, the Checkbox will be displayed next to the expand/collapse icon of the tree items.

Defaults to false

showClearButton

boolean

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

Defaults to true

showDropDownIcon

boolean

Specifies whether to show or hide the Dropdown button.

Defaults to true

showSelectAll

boolean

Specifies whether to show or hide the selectAll checkbox in the pop-up which allows to select all items in the pop-up.

Defaults to false

sortOrder

string

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

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

Defaults to ‘None’

text

string

Gets or sets the display text of the selected item which maps the data text field in the component.

Defaults to null

treeSettings

TreeSettingsModel

Configures the pop-up tree settings.

Defaults to {autoCheck: false, loadOnDemand: true}

unSelectAllText

string

Specifies the display text for the un select all checkbox in the pop-up.

Defaults to ‘Unselect All’

value

string[]

Gets or sets the value of selected item(s) which maps the data value field 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 pop-up element.

Defaults to 1000

Methods

addEventListener

Adds the handler to the given event listener.

Returns void

appendTo

Appends the control within the given HTML element

Returns void

clear

Allows you to clear the selected values from the Dropdown Tree component.

Returns void

dataBind

When invoked, applies the pending property changes immediately to the 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 Dropdown Tree item by using item value or item element. When many Dropdown Tree items are present and we need to find a particular item, ensureVisible property helps to bring the item to visibility by expanding the Dropdown Tree and scrolling to the specific item.

Returns void

getData

To get the updated data of source of the Dropdown Tree.

Returns *Object[]*

getRootElement

Returns the route element of the component

Returns HTMLElement

hidePopup

Close the Dropdown tree pop-up.

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

removeEventListener

Removes the handler from the given event listener.

Returns void

selectAll

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

Returns void

showPopup

Opens the popup that displays the Dropdown Tree items.

Returns void

Inject

Dynamically injects the required modules to the component.

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 the Dropdown Tree input element gets focus-out.

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 Dropdown Tree is created successfully.

dataBound

EmitType<DdtDataBoundEventArgs>

Triggers when data source is populated in the Dropdown Tree.

destroyed

EmitType<Object>

Triggers when the Dropdown Tree is destroyed successfully.

filtering

EmitType<DdtFilteringEventArgs>

Triggers on typing a character in the filter bar when the allowFiltering is enabled.

focus

EmitType<DdtFocusEventArgs>

Triggers when the Dropdown Tree input element is focused.

keyPress

EmitType<DdtKeyPressEventArgs>

Triggers when key press is successful. It helps to customize the operations at key press.

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.