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

DropDownList make the dropdowntree control

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

    // 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:''})

1 Reply

DT Dhivyalakshmi Thirumurugan Syncfusion Team 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 
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  
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.  

Live Chat Icon For mobile
Up arrow icon