jqGrid not fetching row data when datatype is json but works ok when data type is local.

Question

I am trying two versions of the code, one with local data type and another with json data type. All I am trying to do is print the data to the console log, with this line console.log(texts). However, this is printing to the console ONLY when data type is local. Below are two versions of the code, local data type and json data type. Both versions are similar with only dataTypes changed. I am calling someFunc in the end to print the data

local datatype

$(document).ready(function() {
    var mydata = [
     {id: "1", name: "someone"}
    ]
    someFunc = function(columnName) {
         var texts = jQuery("#myGrid").jqGrid('getCol',columnName);
         console.log(texts); //is printing only when datatype is local
    };
    jQuery("#myGrid").jqGrid(
        {
            autoencode:true,
            mtype: 'GET',
            datatype : 'local',
            data: mydata,                   
            colModel : [ 
                {name: 'name', index: 'Name'}
            ]
    });
    jQuery("#mygrid").jqGrid('navGrid', '#pager', {
        edit : false,
        add : false,
        del : false,
        search : true
    }, {}, {}, {}, {
        sopt : [ 'eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew' ],
        closeOnEscape : true,
        multipleSearch : true,
        closeAfterSearch : true
    });   
    someFunc('name');
});

Json Data type

$(document).ready(function() {
    someFunc = function(columnName) {
         var texts = jQuery("#myGrid").jqGrid('getCol',columnName);
         console.log(texts); //is printing only when datatype is local
    };
    jQuery("#myGrid").jqGrid(
        {
            url : 'someUrlToGetData',
            autoencode:true,
            mtype: 'GET',
            datatype: 'json',

            colModel : [ 
                {name: 'name', index: 'Name'}
            ]
    });
    jQuery("#mygrid").jqGrid('navGrid', '#pager', {
        edit : false,
        add : false,
        del : false,
        search : true
    }, {}, {}, {}, {
        sopt : [ 'eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew' ],
        closeOnEscape : true,
        multipleSearch : true,
        closeAfterSearch : true
    });   
    someFunc('name');
});

score 1 · Accepted Answer · answered Nov 12 '12 at 15:42

1

You should include the server response from the URL 'someUrlToGetData'. Moreover you should declare variable someFunc before assigning it: var someFunc = function(columnName) { ... };

To your main question: If the server correct produce the JSON data for jqGrid (see the documentation) then you should just move call of someFunc('name'); inside of loadComplete callback.

jQuery("#myGrid").jqGrid({
    url : 'someUrlToGetData',
    autoencode:true,
    mtype: 'GET',
    datatype: 'json',
    colModel : [ 
        {name: 'name', index: 'Name'}
    ],
    gridview: true,
    loadComplete: function () {
        someFunc('name');
    }
});

The problem is that the code work asynchronously. If you create grid having datatype: "json" then Ajax call will be made to the URL specified by url option of jqGrid.

answered Nov 12 '12 at 15:42

Oleg

220,925
34
403
798

following your answer http://stackoverflow.com/a/4102155 I am trying to create a drop down in the filter bar. However, I am getting my data through a URL. The drop down is made by getting unique records for a column and then stashing them in the drop down as options. However, If I am getting data from a URL and only getting first 20 records at first time (rest records will be fetched when user goes to next page). So my drop down won't have ALL the unique records, but only unique records for first 20 records. Is there a way to overcome this? I'll open a new question if this isn't clean – birdy Nov 12 '12 at 15:57
@birdy: I suppose that the problem is just paging of data. Typically one creates a pager in the grid. You can just include `toppager: true` in the grid. Then you will be able to press "Next" button on the pager to see the next 20 rows of data. Alternatively you can include `rowNum: 10000` option to increase the default value `20` rows per page to 10000. – Oleg Nov 12 '12 at 16:28

jqGrid not fetching row data when datatype is json but works ok when data type is local.

1 Answers1