Question

I am coming up blank with an answer to why this isn’t working.
Essentially the end result is a blank grid with no Javascript or XHR errors being thrown.

Javascript code:

var MyServiceURL = "MyService.asmx/";

function getOrders() {
    $.ajax({
        type: "POST",
        dataType: "json",
        url: MyServiceURL + 'GetOrders',
        success: function(data) {
            var thegrid = $("#orders")[0];
            thegrid.addJSONData(data);
        },
        error: function(e) {
            var error = $.parseJSON(e.responseText);
            $('#msg').html(error.Message);
        }
    });
}

function bindGrid() {
    $("#orders").jqGrid({
        datatype: getOrders,
        colNames: ['CO_ODNO', 'CO_STATUS', 'ROUTE_CODE', 'ROUTE_STOP', 'PRIOR_NAME', 'CU_NO'],
        colModel: [{ name: 'CO_ODNO', index: 'CO_ODNO', width: 200, align: 'left' },
                   { name: 'CO_STATUS', index: 'CO_STATUS', width: 200, align: 'left' },
                   { name: 'ROUTE_CODE', index: 'ROUTE_CODE', width: 200, align: 'left' },
                   { name: 'ROUTE_STOP', index: 'ROUTE_STOP', width: 200, align: 'left' },
                   { name: 'PRIOR_NAME', index: 'PRIOR_NAME', width: 200, align: 'left' },
                   { name: 'CU_NO', index: 'CU_NO', width: 200, align: 'left' }
                   ],
        rowNum: 10,
        rowList: [5, 10, 20, 50, 100],
        sortname: 'CO_ODNO',
        pager: $('#pager'),
        sortorder: "desc",
        viewrecords: true
    });


}

$(document).ready(function() {

    $.ajaxSetup({
        type: "POST",
        cache: false,
        contentType: "application/json; charset=utf-8",
        data: "{}",
        dataFilter: function(data) {
            var msg;

            if (typeof (JSON) !== 'undefined' &&
            typeof (JSON.parse) === 'function')
                msg = JSON.parse(data);
            else
                msg = eval('(' + data + ')');

            if (msg.hasOwnProperty('d'))
                return msg.d;
            else
                return msg;
        }
    });

    $('#btnGetOrders').click(function() {
        bindGrid();
    });

});

Data being returned from server (validated with JSON Lint):

