JqGrid addJSONData + ASP.NET 2.0 WS

Question

I am a bit lost. I've tried to implement a solution based on JqGrid and tried to use function as datatype. I've setted all by the book I guess, I get WS invoked and get JSON back, I got succes on clientside in ajax call and I "bind" jqGrid using addJSONData but grid remains empty. I do not have any clue now... other "local" samples on same pages works without a problem (jsonstring ...)

My WS method looks like:

[WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public string GetGridData()  
         {  
             // Load a list 
             InitSessionVariables();
             SA.DB.DenarnaEnota.DenarnaEnotaDB db = new SAOP.SA.DB.DenarnaEnota.DenarnaEnotaDB();
             DataSet ds = db.GetLookupForDenarnaEnota(SAOP.FW.DB.RecordStatus.All);

             // Turn into HTML friendly format  
             GetGridData summaryList = new GetGridData();

             summaryList.page = "1";
             summaryList.total = "10";
             summaryList.records = "160";
             int i = 0;
             foreach (DataRow dr in ds.Tables[0].Rows)  
             {
                 GridRows row = new GridRows();
                 row.id = dr["DenarnaEnotaID"].ToString();
                 row.cell = "[" + "\"" + dr["DenarnaEnotaID"].ToString() + "\""
                                       + "," + "\"" + dr["Kratica"].ToString() + "\""
                                       + "," + "\"" + dr["Naziv"].ToString() + "\""
                                       + "," + "\"" + dr["Sifra"].ToString() + "\""

                          + "]";
                 summaryList.rows.Add(row);
             }  
             return JsonConvert.SerializeObject(summaryList);

         }

My ASCX code is this:

jQuery(document).ready(function() {
  jQuery("#list").jqGrid({
    datatype: function(postdata) {
      jQuery.ajax({
        url: '../../AjaxWS/TemeljnicaEdit.asmx/GetGridData',
        data: '{}',
        dataType: 'json',
        type: 'POST',
        contentType: "application/json; charset=utf-8",
        complete: function(jsondata, stat) {
          if (stat == "success") {
            var clearJson = jsondata.responseText;

            var thegrid = jQuery("#list")[0];
            var myjsongrid = eval('(' + clearJson + ')');
            alfs
            thegrid.addJSONData(myjsongrid.replace(/\\/g, ''));
          }
        }
      });
    },
    colNames: ['DenarnaEnotaID', 'Kratica', 'Sifra', 'Naziv'],
    colModel: [{
        name: 'DenarnaEnotaID',
        index: 'DenarnaEnotaID',
        width: 100
      },
      {
        name: 'Kratica',
        index: 'Kratica',
        width: 100
      },
      {
        name: 'Sifra',
        index: 'Sifra',
        width: 100
      },
      {
        name: 'Naziv',
        index: 'Naziv',
        width: 100
      }
    ],

    rowNum: 15,
    rowList: [15, 30, 100],
    pager: jQuery('#pager'),
    sortname: 'id',
    //  loadtext:"Nalagam zapise...",
    // viewrecords: true, 
    sortorder: "desc",
    // caption:"Vrstice", 
    // width:"800",
    imgpath: "../Scripts/JGrid/themes/basic/images"
  });

});

from WS I get JSON like this:

{”page”:”1″,”total”:”10″,”records”:”160″,”rows”:[{"id":"18","cell":"["18","BAM","Konvertibilna marka","977"]“},{”id”:”19″,”cell”:”["19","RSD","Srbski dinar","941"]“},{”id”:”20″,”cell”:”["20","AFN","Afgani","971"]“},{”id”:”21″,”cell”:”["21","ALL","Lek","008"]“},{”id”:”22″,”cell”:”["22","DZD","Alžirski dinar","012"]“},{”id”:”23″,”cell”:”["23","AOA","Kvanza","973"]“},{”id”:”24″,”cell”:”["24","XCD","Vzhodnokaribski dolar","951"]“},{”id”:”25″,”cell”:”

………………

["13","PLN","Poljski zlot","985"]“},{”id”:”14″,”cell”:”["14","SEK","Švedska krona","752"]“},{”id”:”15″,”cell”:”["15","SKK","Slovaška krona","703"]“},{”id”:”16″,”cell”:”["16","USD","Ameriški dolar","840"]“},{”id”:”17″,”cell”:”["17","XXX","Nobena valuta","000"]“},{”id”:”1″,”cell”:”["1","SIT","Slovenski tolar","705"]“}]}

I have registered this JavaScript:

clientSideScripts.RegisterClientScriptFile("prototype.js", CommonFunctions.FixupUrlWithoutSessionID("~/WebUI/Scripts/prototype-1.6.0.2.js"));

clientSideScripts.RegisterClientScriptFile("jquery.js", CommonFunctions.FixupUrlWithoutSessionID("~/WebUI/Scripts/JGrid/jquery.js"));
clientSideScripts.RegisterClientScriptFile("jquery.jqGrid.js", CommonFunctions.FixupUrlWithoutSessionID("~/WebUI/Scripts/JGrid/jquery.jqGrid.js"));
clientSideScripts.RegisterClientScriptFile("jqModal.js", CommonFunctions.FixupUrlWithoutSessionID("~/WebUI/Scripts/JGrid/js/jqModal.js"));
clientSideScripts.RegisterClientScriptFile("jqDnR.js", CommonFunctions.FixupUrlWithoutSessionID("~/WebUI/Scripts/JGrid/js/jqDnR.js"));

Basically I think it must be something stupid... but I can't figure it out now...

Bobstay

Answer 1

I've been trying to solve the same problem for the last couple of hours. I've now given up on getting AddJSONData working - my web service method is returning an array so it looks like using addRowData will work.

function ReceivedClientData(data) {
        var thegrid = $("#list4");
        for (var i = 0; i < data.length; i++) {
            thegrid.addRowData(i+1, data[i]);
        }
    }

Pembrook

thank you, this is solution :) please someone put Tom's answer as answer :) cheers – Conglobate

