This is a migrated thread and some comments may be shown as answers.

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

0 Answers 163 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Rameshbabu
Top achievements
Rank 1
Rameshbabu asked on 30 Nov 2017, 08:59 AM

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.

No answers yet. Maybe you can help?

Tags
Grid
Asked by
Rameshbabu
Top achievements
Rank 1
Share this question
or