We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Tree View in Dropdown

Thread ID:

Created:

Updated:

Platform:

Replies:

150988 Jan 27,2020 12:36 PM UTC Jan 30,2020 02:44 AM UTC ASP.NET Core - EJ 2 3
loading
Tags: Dropdown List
Tümer
Asked On January 27, 2020 12:36 PM UTC

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.


Can you help about this problem ?


Shameer Ali Baig Sulaiman Ali Baig [Syncfusion]
Replied On January 28, 2020 08:52 AM UTC

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. 


Tümer
Replied On January 29, 2020 01:42 PM UTC

That's working. Thanks a lot.

Shameer Ali Baig Sulaiman Ali Baig [Syncfusion]
Replied On January 30, 2020 02:44 AM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon