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
– Nick Bork, Commented Mar 2, 2012 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
– Oleg, Commented Mar 3, 2012 at 6:31

clyc · Accepted Answer · 2012-03-02 19:30:14Z

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());
}

Community · Accepted Answer · 2017-05-23 10:24:24Z

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, 2017 at 10:24

CommunityBot

11 silver badge

answered Mar 2, 2012 at 18:04

santosh singh

28.8k27 gold badges88 silver badges134 bronze badges

1 Comment

Ahmed Okour Over a year ago

i did change it, still nothing !

Collectives™ on Stack Overflow

Jquery Grid with ASP.NET

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related