{"d":"[{\"CO_ODNO\":\"1               \",\"CO_STATUS\":\"D\",\"ROUTE_CODE\":\"K&H \",\"ROUTE_STOP\":0,\"PRIOR_NAME\":\"\",\"CU_NO\":\"24105     \",\"SHIP_TO\":\"24105     \",\"ORDER_DT_TM\":\"\\/Date(1044635082000)\\/\",\"ORDER_REQD_DT\":\"\\/Date(1059624060000)\\/\",\"SHIP_REQD_DT\":\"\\/Date(1059624060000)\\/\",\"ORDER_TYPE\":\"LIC\",\"CARRIER\":\"\",\"TIMESTAMP\":\"\\/Date(1059572051000)\\/\",\"ORDER_DEL_DT\":\"\\/Date(1044635105000)\\/\",\"TRAFFIC_REF_NO\":\"\",\"SITE\":3,\"PALLET_CUBE\":-1,\"HOST_ODNO\":\"1\",\"CLI_NO\":\"\",\"SERVICE_LEVEL\":\"\",\"EMPLOYEE_NUMBER\":\"\",\"PAY_METHOD\":\"                \",\"CU_NAME\":\"\",\"PU_ORDER_FL\":\"Y\",\"DELIVERY_FL\":\"\",\"ENTRY_FL\":\"\"},{\"CO_ODNO\":\"100056          \",\"CO_STATUS\":\"D\",\"ROUTE_CODE\":\"\",\"ROUTE_STOP\":0,\"PRIOR_NAME\":\"\",\"CU_NO\":\"802977    \",\"SHIP_TO\":\"802977    \",\"ORDER_DT_TM\":\"\\/Date(1045755045000)\\/\",\"ORDER_REQD_DT\":\"\\/Date(1045803660000)\\/\",\"SHIP_REQD_DT\":\"\\/Date(1045803660000)\\/\",\"ORDER_TYPE\":\"LIC\",\"CARRIER\":\"\",\"TIMESTAMP\":\"\\/Date(1144859314000)\\/\",\"ORDER_DEL_DT\":\"\\/Date(1045777318000)\\/\",\"TRAFFIC_REF_NO\":\"\",\"SITE\":3,\"PALLET_CUBE\":-1,\"HOST_ODNO\":\"\",\"CLI_NO\":\"\",\"SERVICE_LEVEL\":\"\",\"EMPLOYEE_NUMBER\":\"\",\"PAY_METHOD\":\"                \",\"CU_NAME\":\"\",\"PU_ORDER_FL\":\"N\",\"DELIVERY_FL\":\"\",\"ENTRY_FL\":\"\"},{\"CO_ODNO\":\"100101          \",\"CO_STATUS\":\"D\",\"ROUTE_CODE\":\"\",\"ROUTE_STOP\":0,\"PRIOR_NAME\":\"\",\"CU_NO\":\"806821    \",\"SHIP_TO\":\"806821    \",\"ORDER_DT_TM\":\"\\/Date(1045760795000)\\/\",\"ORDER_REQD_DT\":\"\\/Date(1045803660000)\\/\",\"SHIP_REQD_DT\":\"\\/Date(1045803660000)\\/\",\"ORDER_TYPE\":\"LIC\",\"CARRIER\":\"\",\"TIMESTAMP\":\"\\/Date(1144859314000)\\/\",\"ORDER_DEL_DT\":\"\\/Date(1045777603000)\\/\",\"TRAFFIC_REF_NO\":\"\",\"SITE\":3,\"PALLET_CUBE\":-1,\"HOST_ODNO\":\"100101\",\"CLI_NO\":\"\",\"SERVICE_LEVEL\":\"\",\"EMPLOYEE_NUMBER\":\"\",\"PAY_METHOD\":\"                \",\"CU_NAME\":\"\",\"PU_ORDER_FL\":\"Y\",\"DELIVERY_FL\":\"\",\"ENTRY_FL\":\"\"},{\"CO_ODNO\":\"100165          \",\"CO_STATUS\":\"D\",\"ROUTE_CODE\":\"3   \",\"ROUTE_STOP\":0,\"PRIOR_NAME\":\"\",\"CU_NO\":\"21046     \",\"SHIP_TO\":\"21046     \",\"ORDER_DT_TM\":\"\\/Date(1045771536000)\\/\",\"ORDER_REQD_DT\":\"\\/Date(1043125260000)\\/\",\"SHIP_REQD_DT\":\"\\/Date(1043125260000)\\/\",\"ORDER_TYPE\":\"LIC\",\"CARRIER\":\"\",\"TIMESTAMP\":\"\\/Date(1138107143000)\\/\",\"ORDER_DEL_DT\":\"\\/Date(1138107143000)\\/\",\"TRAFFIC_REF_NO\":\"\",\"SITE\":3,\"PALLET_CUBE\":-1,\"HOST_ODNO\":\"100165\",\"CLI_NO\":\"\",\"SERVICE_LEVEL\":\"\",\"EMPLOYEE_NUMBER\":\"\",\"PAY_METHOD\":\"                \",\"CU_NAME\":\"\",\"PU_ORDER_FL\":\"N\",\"DELIVERY_FL\":\"\",\"ENTRY_FL\":\"\"},{\"CO_ODNO\":\"100192          \",\"CO_STATUS\":\"D\",\"ROUTE_CODE\":\"\",\"ROUTE_STOP\":0,\"PRIOR_NAME\":\"\",\"CU_NO\":\"91163     \",\"SHIP_TO\":\"91163     \",\"ORDER_DT_TM\":\"\\/Date(1045775053000)\\/\",\"ORDER_REQD_DT\":\"\\/Date(1045803660000)\\/\",\"SHIP_REQD_DT\":\"\\/Date(1045803660000)\\/\",\"ORDER_TYPE\":\"LIC\",\"CARRIER\":\"\",\"TIMESTAMP\":\"\\/Date(1144859314000)\\/\",\"ORDER_DEL_DT\":\"\\/Date(1045777813000)\\/\",\"TRAFFIC_REF_NO\":\"\",\"SITE\":3,\"PALLET_CUBE\":-1,\"HOST_ODNO\":\"100192\",\"CLI_NO\":\"\",\"SERVICE_LEVEL\":\"\",\"EMPLOYEE_NUMBER\":\"\",\"PAY_METHOD\":\"                \",\"CU_NAME\":\"\",\"PU_ORDER_FL\":\"Y\",\"DELIVERY_FL\":\"\",\"ENTRY_FL\":\"\"}]"}

I can’t post the screenshot being a new user, but the columns are created correctly and are showing up blank.

Any help solving this issue would be appreciated!

Thanks,

Terry

Answer 1

If seems to my that you make the same errors like here.

First of all I suppose that in the web method GetOrders you use JavaScriptSerializer to make serialization of the object which represent the row of the grid and your service return string. As the result the JSON representation of the data (the string) will be added to the object with d property {d:result} and all will be one more time converted to JSON. Instead of that your web method should just return the List<Order> type. You can verify this is you will use thegrid.addJSONData(jQuery.parseJSON(data.d)) instead of thegrid.addJSONData(data)

I recommend you also don’t use complex constructs of $.ajaxSetup, $.ajax and $("#orders").jqGrid with the datatype as the function. It was good for jqGrid before ajaxGridOptions and serializeGridData options was introduced. in jqGrid 3.6 and higher jqGrid can load data from almost any data source directly. See links from the answer (this, this) for more details and code examples. You can also search for ajaxGridOptionsandserializeGridData`.