Adding Items To ASP.Net ListBox / RadListBox Inside EditForm Of Grid Using JavaScript

1 posts, 0 answers
  1. Rameshbabu
    Rameshbabu avatar
    1 posts
    Member since:
    Nov 2017

    Posted 30 Nov 2017 Link to this post

    I am creating a RadGrid and within EditForm of RadGrid, I have taken an ASP.Net ListBox along with a TextBox and both of these controls are unbound controls. I created keyup event for the TextBox and after user enters a minimum of 3 characters in textbox, I am making a call to DB to search for items starting with the text given in textbox and want to add those items to the listbox.

    My JavaScript code in keyup event function of textbox is as follows.

     

    01.function KeyUpFunction(sender, args)
    02.    {     
    03.        var value = document.getElementById(sender).value;
    04.        if (value.toString().length >= 3)
    05.        {          
    06.            $.ajax({
    07.                type: "GET",
    08.                url: "/Test/Test.asmx/GetTests",
    09.                data: { searchTerm: "'%" + value + "%'" },
    10.                contentType: "application/json; charset=UTF-8",
    11.                dataType: "json",
    12.                async: "true",
    13.                success: function (result) {                      
    14.                    if (result.d.length > 0) {
    15.                        var grid = $find('<%= grdTest.ClientID %>');                      
    16.                        var editItems = grid.get_editItems();                      
    17.                        var editItem = editItems[0];                       
    18.                        var listBox = $(editItem.get_editFormItem()).find("select[id*='lstImageSets']").get(0);
    19.                        $(listBox).empty();
    20.                        for (var item in result.d) {
    21.                            var opt = document.createElement('OPTION');
    22.                            opt.value = result.d[item].Id;                         
    23.                            opt.innerHTML = result.d[item].Name;                          
    24.                            listBox.add(option);                                               
    25.                        }                          
    26.                    }
    27.                    else {
    28.                        alert("No records found");
    29.                    }
    30.            },
    31.            error: function (jqXHR, textStatus, errorThrown) {
    32.                alert(textStatus + '  ' + errorThrown);
    33.            }
    34.            });
    35.           
    36.        }      
    37.    }

     

    This code is working fine and adding items to listbox. But items added to the listbox are not visible. when I inspected the listbox in developer tools, it is rendered as a <div> and next to the div a <select> element, where <div> is specified as _rfdecoratedid for the <select> and all items that are added by the above code are there in <select> but not visible. I am suspecting this is because of <div>. 

    Please find attached screen shots that shows the developer tools elements screen before and after the above function is executed.

    Please help me in solving this issue.

Back to Top