DropDownTreeComponent
1 Oct 202510 minutes to read
The DropDownTree component contains a list of predefined values from which you can choose a single or multiple values.
<ejs-dropdowntree></ejs-dropdowntree>Properties
allowFiltering boolean
When allowFiltering is set to true, it shows 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 when 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 focusing 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 ’’
customTemplate string|Function
This property is used to customize the display text of the selected items in the Dropdown Tree. The given custom template is
added to the input instead of the selected item text in the Dropdown Tree when the multi-selection or checkbox support is enabled.
Defaults to ”${value.length} item(s) selected”
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 ”,”
destroyPopupOnHide boolean
Specifies whether to destroy the popup or to maintain it in DOM when it is closed.
When this property is set to false, then the popup will not be removed from DOM once it is closed.
Defaults to true
enableHtmlSanitizer boolean
Specifies whether to display or remove the untrusted HTML values in the Dropdown Tree component.
If ‘enableHtmlSanitizer’ set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.
Defaults to true
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’, selectable: ‘selectable’, tableName: null, tooltip: ‘tooltip’ }
filterBarPlaceholder string
Accepts the value to be displayed as a watermark text on the filter bar.
Defaults to null
filterType TreeFilterType
Determines on which filter type, the component needs to be considered on search action.
The TreeFilterType and its supported data types are,
| TreeFilterType | Description | Supported Types |
|
StartsWith |
Checks whether a value begins with the specified value. |
String |
|
EndsWith |
Checks whether a value ends with the specified value. |
String |
|
Contains |
Checks whether a value contains with specified value. |
String |
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|object
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 be no footer container for the pop-up list.
Defaults to null
headerTemplate string|object
Specifies the template that renders a customized header container at the top of the pop-up list.
By default, the headerTemplate will be null and there will be no header container for the pop-up list.
Defaults to null
htmlAttributes { : }
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 is set to true, then it 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|object
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 Mode
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 the text content.
- Default : On focus in component will act in the box mode. On blur component will act in the delimiter mode.
- Custom : Selected items will be visualized with the given custom template value. The given custom template
is added to the input instead of the selected item text in the Dropdown Tree when the multi-selection or checkbox support is enabled.
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 will be 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 enabled, the Checkbox will be displayed next to the expand or 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 will be 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 you to select all the items in the pop-up.
Defaults to false
sortOrder SortOrder
Specifies a value that indicates whether the items are sorted in the ascending or descending order, or 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 descending 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, expandOn: ‘Auto’, loadOnDemand: false}
unSelectAllText string
Specifies the display text for the unselect 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
valueTemplate string|object
Specifies the way to customize the selected values in the Dropdown Tree component based on application needs. If the valueTemplate property is set, the template content overrides the displayed item text.
The property accepts [template string] (https://ej2.syncfusion.com/documentation/common/template-engine/) or HTML element ID holding the content. The context for the valueTemplate comes from the data object passed to it.
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%’
wrapText boolean
Defines whether to enable or disable the feature called wrap the selected items into multiple lines when the selected item’s text
content exceeded the input width limit.
Defaults to false
zIndex number
Specifies the z-index value of the pop-up element.
Defaults to 1000
Methods
clear
Allows you to clear the selected values from the Dropdown Tree 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.
If many Dropdown Tree items are present, and we are in need to find a particular item, then the ensureVisible property
helps you to bring the item to visibility by expanding the Dropdown Tree and scrolling to the specific item.
| Parameter | Type | Description |
|---|---|---|
| item |
string | Element
|
Specifies the value of Dropdown Tree item/ Dropdown Tree item element. |
Returns void
getData
To get the updated data source of the Dropdown Tree.
| Parameter | Type | Description |
|---|---|---|
| item (optional) |
string | Element
|
Specifies the value of Dropdown Tree item/ Dropdown Tree item element |
Returns * { : }[]*
hidePopup
Close the Dropdown tree pop-up.
Returns void
selectAll
Based on the state parameter, entire list item will be selected or deselected.
| Parameter | Type | Description |
|---|---|---|
| state | boolean |
Unselects/Selects entire Dropdown Tree items. |
Returns void
showPopup
Opens the popup that displays the Dropdown 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 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.