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

DropDownList make the dropdowntree control

Thread ID:

Created:

Updated:

Platform:

Replies:

126097 Sep 23,2016 09:45 AM UTC Sep 26,2016 02:41 PM UTC JavaScript 1
loading
Tags: ejDropDownList
guoxuefeng
Asked On September 23, 2016 09:45 AM UTC

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: dataManagerexpanded: "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);  Cannot get the Id and 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:''})

Dhivyalakshmi Thirumurugan [Syncfusion]
Replied On September 26, 2016 02:41 PM UTC

Hi guoxuefeng, 
 
Thanks for contacting Syncfusion support. 
 
Currently we didn’t provide option get the TreeView data source when using data manager via getTreeData method. We have already logged this (The getTreeData() method does not return data source when use data manager in TreeView control) as a feature request in our database. We will implement this feature in any of our upcoming releases. The status of this feature can be tracked through our Features Management System:  
  
We have analyzed your query. For your requirement we can get the selected node details using getNode method. This method return TreeView node data such as id, text, parentId, selected, checked, expanded, level, childes and index. Please refer the below code example 
  
[Script]  
  
function onNodeClick(args) {  
    var cContent = $(args.currentElement).attr("class");  
    if (cContent.indexOf("e-text") >= 0) {  
        var node = treeobj.getNode(treeobj.getSelectedNode());  
        setValue(node.id, node.text); // Can get the Id and name  
        drpdwnobj.hidePopup();  
    }  
}  
  
  
  
For more details on the getNode method, please refer to the help document link:  
  
For your reference we had prepared a sample in the link: http://jsplayground.syncfusion.com/0wooe3cb  
  
Please let us know whether the provided sample is helpful in achieving your requirement. If not, get back to us with more information for us to assist you.  
 
Regards, 
Dhivyalakshmi. 


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.

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

;