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.
Unfortunately, activation email could not send to your email. Please try again.

Use DropDownList make a DropDownTreeControl

Thread ID:

Created:

Updated:

Platform:

Replies:

126096 Sep 23,2016 05:40 AM Sep 24,2016 02:58 AM JavaScript 2
loading
Tags: ejDropDownList
guoxuefeng
Asked On September 23, 2016 05:40 AM

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
Replied On September 23, 2016 06:01 AM

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

Keerthana Rajendran [Syncfusion]
Replied On September 24, 2016 02:58 AM

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.  


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.

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.

;