Hi Tümer,
Greetings from Syncfusion support.
We have checked with your query on rendering TreeView inside DropDownList component.
We have prepared a sample for which meets your requirement. In that sample, selected nodes in TreeView will be displayed in the textbox of the DropDownList.
Refer the code snippet.
|
<ejs-dropdownlist id="dropdown " open="open" noRecordsTemplate="<div id='tree'></div>">
</ejs-dropdownlist>
<script>
function open() {
var treeObj;
var dropdownObj = document.getElementById("dropdown").ej2_instances[0];
dropdownObj.popupObj.element.firstElementChild.className = "e-content overflow";
// rendering the treeview only on first time
if (treeObj == null || treeObj == undefined) {
treeObj = new ej.navigations.TreeView({
fields: { dataSource: localData, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' },
// use the nodeselected event to add the text to dropdown's input element.
nodeSelected: function(args){
var drop = document.getElementById("dropdown").ej2_instances[0];
drop.inputElement.value = args.nodeData.text;
}
});
treeObj.appendTo('#tree');
}
}
</script> |
Refer the sample link below.
Since, it is a workaround solution, it will not have many of the functionalities of a DropDownTree component. So, we won’t suggest using this workaround as a solution for your requirement.
We have already planned to introduce the DropDownTree as a new component to be implemented in components of the EJ2 library.
DropDownTree component will be included in our Volume 1 main release which is expected to be released at the end of March 2020.
You can track the feature status from the following link.
Please let us know, if you need any further assistance.
Regards,
Shameer Ali Baig S.
