I have a large data set coming back in JSON format such that I get 3 pages, each page has 5 rows.
JSON
{
"mypage":{
"outerwrapper":{
"page":"1",
"total":"3",
"records":"15",
"innerwrapper":{
"rows":[
{
"id":"1",
"read": true,
"cells": [
{
"label":"linkimg",
"value": "Link-A",
"links": [
{
"name":"link1"
},
{
"name":"link2"
},
{
"name":"link3"
}
]
}
]
},
{
"id":"2",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-B",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"3",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-C",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"4",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-D",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"5",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-E",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"6",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-F",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"7",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-G",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"8",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-H",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"9",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-I",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"10",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-J",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"11",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-K",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"12",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-L",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"13",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-M",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"14",
"read": false,
"cells": [
{
"label":"linkimg",
"value": "Link-N",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
},
{
"id":"15",
"read": true,
"cells": [
{
"label":"linkimg",
"value": "Link-O",
"links": [
{
"name":"link1"
},
{
"name":"link2"
}
]
}
]
}
]
}
}
}
}
JQGrid Definition
$("#myjqgrid").jqGrid({
url: "jqgrid.json",
datatype: "json",
contentType: "application/x-javascript; charset=utf-8",
colNames:['linkimg'],
colModel:[
{name:'linkimg',index:'linkimg', width:100, align:"center", resizable:false}
],
jsonReader: {
root: "mypage.outerwrapper.innerwrapper.rows",
repeatitems: false
},
rowNum:5,
rowList:[5,10,15],
pager: '#Pager',
sortname: 'id',
recordpos: 'left',
multiboxonly:true,
viewrecords: true,
sortorder: "desc",
multiselect: true,
width: "1406",
height: "100%",
scrolloffset: 0,
loadonce: true,
sortable: true,
sorttype: "text"
})
What I’m trying to do
I’m looping through each row in JSON and checking for the "read" property. If it is true, then that row should have css text-decoration set to underline.
loadComplete: function(data){
var x, rowItem;
for (x = 0; x < data.mypage.outerwrapper.innerwrapper.rows.length; x++) {
rowItem = data.mypage.outerwrapper.innerwrapper.rows[x];
var rowItemRead = rowItem.read;
if(rowItemRead === true){
$("#" + rowItem.id + " > td").css({"text-decoration":"underline"});
}
}
}
The above piece of code is working BUT the problem is
When I navigate from page 1 to page 2 OR from page 2 to page 3, I get the error message
mypage.outerwrapper
is null or not an object.
Full JQGrid definition code (with jsonReader and loadComplete)
$(function (){
var getValueByName = function (cells, cellItem) {
var i, count = cells.length, item;
for (i = 0; i < count; i += 1) {
item = cells[i];
if (item.label === cellItem) {
return item.value;
}
}
return '';
};
$("#myjqgrid").jqGrid({
url: "jqgrid.json",
datatype: "json",
contentType: "application/x-javascript; charset=utf-8",
colNames:['linkimg'],
colModel:[
{name:'linkimg',index:'linkimg',jsonmap:function(obj){return getValueByName(obj.cells, "linkimg");}, width:50, align:"center", resizable:false},
],
jsonReader: {
root: "mypage.outerwrapper.innerwrapper.rows",
page: "mypage.outerwrapper.page",
total: "mypage.outerwrapper.total",
records: "mypage.outerwrapper.records",
repeatitems: false
},
rowNum:5,
rowList:[5,10,15],
pager: '#Pager',
recordpos: 'left',
multiboxonly:true,
viewrecords: true,
sortorder: "desc",
multiselect: true,
width: "1406",
height: "100%",
scrolloffset: 0,
loadonce: true,
sortable: true,
sorttype: "text",
cache: true,
loadComplete: function(data){
var x, items, idName, rowItem;
if (typeof data.mypage === "undefined") {
items = data.rows;
idName = '_id_';
}else{
items = data.mypage.outerwrapper.innerwrapper.rows;
idName = 'id';
}
for (x = 0; x < items.length; x++) {
rowItem = items[x];
var rowItemRead = rowItem.read;
if(rowItemRead === true){
$("#" + rowItem[idName] + " > td").css({"text-decoration":"underline"});
}
}
}
});
$("#myjqgrid").jqGrid('navGrid','#Pager',{add:false,del:false,edit:false,position:'right',minWidth:800,maxWidth:1405,minHeight:350,maxHeight:680});
});
UPDATE
$(function (){
var getValueByName = function (cells, cellItem) {
var i, count = cells.length, item;
for (i = 0; i < count; i += 1) {
item = cells[i];
if (item.label === cellItem) {
return item.value;
}
}
return '';
};
var setCSS = function (rowId, val, rawObject){
return rawObject.read? ' style="text-decoration: underline;"' : '';
}
$("#myjqgrid").jqGrid({
url: "jqgrid.json",
datatype: "json",
contentType: "application/x-javascript; charset=utf-8",
colNames:['linkimg','read'],
colModel:[
{name:'linkimg',index:'linkimg',jsonmap:function(obj){return getValueByName(obj.cells, "linkimg");}, width:50, align:"center", resizable:false, cellattr:function(obj){return setCSS(rowId, val, rawObject);}},
{name:'read', hidden:true}
],
jsonReader: {
root: "mypage.outerwrapper.innerwrapper.rows",
page: "mypage.outerwrapper.page",
total: "mypage.outerwrapper.total",
records: "mypage.outerwrapper.records",
repeatitems: false
},
rowNum:5,
rowList:[5,10,15],
pager: '#Pager',
recordpos: 'left',
multiboxonly:true,
viewrecords: true,
sortorder: "desc",
multiselect: true,
width: "1406",
height: "100%",
scrolloffset: 0,
loadonce: true,
sortable: true,
sorttype: "text",
cache: true
});
$("#myjqgrid").jqGrid('navGrid','#Pager',{add:false,del:false,edit:false});
});
If you use
datatype: "json"withoutloadonce: truethen theurl: "jqgrid.json"should *dynamically+ generate the requested page and the server is responsible for sorting, paging and filtering of data.If you load static JSON data per Ajax, for example if the “jqgrid.json” is just a file, then you should use
loadonce: trueoption of jqGrid. In the case jqGrid with load the data only once and cache it locally in the internal parametersdataand_index. Then paging, sorting and filtering of the data will be made by jqGrid locally on the client side.UPDATED: After the first load the format of the
dataparameter ofloadCompletecallback will be changed and will have the names corresponds to localReader. So you can just test inside ofloadCompletewhethertypeof data.mypage === "undefined". In the case theloadCompleteworks already with the local data and you will find the items the grid which will be displayed on the current page as the items of the arraydata.rows. So the code can be about the following:UPDATED 2: After you posted full code with the test data everything will be clear. How you can see from the demo if you just add additional hidden column
the grid will display the data correctly.
I wrote you before that the current code from
loadCompleteis not effective. Now I can give you the suggestion what you can do. You can first add the hidden'read'column (see above) and additionally addcellattrproperty to the'linkimg'column defined as followingAfter that you can remove the full code which you use in
loadComplete. How you can see from the next demo the approach works. The code will be not only clear, but it works much more quickly.The last remark: I added in both demos the parameter
gridview: truewhich improve the performance without any disadvantages in your case. I recommend include the parameter in all your grids.