Tree View in Dropdown

[Tümer]

How to implement tree  view in dropdown in .net core. Following code sample is what i'm looking for but i couldn't find it for .net core.

https://stackblitz.com/edit/angular-ht1jii?file=app.component.html

Can you help about this problem ?

[Shameer Ali Baig Sulaiman Ali Baig]

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. 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/DropdownTree507986507.zip 

 

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. 

https://www.syncfusion.com/feedback/7983/dropdown-treeview-component-for-ej2 

 

Please let us know, if you need any further assistance. 

 

Regards, 

Shameer Ali Baig S. 

[Tümer]

That's working. Thanks a lot.

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Tumar, 

 

We are happy to hear that our provided solution met your requirement. Please contact us if you need any help from us. We will be happy to help you. 

 

Regards, 

Shameer Ali Baig S.