Jqgrid does not show data from json

Question

I am working on a codeigniter project. I am trying to display some data in jqgrid that coming from json with jquery. Jqgrid displays everything except data. No error or exception.

$(document).ready(function(){

    $("#company").click(function (){

      $("#ortable").hide();
      $("#grid").show();

        var url = "http://www.***.com";
        $.post(url,{},function (response) {
            var rows = JSON.parse(response);

            $.each(rows,function (key,row) {
                var mydata = row;
                console.log(mydata); //This is for checking data
            // Configuration for jqGrid Example 1
                $("#table_list_1").jqGrid({
                    datastr: mydata,
                    datatype: "json",
                    autoheight: true,
                    width: 320,
                    shrinkToFit: true,
                    rowNum: 5,
                    rowList: [5, 10, 15],
                    colNames: ['Id', 'Code', 'Name'],
                    colModel: [
                        {name: 'Id', index: 'Id', width: 30},
                        {name: 'Code', index: 'Code', width: 50},
                        {name: 'Name', index: 'Name', width: 50, sortable: false}
                    ],
                    pager: "#pager_list_1",
                    viewrecords: true,
                    caption: "Example jqGrid 1",
                    gridview: true,
                    autoencode: true,
                    hidegrid: false,
                    jsonReader: {
                        repeatitems: false,
                        id: "Id",
                        root: function (obj) { return obj; },
                        page: function (obj) { return 1; },
                        total: function (obj) { return 1; },
                        records: function (obj) { return obj.length; }
                    }

                });

            // Add responsive to jqGrid
                $(window).bind('resize', function () {
                    var width = $('.jqGrid_wrapper').width();
                    $('#table_list_1').setGridWidth(width);
                });
            })
        });

    });

    $("#group").click(function (){

        $("#grid").hide();
        $("#ortable").show();
    })

    $("#menu").click(function (){
        $("#myModal").modal("show");

    });
});

With this code working just fine:

var mydata = [
    {Id: "1", Code: "test", Name: "note" } ,
    {Id: "2", Code: "test2", Name: "note2" }];

But not this:JSON:

[{"Id":1,"Code":"ASC","Name":"Aslan \u00c7imento","Address1":"Konya","Address2":" ","City":"Konya","Town":" ","PostCode":"123","Tel1":" ","Tel2":"32434","ContactName":"ASC","ContactTel1":"423432","Email":"aslan@hotmail.com","TaxNumber":"2342423","TaxAdministration":"ddsef","IBAN1":"21321312","IBAN2":" ","TCNo":" ","Kep":"aslan@hotmail.com","SskNo":"2324234234","Bank1":"safsefes","Bank2":" "},{"Id":2,"Code":"OYT","Name":"Oyta\u015f A.\u015e.","Address1":"Ankara","Address2":"Ankara","City":"Ankara","Town":" ","PostCode":" ","Tel1":"Ankara","Tel2":"32424","ContactName":"oyt","ContactTel1":"345345","Email":"oytas@gmail.com","TaxNumber":"43543","TaxAdministration":"5435","IBAN1":"453453454","IBAN2":" ","TCNo":" ","Kep":"oytas@gmail.com","SskNo":"345","Bank1":"sadfds","Bank2":"dsfsdf"}]

I can read my data from console but not in jqgrid. What am I doing wrong?

Answer 1

Please write always which version of jqGrid you use and from which fork of jqGrid (free jqGrid, commercial Guriddo jqGrid JS or an old jqGrid in version <=4.7).

The option datatype: "json" in combination with datastr: mydata. You can use datastr in combination with datatype: "jsonstring" or data: mydata in combination with datatype: "local". If you don't need explicitly prevent local sorting of data then you should use datatype: "local" and specify input data via data parameter. In case of usage "free jqGrid" fork one can skip datatype: "local":

 colModel: [
    {name: 'Id', key: true, width: 30},
    {name: 'Code', width: 50},
    {name: 'Name', width: 100, sortable: false}
],
data: mydata

See https://jsfiddle.net/OlegKi/vc2v9aLw/. You can use datatype: "jsonstring" alternatively:

colModel: [
    {name: 'Id', key: true, width: 30},
    {name: 'Code', width: 50},
    {name: 'Name', width: 100, sortable: false}
],
datatype: "jsonstring",
datastr: mydata,
jsonReader: { id: "Id" }

See https://jsfiddle.net/OlegKi/stvsxsts/. More basis information about the usage of free jqGrid can be found here. Both grids display