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.