Jquery Grid with ASP.NET

Question

I'm trying to use Jquery grid with asp.net, but its not working, it shows the grid with empty content, i'm not sure whats wrong with my code!! here is my HTML code:

<script type="text/javascript">
  $(function () {
      $("#list").jqGrid({
          url: '/WebServices/Admin/WebMethods.ashx',
          datatype: 'json',
          mtype: 'POST',
          colNames: ['ID', 'Name', 'Description'],
          colModel: [
                      { name: 'ID', index: 'ID', width: 55 },
                      { name: 'NAME', index: 'NAME', width: 90 },
                      { name: 'DESCRIPTION', index: 'DESCRIPTION', width: 80 }

                    ],
          jsonReader: {
              repeatitems:false
              },
          pager: $('#pager'),
          rowNum: 10,
          rowList: [10, 20, 30],
          sortname: 'ID',
          sortorder: 'desc',
          viewrecords: true,

          caption: 'Lockups'
      }).navGrid('#pager');
  });
</script>

Followed by:

<form runat="server">
    <div style="width:700px">
        <table id="list" width="100%">
            <tr>
                <td />
            </tr>
        </table>
        <div id="pager">
        </div>
    </div>
</form>

my C# code, im converting my list of objects to JSON :

 public void ProcessRequest(HttpContext context)
 {

      context.Response.ContentType = "application/json"; 
      context.Response.Write(GetAllLookups());
 }

public string GetAllLookups()
{
    var lst = from lockup in LOCKUP_ITEMS.GetLockups()
              select new { 
                  ID = lockup.ID, 
                  NAME = lockup.NAME, 
                  DESCRIPTION = lockup.DESCRIPTION 
              };

    return Newtonsoft.Json.JsonConvert.SerializeObject(
        lst, 
        new JavaScriptDateTimeConverter());
}

Is the plugin even making a successful request to your ASHX? If you have Firebug for Firefox, Fiddler or any other utility to watch HTTP requests you can start there and see if the HTTP call is made to get the data. — Nick Bork, Mar 02 '12 at 18:50
You can use `jsonReader: {repeatitems: false, id: "ID", root: function (obj) { return obj; }, page: function () { return 1; }, total: function () { return 1; }, records: function (obj) { return obj.length; }}`. In the case you can use your original server code. Additionally you can add `loadonce: true` option of jqGrid to support local sorting, add `gridview: true` for better performance and replace `pager: $('#pager')` to `pager: '#pager'`. — Oleg, Mar 03 '12 at 06:31

score 2 · Answer 1 · edited May 23 '17 at 10:24

2

try this mtype: 'POST', instead of this mtype: 'POSTs'

EDIT

Hi try out following link

How do I get jqGrid to work using ASP.NET + JSON on the backend?

edited May 23 '17 at 10:24

Community

1
1

answered Mar 02 '12 at 18:04

santosh singh

27,666
26
83
129

i did change it, still nothing ! – Ahmed Okour Mar 02 '12 at 18:15

clyc · Accepted Answer · 2012-03-02T19:30:14.777

jqGrid expects the json data in a certain format:

{ 
  "total": "xxx", 
  "page": "yyy", 
  "records": "zzz",
  "rows" : [
    {"id" :"1", "cell" :["cell11", "cell12", "cell13"]},
    {"id" :"2", "cell":["cell21", "cell22", "cell23"]},
      ...
  ]
}

so change your GetAlLookups method to the following:

public string GetAllLookups()
{
    var list = LOCKUP_ITEMS.GetLockups();
    var numOfItems = list.Count();

    var result = new {
                    total = numOfItems ,
                    page = 1,
                    records = numOfItems ,
                    rows = (from lockup in list
                            select new {
                                ID = lockup.ID, 
                                NAME = lockup.NAME, 
                                DESCRIPTION = lockup.DESCRIPTION 
                            }).ToArray()
                };
    return Newtonsoft.Json.JsonConvert.SerializeObject(
        result, 
        new JavaScriptDateTimeConverter());
}

Jquery Grid with ASP.NET

2 Answers2