CODEWITHSUNDEEP
jqueryjqgrid
Anil Kumar C
Anil Kumar C

Reputation: 1624

JQGrid populated with blank rows

I have created the Grid with the following configuration

$.ajax({
        type: "POST",
        url: "populateAllRulesJson.action",
        data: "",
        dataType: "json",   
        success: function(result)
        {
             alert("SUCCESS ::: " + JSON.stringify(result.jSONResponseObject));
             data = JSON.stringify(result.jSONResponseObject);
             jQuery("#rulesTable").jqGrid({
                    url:"populateAllRulesJson.action",
                    datatype: "jsonstring", 
                    height: 'auto', 
                    width: 'auto', 
                    colNames:['Rule ID','Description', 'Geograph', 'Process', 'Rules Classification', 'Types', 'UDAC'], 
                    colModel:[ {name:'ruleID',index:'ruleID', width:65, sorttype:'int'}, 
                               {name:'description',index:'description', width:150}, 
                               {name:'geograph',index:'geograph', width:100},
                               {name:'process',index:'process', width:100},            
                               {name:'rulesClassification',index:'rulesClassification', width:100},
                               {name:'types',index:'types', width:100},
                               {name:'udac',index:'udac', width:100}
                             ], 
                    datastr : data,
                    jsonReader: { repeatitems: false },
                    rowNum:10, 
                    rowList : [10,20,30], 
                    loadonce:true, 
                    mtype: "GET", 
                    rownumbers: true, 
                    rownumWidth: 10, 
                    gridview: true, 
                    pager: '#rulesDivPager', 
                    sortname: 'ruleID', 
                    viewrecords: true, 
                    sortorder: "asc", 
                    caption: "Searching Rules ..."

                });
        },
        error: function(x, e)
        {
            alert(x.readyState + " "+ x.status +" "+ e.msg);
        }

});

I am sending the following JSON object to the grid. But the grid is populating with four blank rows.

{
"total":2,
"page":1,
"records":7,
"rows":[{"id":"1","cell":"{\"ruleID\":\"43\",\"description\":\"Images, text and voice over should synchronize as best as possible.\",\"geograph\":\"Yell US\",\"process\":\"Photomotion\",\"rulesClassification\":\"Image\",\"types\":\"New\",\"udac\":\"NPM\"}"},
{"id":"2","cell":"{\"ruleID\":\"48\",\"description\":\" For profile pages UDAC Mismatch in a Control sheet can be ignored.\",\"geograph\":\"Yell US\",\"process\":\"Profile Pages\",\"rulesClassification\":\"Copysheet\",\"types\":\"New\",\"udac\":\"NGP\"}"},
{"id":"3","cell":"{\"ruleID\":\"51\",\"description\":\" Ignore all requests for logo sized artwork in NSP ads.\",\"geograph\":\"Yell US\",\"process\":\"Profile Pages\",\"rulesClassification\":\"Logo\",\"types\":\"New\",\"udac\":\"NSP\"}"},
{"id":"4","cell":"{\"ruleID\":\"47\",\"description\":\" Irregular borders are not allowed in banner ads..\",\"geograph\":\"Yell US\",\"process\":\"Profile Pages\",\"rulesClassification\":\"Border\",\"types\":\"New\",\"udac\":\"MRB\"}"}
]}

What was the mistake i made in this grid configuration. please let me know.

Upvotes: 0

Views: 1985

Answers (1)

Oleg
Oleg

Reputation: 221997

I think that your main error is the usage of cell as string. You have

{"id":"1","cell":"{\"ruleID\":\"43\", ...}"},

instead of

{"id":"1","cell":{"ruleID":"43", ...}},

The second problem is that you use some very strange format of input data. In general you can specify the format of input data with jsonReader option. If you don't use any jsonReader the default value will be used (see the documentation). So the value of cell property must be array of items:

{"id":"1","cell":["43", ...., "New","NPM"]},

You can reduce the need of sending "id" (especially with dummy values which are not equal ruleID) and sending fixed text "cell" in every row of data. In the case you can specify jsonReader: {cell: "", id: 0} and the data direct as array:

["43", ...., "New","NPM"]

The usage id: 0 means that the first element of the array specify unique rowid.

Alternatively you can use jsonReader: {repeatitems: false, id: "ruleID"} and send the items as object with named properties:

{"ruleID":"43", ....,"types":"New","udac":"NPM"}

So you have many options, but your current format of JSON data is definitively wrong and you have to change it.

Moreover I think that you should better use datatype: "json" instead of datatype: "jsonstring". If you do use datatype: "jsonstring" you can use datastr : result.jSONResponseObject. The datastr must not be JSON string. It could be object.

The last remark: I recommend you to use loadError callback. See the answer for more details.

Upvotes: 1

Related Questions