Ye Htut

Ye Htut

  • NA
  • 120
  • 34.6k

Bind data to select option using combogrid jquery-ASP.NET

Aug 25 2016 11:37 PM
In my application, when user set cursor or type on select, grid will be appeared beneath select control to show data. and then user will select data. Now, I am using combogrid jquery plugin. I saw a post from other forum like this issue. but I didn't solve.

What I have tried:

in WebService1.asmx, there is a method that return list array.
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List AutoArrayList(string Query)
{
//according to the Query parameter to do your logic
List lstStudents = new List();
lstStudents.Add(new Student { StudentID = 1, StudentName = "ABC" });
lstStudents.Add(new Student { StudentID = 2, StudentName = "DEF" });
lstStudents.Add(new Student { StudentID = 3, StudentName = "GHI" });
lstStudents.Add(new Student { StudentID = 4, StudentName = "JKL" });
return lstStudents;
}

public class Student
{
public int StudentID { get; set; }
public string StudentName { get; set; }
}

in Default.aspx,
<link href="Scripts/easyui.css" rel="stylesheet" type="text/css" />
<link href="Scripts/icon.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery.easyui.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.combogrid.js" type="text/javascript"></script>

<script type="text/javascript">
$(function () {
var objval = "param";
var jsonData = [];
$.ajax({
type: "POST",
async: false,
contentType: "application/json; charset=utf-8",
url: '<%=ResolveUrl("WebService1.asmx/AutoArrayList") %>',
data: "{'Query':'" + objval + "'}",
dataType: "json",
success: function (data) {
jsonData = data.d;
},
error: function (result) {
alert("Error");
}

});

$('#drpSelectStudents').combogrid({
panelWidth: 290,
value: '006',
idField: 'StudentID',
textField: 'StudentName',
//url: '/combogrid/GetStudentsInfo',
//source:jsonData,
columns: [[
{ field: 'StudentName', title: 'StudentName', width: 60}]]
});
// get the datagrid object
var g = $('#drpSelectStudents').combogrid('grid');
//assign the data to datagrid
g.datagrid('loadData', jsonData);
});

</script>

in body of html
<select id="drpSelectStudents" name="Students" style="width:290px;"></select>


can anyone tell me where the error is and how can I fix this?
Thanks all

Answers (1)