JqGrid in asp.net is not binding - asp.net

Question

I am trying to implement jqGrid in asp.net.
Here is my code.
<script type="text/javascript" src="../js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="../js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="../js/jquery.jqGrid.src.js"></script>
<script src="../js/plugins/grid.postext.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
jQuery("#tdList").jqGrid({
type: "POST",
datatype: function() {
$.ajax
({
url: "WebService1.asmx/GetDataFromDB",
data: "{}",
datatype: 'json',
contentType: "application/json; charset=utf-8",
});
},
height: "100%",
width: "100%",
forceFit: true,
colNames: ['EmpID', 'Name', 'MGR'],
colModel: [
{ name: 'EmpID', index: 'EmpID', key: true, hidden: true },
{ name: 'Name', index: 'Name', width: 100 },
{ name: 'MGR', index: 'MGR', width: 100 }
],
rowNum: 10,
rowList: [5, 10, 15],
pager: $('#pager'),
sortname: 'EmpID',
viewrecords: true,
sortorder: "desc",
caption: "Customer List"
}).navGrid('#pager', { del: false, add: false, edit: false });
});
and the code behind is
namespace JqGrid_App{
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]
public class WebService1 : System.Web.Services.WebService
{
[WebMethod]
public string HelloWorld()
{
return "Hello World";
}
[WebMethod(EnableSession = false)]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true)]
public string GetDataFromDB()
{
_Default OGetData = new _Default();
return OGetData.GetDataFromDB();
}
}}
The JSONData returning has the format
{
"total":1,
"page":1,
"records":1,
"rows":[
{"id":"6","cell":["Robbie","2"]}
]
}
But the grid is not binding data.
Please help. What I am doing wrong here. I am trying to fix this for last 2 days.
Best Regards,
Mlg

Answer 1

You make too many errors in your code:
You included both query.jqGrid.min.js and query.jqGrid.src.js instead of the usage only one from the files.
Your GetDataFromDB methor return results as string which is wrong. You should return the object having properties total, page, rows and so on. Currently you make manual JSON serialization and the resulting string will be serialized one more time.
You use datatype as function, which was needed many years ago before was introduced new parameters described here for example. Your current implementation datatype function is wrong because it makes asynchronous Ajax call and return before it receive any results from the server. The server results will be discarded.
Your JSON data returned from the server contains two strings for the row of the grid (["Robbie","2"]), but you defines tree columns
...
I can continue...
So I suggest you just look at some other code example which uses ASMX web services with jqGrid. Here for example you can download one working demo. In the answer you will find another demo.