Use DropDownList make a DropDownTreeControl

[guoxuefeng]

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

code:

@{

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

                        <ul>

                            <li>

                                <!--Treeview Template begin-->

                                <div id="control-wrap" class="wrapper">

                                    <div id="treeView">

                                    </div>

                                </div>

                                <!--Treeview Template end-->

                            </li>

                        </ul>

                    </div>

                    <input type="button" onclick="getValue();" value="获取值" />

                </div>

            </div>

        </div>

    </div>

</div>

<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

        $("#drpdwn").ejDropDownList({

            targetID: "target",

            popupHeight: "130px",

            watermarkText: "选择",

            width: "300px"

        });

        $("#treeView").ejTreeView({

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

            drpdwnobj.hidePopup();

        }

    }

    // check & uncheck the checkbox when click on text

    $("#treeView").on("click", "ul li a.e-text", function (e) {

        //清空dropdownlist的text      

        drpdwnobj.clearText();

        treeobj.selectNode($(e.target).closest("li"));

    });

    function checkScroll(args) {

        if (initialLoad == true) {

            drpdwnobj.hidePopup();

            initialLoad = false;

        }

        else {

            drpdwnobj.ultag.find("li").eq(0).height($("#control-wrap").outerHeight());

            var scrolpos = drpdwnobj.scrollerObj.model.scrollTop;

            drpdwnobj._refreshScroller();

            drpdwnobj.popupList.css("display", "block");

            drpdwnobj.scrollerObj.setModel({ "scrollTop": scrolpos });

        }

    }

    function setValue(currentValue, currentText) {

        drpdwnobj._hiddenValue = currentValue;

        drpdwnobj._addText(currentText);

        drpdwnobj.model.value = currentValue;

    }

    function getValue()

    {

        alert(drpdwnobj.option("value"));

    }

</script>

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

[guoxuefeng]

the problem is Solve 。

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

[Keerthana Rajendran]

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. 

 

Regards, 

Keerthana.