Search code examples
asp.netjqueryweb-servicesjsonjqgrid

JqGrid addJSONData + ASP.NET 2.0 WS


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...


Solution

  • 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]);
            }
        }