If you aren't paging, you could embed the rows into an object tag... { 'page':1, 'total':1, 'records':rows.length, 'records':rows } and use that with addJSONData. – Convertible

this is solution with little modifications depending on what you get from webservice...for me it is: success: function(jsondata, stat) { var thegrid = $("#list"); var evaluated = JSON.parse(jsondata.d); for (var i = 0; i < evaluated.length; i++) { thegrid.addRowData(i + 1, evaluated[i]); } } – Conglobate

Answer 2

The setup of the jqGrid looks fine.

Are you certain that what you get back in the jsondata.responseText is what you describe?

The webservice that I write in .NET returns JSON formatted like this:

{"d": "{”page”:”1″,”total”:”10″,”records”:”160″,”rows”:[{"id":"18","cell":"["18","BAM","Konvertibilna marka","977"]“}"

In my function I had to do this:

complete: function(data) {
    var stuff = JSON.parse(data.responseText);
    jQuery("#grid")[0].addJSONData(JSON.parse(stuff.d));
}

I had to convert the string to JSON two times before I actually got the data I needed.

If you're having great problems. I suggest debugging this piece by piece. Execute a simple statement such as this:

jQuery("#list")[0].addJSONData(JSON.parse("{total: 1, page: 1, records: 1, rows : [ {id: '1', cell:['1', '2007-10-01', 'test', 'note', 'new', '200.00', '10.00', '210.00']} ] }"));

That should work at the very least. After that, just analyze the output you get from the web service and ensure that you can just get that statement to execute for 'complete'.

Idellaidelle

I get json like the one posted because i use non .net JSON serializer. – Bobstay

Right, just double-checking. Did you try attempting to just execute the function on your own, during the document.ready or during an onclick function? Just to see if it adds it on its own? – Idellaidelle

Answer 3

Actually, the key seems to be the parameters on addJSONData which don't appear in the docs:

function ReceivedClientData(data) {
        var thegrid = $("#rowed2");
        thegrid[0].addJSONData(data,thegrid.bDiv,9)            
    }

The web method that goes with that is :

    [WebMethod(EnableSession = true)]
    public object GetTestClients(int pagenum, int rows)
    {
        var lst = Session["lst"] as List<Entities.Client>;
        if (lst == null)
        {
            lst = new List<Entities.Client>();
            for (int i = 1; i <= 5; i++)
            {
                lst.Add(new TF.WebApps.Entities.Client()
                {
                    ClientID = "Client" + i,
                    Firstname = "first" + i,
                    Lastname = "last" + i
                });
            }
            Session["lst"] = lst;
        }
        var v = from c in lst
                select new
                {
                    id = c.ClientID,
                    cell = new object[] 
                    {
                        c.ClientID,
                        c.Firstname,
                        c.Lastname
                    }
                };

        var result = new
        {
            total = v.Count() / rows,
            page = pagenum,
            records = rows,
            rows = v.Skip((pagenum-1)*rows).Take(rows).ToArray()
        };


        return result;
    }

Pembrook

Answer 4

I'm also using a webservice to pass data to a jqGrid. I ran into the same problem and here is the code in the complete portion of the .ajax function.

complete: function(jsondata, stat) {
             if (stat == "success") {
                var thegrid = jQuery("#list2")[0];
                var jsonObject = eval('(' + jsondata.responseText + ')');
                thegrid.addJSONData(jsonObject.d);
             }
           }

The key is the .d after the responseText is evaluated into a JSON Object.

Wallop

Answer 5

This works for me:

mygrid[0].addJSONData(result, mygrid.bDiv, 0);

Or try this:

