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

Use DropDownList make a DropDownTreeControl

I need a DropDownTree control.I use code in example. 

    ViewBag.Title = "Test";
<div class="content-container-fluid">
    <div class="row">
        <div class="cols-sample-area">
            <div class="frame">
                <div class="control">
                    <!--Render dropdown list-->
                    <input type="text" id="drpdwn" />
                    <div id="target">
                                <!--Treeview Template begin-->
                                <div id="control-wrap" class="wrapper">
                                    <div id="treeView">
                                <!--Treeview Template end-->

                    <input type="button" onclick="getValue();" value="获取值" />
<link rel='nofollow' href="~/Content/ej/web/default-theme/ej.web.all.min.css" rel="stylesheet" />
<script src="~/Scripts/jsrender.min.js"></script>
<script src="~/Scripts/jquery.easing.1.3.js"></script>
<script src="~/Scripts/ej/web/ej.web.all.min.js"></script>
<script src="~/Scripts/common.js"></script>
<script src="~/JsPlugin/Syncfusion/CustomWebApiAdapter.js"></script>
<script type="text/javascript">

    var initialLoad = true;
    var dataManager = ej.DataManager({
        url: '/api/Organization/GetOrganizationTree',
        crossDomain: true,
        adaptor: new ej.CustomWebApiAdapter()
    $(function () {
        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) { }

        //Render Controls
            targetID: "target",
            popupHeight: "130px",
            watermarkText: "选择",
            width: "300px"

            fields: { id: "id", parentId: "pid", text: "text", hasChild: "hasChild", dataSource: dataManager, expanded: "expanded" },

            width: "100%",

            nodeExpand: checkScroll,
            nodeCollapse: checkScroll,
            nodeClick: onNodeClick,

        treeobj = $("#treeView").data("ejTreeView");
        drpdwnobj = $("#drpdwn").data("ejDropDownList");

    function onNodeClick(args) {
        var cContent = $(args.currentElement).attr("class");
        if (cContent.indexOf("e-text") >= 0) {
            var index = treeobj.getSelectedNodeIndex();
            setValue(treeobj.getTreeData()[index].id, treeobj.getTreeData()[index].name);

    // check & uncheck the checkbox when click on text
    $("#treeView").on("click", "ul li a.e-text", function (e) {
    function checkScroll(args) {
        if (initialLoad == true) {
            initialLoad = false;
        else {
            var scrolpos = drpdwnobj.scrollerObj.model.scrollTop;
            drpdwnobj.popupList.css("display", "block");
            drpdwnobj.scrollerObj.setModel({ "scrollTop": scrolpos });
    function setValue(currentValue, currentText) {
        drpdwnobj._hiddenValue = currentValue;
        drpdwnobj.model.value = currentValue;

    function getValue()

How can I get the treeNode data({id:'',text:''})

2 Replies

GU guoxuefeng September 23, 2016 10:01 AM UTC

the problem is Solve 。
the red code is change to"var node=treeobj.getNode($(args.currentElement))":

KR Keerthana Rajendran Syncfusion Team September 24, 2016 06:58 AM UTC

Hi Guoxuefeng, 

Thanks for your update. We were happy to hear that your problem has solved. Please get back to us if you require further assistance on this . We will be happy to assist you. 

Live Chat Icon For mobile
Up arrow icon