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. Image for the cookie policy date

Treeview inside dropdownlist is not binding

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>
        </ej-tree-view>
    </div>

7 Replies

PO Prince Oliver Syncfusion Team 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) 
                    treeobj.checkNode($(e.target).closest("li")); 
                else 
                    treeobj.uncheckNode($(e.target).closest("li")); 
            }); 
        }); 
 
        //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._refreshScroller(); 
            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)) 
                        addOrRemoveItem(uncheckeditems[i].text); 
                } 
            } 
            ensureRootCheck(args); 
        } 
 
        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())) 
                        addOrRemoveItem($(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; 
                    break; 
                } 
            } 
            return matched; 
        } 
</script> 

Regards, 
Prince 



RI Rikasa 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">

                <ul>

                    <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>

                    </ej-tree-view>

                </ul>

            </div>



PO Prince Oliver Syncfusion Team 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 

Regards, 
Prince  



RI Rikasa August 31, 2017 08:53 AM UTC

Hi Prince,

Thank you for your great help. It is working.

Regards,

Rikasa



KV Karthikeyan Viswanathan Syncfusion Team 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.  
 
Regards,   
Karthikeyan V. 



ND Nirushini Durairaja March 27, 2018 06:06 AM UTC

Hi,

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 
http://www.syncfusion.com/downloads/support/directtrac/183431/ze/DDL2040342002.zip

Thanks in advance,
Nirushine



IB Ilakkiya Baskar Syncfusion Team 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   
  
Regards,   
Ilakkiya B   


Loader.
Up arrow icon