Jqgrid 3.7 does not show rows in internet explorer

Question

I'm testing with ASP.NET and Jqgrid 3.7, in firefox it works fine but in IE it does not show any row in the grid.

The response from the webservice is

{"d":
    {"__type":"jqGrid",
     "total":"1",
     "page":"1",
     "records":"10",
     "rows":[
         {"id":"180","cell":["180","Cultura"]},
         {"id":"61","cell":["61","Deporte"]},
         {"id":"68","cell":["68","Deporte"]},
         {"id":"5","cell":["5","Economía"]},
         {"id":"67","cell":["67","Economía"]},
         {"id":"76","cell":["76","Economía"]},
         {"id":"178","cell":["178","Economía"]},
         {"id":"4","cell":["4","Entrevista"]},
         {"id":"66","cell":["66","Entrevista"]},
         {"id":"78","cell":["78","Entrevista"]}
     ]
    }
}

and the call is

myGrid = $("#list").jqGrid({
    url: 'ws/WsNoticias.asmx/jqObtenerTemas',
    datatype: 'json',
    mtype: 'GET',
    loadBeforeSend: function(XMLHttpRequest) {
        XMLHttpRequest.setRequestHeader("Content-Type", "application/json");
    },
    colNames: ['Id', 'Nombre'],
    colModel: [
        {name: 'Id', index: 'Id', width: 20, align: 'left', editable: false},
        {name: 'Nombre', index: 'Nombre', width: 200, align: 'left', editable: false}
    ],
    rowNum: 10,
    rowList: [5, 10, 200],
    sortname: 'Nombre',
    sortorder: "asc",
    pager: $("#listp"),
    viewrecords: true,
    caption: '',
    width: 600,
    height: 250,
    jsonReader: {
        root: "d.rows",
        page: "d.page",
        total: "d.total",
        records: "d.records"
    }
});

I can't see where is the issue ..., with versions prior to 3.6 and with

thegrid.addJSONData(JSON.parse(jsondata.responseText).d);

instead of jsonReader it works.

Answer 1

You should just use the full path in URL (started with http:// or at least with /) first of all. Internet Explorer works wrong in a lot of cases with relative urls.

Some more small general remarks. You can use ajaxGridOptions: { contentType: 'application/json; charset=utf-8' } unstead of using loadBeforeSend. Some other default values (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options) can be also removed.

myGrid = $("#list").jqGrid({
    url: 'http://www.ok-soft-gmbh.com/jqGrid/Jqgrid37json.txt',
    datatype: 'json',
    mtype: 'GET',
    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
    colModel: [
        { name: 'Id', width: 20 },
        { name: 'Nombre', width: 200 }
    ],
    rowNum: 10,
    rowList: [5, 10, 200],
    sortname: 'Nombre',
    sortorder: "asc",
    pager: $("#listp"),
    viewrecords: true,
    width: 600,
    height: 250,
    jsonReader: {
        root: "d.rows",
        page: "d.page",
        total: "d.total",
        records: "d.records"
    }
});

Moreover you can reduce the JSON data to

{"d":
    {"__type":"jqGrid",
     "total":"1",
     "page":"1",
     "records":"10",
     "rows":[
         ["180","Cultura"],
         ["61","Deporte"],
         ["68","Deporte"],
         ["5","Economía"],
         ["67","Economía"],
         ["76","Economía"],
         ["178","Economía"],
         ["4","Entrevista"],
         ["66","Entrevista"],
         ["78","Entrevista"]
     ]
    }
}

and add in the definition of the jsonReader the poperty cell: "":

jsonReader: {
    root: "d.rows",
    page: "d.page",
    total: "d.total",
    cell: "",
    records: "d.records"
}

You can verify http://www.ok-soft-gmbh.com/jqGrid/Jqgrid37.htm and http://www.ok-soft-gmbh.com/jqGrid/Jqgrid37Comact.htm that all works without any problem in all standard web browsers.