jqgrid - error when moving from 1 page to another

Question

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 `"jqgrid.json"` is URL to the file or is the URL where the server dynamically generate the data which represent the requested page? — Oleg, Dec 19 '11 at 18:03

Oleg · Accepted Answer · 2011-12-19T22:46:04.113

1

If you use datatype: "json" without loadonce: true then the url: "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: true option of jqGrid. In the case jqGrid with load the data only once and cache it locally in the internal parameters data and _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 data parameter of loadComplete callback will be changed and will have the names corresponds to localReader. So you can just test inside of loadComplete whether typeof data.mypage === "undefined". In the case the loadComplete works 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 array data.rows. So the code can be about the following:

loadComplete: function(data){
    var x, rowItem, items, idName, l;         
    if (typeof data.mypage === "undefined") {
        // load from the local data
        items = data.rows;
        idName = '_id_';
    } else {
        items = data.mypage.outerwrapper.innerwrapper.rows;
        idName = 'id';
    }
    for (x = 0, l = items.length; x < l; x++) {
        rowItem = items[x];
        if(rowItem.read === true){                   
            $("#" + rowItem[idName] + " > td").css({"text-decoration":"underline"});
        }
    }
}

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

{name:'read',hidden:true}

the grid will display the data correctly.

I wrote you before that the current code from loadComplete is 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 add cellattr property to the 'linkimg' column defined as following

cellattr: function (rowId, val, rawObject) {
    return rawObject.read? ' style="text-decoration: underline;"' : '';
}

After 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: true which improve the performance without any disadvantages in your case. I recommend include the parameter in all your grids.

edited Dec 19 '11 at 22:46

answered Dec 19 '11 at 18:15

Oleg

220,925
34
403
798

I've updated my **jqgrid definition**. It still doesn't work. – techlead Dec 19 '11 at 18:24
@SK11: I updated my answer with additional information. It should solve your problem. If you would have performance problems in `loadComplete` of your solution I recommend you to look in [the answer](http://stackoverflow.com/a/6575634/315935) and [this one](http://stackoverflow.com/a/5690583/315935) which describe another way how to iterate through the data in the `loadComplete`. – Oleg Dec 19 '11 at 19:55
Thank you. I'm not getting any error message now. BUT, as I navigate from one page to another, the css `underline` state is lost for that row. – techlead Dec 19 '11 at 20:08
@SK11: Could you post more full code which you use. You current code has no `jsonReader` which are required to read the data which you use. You posted `loadComplete` also *outside* of the grid definition. Could you post the code which can be used to reproduce your problem? – Oleg Dec 19 '11 at 20:20
My current code has `jsonReader`. But I've posted the full jqgrid definition for you under the heading **Full JQGrid definition code (with jsonReader and loadComplete)**. – techlead Dec 19 '11 at 20:32
@SK11: What I mean is that your JSON data contains complex `"cells"` whicj don't corresponds the `jsonReader` which you use. You have at least define `jsonmap`. So If I use the code to read your JSON data I see an empty grid. – Oleg Dec 19 '11 at 20:53
@SK11: Another problem which you has. you don't save the information `read` in any column of the grid. So if you goes to the next page the `rowItem.read` will be always `undefined`. Because I don't understand which information you place in the `linkimg` column I can't help you to fix the problem. – Oleg Dec 19 '11 at 20:59
I've updated the `colModel` (forgot about it earlier). You should be able to see the grid. There are 2 columns - the first column is for the checkboxes. The second column displays the value of `value` property under `cells`. – techlead Dec 19 '11 at 22:12
@SK11: Now everything is clear. See "UPDATE 2" part of my answer. – Oleg Dec 19 '11 at 22:46
Thank you. Another one - http://stackoverflow.com/questions/8508389/jqgrid-json-looping-issue – techlead Dec 19 '11 at 23:30
I am trying to define a generic function for `cellattr` that can be used for any number of cells/columns. Please see my post under **UPDATE**. It's giving me an error message **`rowId` is undefined** – techlead Dec 20 '11 at 18:52
@SK11: You should replace `cellattr:function(obj){return setCSS(rowId, val, rawObject);}` to `cellattr: setCSS` – Oleg Dec 20 '11 at 19:36
Thank you so much. I need your help on this pls - http://stackoverflow.com/questions/8581897/jqgrid-rendering-javascript-file-with-the-column-model – techlead Dec 20 '11 at 21:06

jqgrid - error when moving from 1 page to another

1 Answers1

Linked