title: jqGrid with Web Service is not working in jsonreader format
body: <p>What i want to do is, i have a web service which returns number of products (from sample Northwind database) in json format and i want to bind returned row to my jqGrid. I tried <a href="https://stackoverflow.com/questions/5160045/jqgrid-cannot-call-asp-net-webmethod-but-can-with-ajax?lq=1">JQGrid - Cannot call ASP.NET WebMethod but can with Ajax</a>
  but it didn't work for me with web service.</p>
  <p>Then just for a trial I wrote [Web Method] in same aspx page on which i am creating jqGrid then it did work for mtype:&quot;POST&quot;. Below is my code.</p>
  <h3>Working Code Without Web Service</h3>
  <p>Code in ASPX:</p>
  <pre><code>&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot;&gt;
          $(function () {
              jQuery(&quot;#jqGridXML&quot;).jqGrid({
                  url: &quot;jqGridXML.aspx/GetProducts&quot;,
                  mtype: &quot;POST&quot;,
                  ajaxGridOptions: { contentType: &quot;application/json; charset=utf-8&quot; },
                  datatype: &quot;json&quot;,
                  serializeGridData: function (postData) {
                      return JSON.stringify(postData);
                  },
                  jsonReader: {
                  root: function (obj) { return obj.d;},
                  page:function (obj) {return 1;},
                  total: function (obj) {return 1;},
                  records:function (obj) { return obj.d.length;},
                  id:&quot;0&quot;,
                  cell:&quot;&quot;,
                  repeatitems:false
              },
              datatype:&quot;json&quot;,
              height:250,
              colName:['ProductId','ProductName','UnitsInStock'],
              colModel:[{name:'ProductId',index:'ProductId',width:100},
              {name:'ProductName',width:100},
              {name:'UnitsInStock',width:100}],
              caption:&quot;Products&quot;
          });
      });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id=&quot;form1&quot; runat=&quot;server&quot;&gt;
      &lt;table id=&quot;jqGridXML&quot;&gt;&lt;/table&gt;
      &lt;div id=&quot;pagerXML&quot;&gt;&lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  </code></pre>
  <p><strong>Code in .cs file</strong></p>
  <pre><code>[WebMethod]
  [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
  public static List&lt;Products&gt; GetProducts()
  {
      Products product = new Products();
      return product.GetProducts();
  }
  </code></pre>
  <p>This is working but if i do not want to write web method in the form. I have added web reference to my application and want to use data from web service. I tried below in jqGrid but did not help me.</p>
  <pre><code>$(function () {
      jQuery(&quot;#jqGridXML&quot;).jqGrid({
          url: &quot;http://localhost:49493/jqGrid_HttpHandlers/WebService.asmx/GetProducts&quot;,
          mtype: &quot;POST&quot;,
  </code></pre>
  <p>Rest part is same.</p>
  <p><strong>Code in Web Service</strong></p>
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.Services;
  using System.Web.Script.Services;
  using System.Collections.Generic;
  using System.Collections.ObjectModel;
  
  /// &lt;summary&gt;
  /// Summary description for WebService
  /// &lt;/summary&gt;
  [WebService(Namespace = &quot;http://tempuri.org/&quot;)]
  [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
  // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
  // [System.Web.Script.Services.ScriptService]
  public class WebService : System.Web.Services.WebService
  {
  
      public WebService()
      {
  
          //Uncomment the following line if using designed components 
          //InitializeComponent(); 
      }
  
      [WebMethod]
      [ScriptMethod(ResponseFormat=ResponseFormat.Json)]
      public static List&lt;Products&gt; GetProducts()
      {
          Products product =  new Products();
          return product.GetProducts();
      }
  
  
  }
  </code></pre>
  <p>Could you please help me to understand things. I just started working on jqGrid.</p>
  <p>Your help is really appreciated.</p>
  <p><strong>EDIT</strong> </p>
  <p>Yes you are correct Dave. I only uncommented below statement and removed static and ran the project without any modification and it did work perfectly. </p>
  <pre><code>[System.Web.Script.Services.ScriptService]  
  public class WebService : System.Web.Services.WebService
  </code></pre>
  <p>Thanks, but my next doubt, how can i use jqGrids navigator functionality, like Paging, Sorting those things with the same code. 
  I have used this, 
   </p>
  <pre><code>jsonReader: { 
                  root: function (obj) { return obj.d;}, 
                  page:function (obj) {return 1;}, 
                  total: function (obj) {return 1;}, 
                  records:function (obj) { return obj.d.length;}, 
                  id:&quot;0&quot;, 
  </code></pre>
  <p> 
  but I really do not have idea where exactly this need to be used in my code. Could you please redirect me to correct solution. </p>