jqGrid load WebMethod data - jqgrid

Question

I'm trying to modify this example to invoke a webmethod with the url attribute.
How can I get the constructor to invoke the WebMethod "Test2"?
<script type="text/javascript">
//<![CDATA[
$(function () {
"use strict";
var myFloatTemplate = { width: 80, align: "right", sorttype: "float" };
$("#CompTable").jqGrid({
url: "<%= AdminPath %>WebMethods/WebService1.asmx/Test2",
datatype: "json",
height: "auto",
colNames: ["Part", "Description", "Src", "Std Usage", "Usage Inc Scrap", "Rate Scrap", "UOM", "Item", "Unit Cost", "Stock"],
colModel: [
{ name: "COMP1_PART", width: 120 },
{ name: "WSCOMPDESC", width: 300 },
{ name: "WSCOMPSRC", width: 40 },
{ name: "COMPUSAGE", template: myFloatTemplate },
{ name: "WSGROSSQTY", width: 120, template: myFloatTemplate },
{ name: "COMPRATE_SCRAP", width: 90, template: myFloatTemplate },
{ name: "COMPBASIC_UNIT", width: 60 },
{ name: "COMP1_ITEM", width: 60 },
{ name: "WSCOMPUNITCOST", template: myFloatTemplate },
{ name: "WSCOMPQTYSTOCK", template: myFloatTemplate }
],
jsonReader: {
repeatitems: false,
id: "ID"
},
caption: "Bom Detail",
rowNum: 10000,
autoencode: true,
loadonce: true,
sortable: true,
loadComplete: function () {
var $self = $(this);
if ($self.jqGrid("getGridParam", "datatype") === "json") {
setTimeout(function () {
$(this).trigger("reloadGrid"); // Call to fix client-side sorting
}, 50);
}
}
});
});
//]]>
</script>
and
[DataContract]
public class JJ
{
[DataMember]
public int ID;
[DataMember]
public string WSCOMPDESC;
[DataMember]
public string WSCOMPUNITCOST;
[DataMember]
public string WSCOMPSRC;
[DataMember]
public int WSCOMPQTYSTOCK;
[DataMember]
public string COMPBASIC_UNIT;
[DataMember]
public float COMPUSAGE;
[DataMember]
public int COMPRATE_SCRAP;
[DataMember]
public float WSGROSSQTY;
[DataMember]
public string COMP1_PART;
[DataMember]
public string COMP1_ITEM;
}
[DataContract]
public class MM
{
[DataMember]
public int total;
[DataMember]
public int page;
[DataMember]
public int records;
[DataMember]
public List<JJ> rows;
}
[WebMethod]
public MM Test2()
{
MM m = new MM();
m.records = 2;
m.page = 1;
m.total = 1;
m.rows = new List<JJ>();
m.rows.Add(new JJ() { COMP1_ITEM = "1", WSCOMPDESC = "A"});
m.rows.Add(new JJ() { COMP1_ITEM = "2", WSCOMPDESC = "B"});
return m;
}

Answer 1

If you don't implemented server side paging of data you should return all data. the simplest format will be array of items. So you can modify the code of the WebMethod Test2 to the following:
[WebMethod]
public object Test2 () {
return new[] {
new { COMP1_ITEM = "1", WSCOMPDESC = "A"},
new { COMP1_ITEM = "2", WSCOMPDESC = "B"}
};
}
Then you should use ajaxGridOptions option of jqGrid to set contentType to "application/json;" or "application/json; charset=utf-8" and use mtype: "POST" if you don't use any other attributes of the WebMethod.
The last important thing is the following: ASMX wraps the returned results to d property. So the returned data looks like
{"d":[{"COMP1_ITEM":"1","WSCOMPDESC":"A"},{"COMP1_ITEM":"2","WSCOMPDESC":"B"}]}
instead of
[{"COMP1_ITEM":"1","WSCOMPDESC":"A"},{"COMP1_ITEM":"2","WSCOMPDESC":"B"}]
So one should use jsonReader: { repeatitems: false, root: "d" } to read the data. The final remark: you can use postData: "" to remove sending of all unneeded parameters by jqGrid.
See here the demo project.