Dropdown selected item show value instead text

[Tümer]

I'm using dropdown and it's items are as a treeview. When i selected item on treeview , it shows value instead text in dropdown. What's wrong with it ?

function open() {

if (!isDropDownFilled) {

isDropDownFilled = true;

$.ajax({

type: "GET",

url: "@Url.Action("FillDropDownWithCategories", "Category")", // <-- Where should this point?

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function (response) {

var treeObj;

var dropdownObj = document.getElementById("categoryDropdown").ej2_instances[0];

dropdownObj.popupObj.element.firstElementChild.className = "e-content overflow";

// rendering the treeview only on first time

if (treeObj == null || treeObj == undefined) {

debugger;

treeObj = new ej.navigations.TreeView({

fields: {

dataSource: response.result,

id: 'id',

parentID: 'parentId',

text: 'categoryName',

hasChildren: 'hasChild'

},

// use the nodeselected event to add the text to dropdown's input element.

nodeSelected: function (args) {

dropdownObj.inputElement.text = args.nodeData.text;

dropdownObj.inputElement.value = args.nodeData.id;

}

});

debugger;

treeObj.appendTo('#tree');

}

}

});

}

}

[Sureshkumar P]

Hi Tümer, 

 

We have checked the shared code snippet.We can able to reproduce the reported issue in our  end. In the nodeSelected event you have updated both text and value. This is the cause of the issue. You don't need to update the text and value property is enough for displaying the selected value. Kindly refer the below code,  

 

function open() { 

    var treeObj; 

    var dropdownObj = document.getElementById("dropdown").ej2_instances[0]; 

    dropdownObj.popupObj.element.firstElementChild.className = "e-content overflow"; 

    // rendering the treeview only on first time 

    if (treeObj == null || treeObj == undefined) { 

        treeObj = new ej.navigations.TreeView({ 

            fields: { dataSource: localData, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' }, 

            // use the nodeselected event to add the text to dropdown's input element. 

            nodeSelected: function (args) { 

                var drop = document.getElementById("dropdown").ej2_instances[0]; 

                drop.inputElement.value = args.nodeData.text; 

            } 

        }); 

        treeObj.appendTo('#tree'); 

    } 

} 

 

 

We have created a sample based on your requirement. please find the sample here: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DropdownTree507986507-726308142  

 

Regards, 

Sureshkumar P