mygrid[0].addJSONData($.toJSON(result), mygrid.bDiv, 0);

My grid datatype is jsonstring.

Lockwood

Answer 6

I know it's old, but this is probably your issue...

Make row.cell a List, then you can do...

row.cell = new List {
    dr["DenarnaEnotaID"]
    ,dr["Kratica"]
    ,dr["Naziv"]
    ,dr["Sifra"]
};

On the script side...

var myjsongrid = eval('('+clearJson+')');
...
thegrid.addJSONData(myjsongrid.replace(/\\/g,''));

myjsongrid is an Object at this point, there generally isn't a .replace method on objects. Also, you should probably use a JSON parser insted of the eval. I use a modified version of Crockford's json2.js myself but YMMV.

This should make each row how you want it, letting the serializer handling the conversion... I actually serialize my datatables to { columns:['colname',...], rows:[['row1val',...],['row2val',...],...] } and frob it client-side as I use some of the same calls to populate various grids... I have a client-side selectForJqGrid(table, keycol, [col list]) that will set it up for use direct to a jqGrid.

Convertible

Answer 7

Your problem is you should use addJSONData with the responseText. eval it and then parse the JSON string to JSON in JavaScript. That should work around fine.

To Frenchie's answer I would still add some tips to it:

complete: function(jsondata, stat) {
         if (stat == "success") {              
            var jsonObject = (eval("(" + jsondata.responseText + ")"));
             $('#list2')[0].addJSONData(JSON.parse(jsonObject.d));
         }
       }

So that's your JSON. And the JqGrid should be properly configured with JsonReader so that it doesn't give an error while you are loading the data like: do provide with whatever index you have. This should solve your problem.

jsonReader: {
            root: "rows", //arry containing actual data
            page: "page", //current page
            total: "total", //total pages for the query
            records: "records", //total number of records
            repeatitems: false,
            id: "DenarnaEnotaID" //index of the column with the PK in it
        },

Magnetohydrodynamics

Answer 8

I'm quite surprised with how misleading some of the jqGrid suggestions have been.

There are two ways to feed a jqGrid with JSON data from your service.

You can either write a method to return one "chunk" of data for the jqGrid, with just enough data for one page of results.

Or, you can make life easy for yourself, return all the JSON data in one go, and get jqGrid to handle the paging without needing to make any further calls to your JSON Service.

The key to it is the loadonce jqGrid setting:

loadonce: true,

For example, I have a JSON web service, which returns a list of orders for a particular customer ID:

http://www.iNorthwind.com/Service1.svc/getOrdersForCustomer/BERGS

..and I want to create this jqGrid out of it:

Here's how my jqGrid declaration would look like:

$("#tblOrders").jqGrid({
    url: 'http://www.iNorthwind.com/Service1.svc/getOrdersForCustomer/BERGS',
    contentType: "application/json",
    datatype: "json",
    jsonReader: {
        root: "GetOrdersForCustomerResult",
        id: "OrderID",
        repeatitems: false
    },
    mtype: "GET",
    colNames: ["ID", "Date", "ShipName", "ShipAddress", "ShipCity", "ShippedDate"],
    colModel: [
        { name: "OrderID", width: 80, align: "center" },
        { name: "OrderDate", width: 90, align: "center" },
        { name: "ShipName", width: 250 },
        { name: "ShipAddress", width: 250 },
        { name: "ShipCity", width: 95 },
        { name: "ShippedDate", width: 95 },
    ],
    pager: "#pager",
    height: 'auto',
    rowNum: 8,
    rowList: [8, 16, 24],
    loadonce: true,
    sortname: "OrderID",
    sortorder: "desc",
    viewrecords: true,
    gridview: true,
    autoencode: true,
    caption: "Northwind orders"
});

Pay attention to these three lines above:

    jsonReader: {
        root: "GetOrdersForCustomerResult",
        id: "OrderID",
        repeatitems: false
    },

This prevents nasty "addJSONdata" exceptions from occurring, and tells jqGrid that, actually, our JSON array of data is stored in the GetOrdersForCustomerResult part of my JSON results.

{
  GetOrdersForCustomerResult: [
  {
    OrderDate: "8/12/1996",
    OrderID: 10278,
    ShipAddress: "Berguvsvägen 8",
    ShipCity: "Luleå",
    ShipName: "Berglunds snabbköp",
    ShipPostcode: "S-958 22",
    ShippedDate: "8/16/1996"
  },
  {
    OrderDate: "8/14/1996",
    OrderID: 10280,
    ...etc...

And that's it. No need to call AddJSONdata at all.

The full walkthrough of this example can be found on my blog:

http://mikesknowledgebase.com/pages/Services/WebServices-Page10.htm

(I wish I'd had this article to read, three hours ago, when I started looking into these issues !!)

Wenwenceslaus