The DropDownTree component contains a list of predefined values from which you can choose a single or multiple values.
<ejs-dropdowntree></ejs-dropdowntree>
boolean
Enables or disables multi-selection of nodes. To select multiple nodes:
Defaults to false
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
string
Sets CSS classes to the root element of the component that allows customization of appearance.
Defaults to ”
string
Sets the delimiter character for ‘default’ , ‘box’ ‘delimiter’ visibility modes
Defaults to ”,”
boolean
Enable or disable persisting component’s state between page reloads.
Defaults to false
boolean
Enable or disable rendering component in right to left direction.
Defaults to false
boolean
Specifies a value that indicates whether the DropDownTree component is enabled or not.
Defaults to true
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
Specifies whether to display the floating label above the input element. Possible values are:
Defaults to Syncfusion.EJ2.Inputs.FloatLabelType.Never
any
Accepts the template design and assigns it to the footer container of the popup list.
Defaults to null
any
Accepts the template design and assigns it to the header container of the popup list.
Defaults to null
Object
Allows additional HTML attributes such as title, name, etc., and accepts n number of attributes in a key-value pair format.
Defaults to {}
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
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ”
string
configures visibility mode for component interaction when allowMultiSelection or showCheckBox is enabled
string
Specifies a short hint that describes the expected value of the DropDownTree component.
Defaults to null
string
| number
Specifies the height of the popup list.
Defaults to ‘300px’
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%’
boolean
When set to true, the user interactions on the component are disabled.
Defaults to false
string
Specifies the selectAllText to be displayed on the component.
Defaults to ‘Select All’
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
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
boolean
Allows you to either show or hide the DropDown button on the component
Defaults to true
boolean
Allows you to either show or hide the selectAll option on the component.
Defaults to false
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’
string
Gets or sets the display text of the selected item in the component.
Defaults to null
Configure the TreeView settings.
Defaults to {autoCheck: false, loadOnDemand: true}
string
Specifies the UnSelectAllText to be displayed on the component.
Defaults to ‘Unselect All’
string[]
Gets or sets the value of the selected item in the component.
Defaults to null
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%’
number
specifies the z-index value of the component popup element.
Defaults to 1000
Allows you to clear the selected values from the DropDownTree component
Returns void
Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.
Returns void
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.
Parameter | Type | Description |
---|---|---|
item | string | Element |
Specifies ID of TreeView node/TreeView nodes. |
Returns void
To get the updated data source of DropDownTree
Parameter | Type | Description |
---|---|---|
item (optional) | string | Element |
Specifies ID of TreeView node/TreeView node. |
Returns *Object[]*
Close the popup that displays the tree items.
Returns void
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
Opens the popup that displays the tree items.
Returns void
EmitType<Object>
Triggers when the data fetch request from the remote server fails.
EmitType<DdtBeforeOpenEventArgs>
Fires when popup opens before animation.
EmitType<Object>
Triggers when focus moves out from the component.
Triggers when an item in a popup is selected or when the model value is changed by user.
Fires when popup close after animation completion.
EmitType<Object>
Triggers when the DropDownTree control is created successfully.
EmitType<DdtDataBoundEventArgs>
Triggers when data source is populated in the DropDownTree.
EmitType<Object>
Triggers when the DropDownTree control is destroyed successfully.
Triggers when the component is focused.
Fires when popup opens after animation completion.
Triggers when an item in the popup is selected by the user either with mouse/tap or with keyboard navigation.