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

Dropdown selected item show value instead text

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

1 Reply

SP Sureshkumar P Syncfusion Team January 31, 2020 11:15 AM UTC

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; 
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  
Sureshkumar P 

Live Chat Icon For mobile
Up arrow icon