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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Treeview inside dropdownlist is not binding

Thread ID:





131513 Jul 14,2017 06:23 AM UTC Mar 28,2018 10:02 AM UTC ASP.NET Core 7
Tags: DropDownList
Asked On July 14, 2017 06:23 AM UTC

I need to bind sysncfusion  treeview component inside the sysncfusion dropdownlist.
Please help me any one?

This is my code..
 <ej-drop-down-list id="loadTreeViewData" target-id="treeViewTest2" watermark-text="Select an item">

 <div id="treeViewTest2">
        <ej-tree-view id="tree1" show-checkbox="true">
            <e-tree-view-fields datasource="@ViewBag.datasource" id="Id" parent-id="Parent" text="Text"></e-tree-view-fields>

Prince Oliver [Syncfusion]
Replied On July 14, 2017 12:36 PM UTC

Hi Rikasa, 

Thank you for contacting Syncfusion support. 

As per your requirement we have prepared a sample for using Treeview control inside Dropdownlist. Kindly refer to the following link for the sample: http://www.syncfusion.com/downloads/support/forum/131513/ze/DDLwithTreeview-46381223 

You need to override default functionalities of dropdownlist and set custom actions in order to make it work properly. Kindly refer to following code snippet. 

<script type="text/javascript"> 
        // prevents the default behaviour to perform custom action 
        ej.DropDownList.prototype._OnMouseClick = function (e) { } 
        ej.DropDownList.prototype._OnMouseEnter = function (e) { } 
        ej.DropDownList.prototype._OnMouseLeave = function (e) { } 
        ej.DropDownList.prototype._OnKeyUp = function (e) { } 
        ej.DropDownList.prototype._OnKeyDown = function (e) { } 
        function dropdownOnCreate(args) { 
            drpdwnobj = this; 
        function treeViewOnCreate(args) { 
            treeobj = this; 
        // check & uncheck the checkbox when click on text 
        $(function () { 
            $("body").on("click", ".e-treeview ul li a.e-text", function (e) { 
                if (!$(e.target).siblings(".e-chkbox-wrap").children("input.nodecheckbox")[0].checked) 
        //Function triggers while check the checkbox in tree view and it adds the checked item text to dropdownlist value 
        function checkScroll(args) { 
            var scrolpos = drpdwnobj.scrollerObj.model.scrollTop; 
            drpdwnobj.popupList.css("display", "block"); 
            drpdwnobj.scrollerObj.setModel({ "scrollTop": scrolpos }); 
        function onNodeCheck(args) { 
            if (args.currentCheckedNodes != null) { 
                var checkeditems = args.currentCheckedNodes; 
                for (var i = 0; i < checkeditems.length; i++) { 
                    if ((checkeditems[i] != null) && !isContains(checkeditems[i].text)) 
                        addOrRemoveItem(checkeditems[i].text, true); 
        //Function triggers while uncheck the checkbox in tree view and it removes the unchecked item text from dropdownlist value 
        function onNodeUnCheck(args) { 
            if (args.currentUncheckedNodes != null) { 
                var uncheckeditems = args.currentUncheckedNodes; 
                for (var i = 0; i < uncheckeditems.length; i++) { 
                    if (uncheckeditems[i] != null && isContains(uncheckeditems[i].text)) 
        function ensureRootCheck(args) { 
            var rootEle = $(args.currentElement).parents("ul.e-treeview-ul"); 
            for (var i = 0; i < rootEle.length; i++) { 
                if ($(rootEle[i]).parent("li").length) { 
                    if (isContains($(rootEle[i]).siblings("[role=presentation]").text())) 
        function addOrRemoveItem(currentValue, isAdd) { 
            drpdwnobj._hiddenValue = currentValue; 
            isAdd ? drpdwnobj._addText(currentValue) : drpdwnobj._removeText(currentValue); 
            drpdwnobj.model.value = drpdwnobj.model.text = drpdwnobj.element.val(); 
        function isContains(val) { 
            var data = drpdwnobj.getValue().split(","), matched; 
            for (k = 0; k < data.length; k++) { 
                if (data[k] == val) { 
                    matched = 1; 
            return matched; 


Replied On July 19, 2017 11:19 AM UTC

Dear Prince ,

Thank you for your support. There is another issue with this dropdown Filter search.

When i type some text inside search filter text box my dropdown is empty.search is not working. can you help?

This is my code.

 <ej-drop-down-list id="DropDownList" target-id="carsList1" enable-filter-search="true" filter-type="@SearchFilterType.Contains" width="100%" popup-height="280px" watermark-text="Select an item" create="dropdownOnCreate"></ej-drop-down-list>

            <div id="carsList1">


                    <ej-tree-view id="treeView" show-checkbox="true" node-check="onNodeCheck" create="treeViewOnCreate" node-uncheck="onNodeUnCheck" node-expand="checkScroll" node-collapse="checkScroll">

                        <e-tree-view-fields datasource="@ViewBag.datasource" id="id" parent-id="pid" text="name" has-child="hasChild" expanded="expanded" sprite-css-class="spriteCss"></e-tree-view-fields>




Prince Oliver [Syncfusion]
Replied On July 20, 2017 05:00 PM UTC

Hi Rikasa, 

Thank you for your update. 

We have prepared a sample as per your requirement to use filter search in treeview control inside dropdownlist. Kindly refer to the following link for the sample: http://www.syncfusion.com/downloads/support/directtrac/183431/ze/DDL2040342002.zip 


Replied On August 31, 2017 08:53 AM UTC

Hi Prince,

Thank you for your great help. It is working.



Karthikeyan Viswanathan [Syncfusion]
Replied On September 1, 2017 05:23 AM UTC

Hi Rikasa,   
Thanks for the update.  
We are glad the suggestion helped you to achieve your requirement.  
Please let us know if you need further assistance.  
Karthikeyan V. 

Nirushini Durairaja
Replied On March 27, 2018 06:06 AM UTC


Component is working fine. But the search is not working properly. With uppercase letters unable to find even for the first letter. Ex: 'M'
And clear search text button is disabled. Not functioning. 

Can you please provide me an updated version with the fixes of this project 

Thanks in advance,

Ilakkiya Baskar [Syncfusion]
Replied On March 28, 2018 10:02 AM UTC

Hi Tommy,   
Thank you for your details.   
We suggest you to use DropDownTree component which meets your requirement.   
Please refer to the sample from the below location,   
Please refer to the UG documentation for more information   
Ilakkiya B   


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