Question

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
   }
})

loadComplete

loadComplete: function(data){
    var x, y, cellProp, item;
    for (x = 0; x < data.mypage.outerwrapper.innerwrapper.rows.length; x++) {
        item = data.mypage.outerwrapper.innerwrapper.rows[x];
        var cellCount = data.mypage.outerwrapper.innerwrapper.rows[x].cells.length;
        for (y = 0; y < cellCount; y += 1) {
            cellProp = data.mypage.outerwrapper.innerwrapper.rows[x].cells[y];
            if (cellProp.label === "linkimg") {
                var linkimgItem = data.mypage.outerwrapper.innerwrapper.rows[x].cells[y].links;
                var linkimgCount = data.mypage.outerwrapper.innerwrapper.rows[x].cells[y].links.length;         
                var g;
                if (linkimgCount === 2) {
                    for (g = 0; g < linkimgCount; g += 1) {
                         $("td[aria-describedby='myjqgrid_" + cellProp.label + "']").append("<span style='padding-right:5px'><a href='#'>"+data.page.outerwrapper.innerwrapper.rows[x].cells[y].links[g].name+"</a></span>");                               
                    }
                }else{
                      $("td[aria-describedby='myjqgrid_" + cellProp.label + "']").append("<img src='images/icon.gif' width='10' height='10'>"); 
                }           
            }
        }
    }
}

What I’m trying to do

Each row has only 1 cell – linkimg. I loop through each row and then each cell, then count the number of items in the links array.

If label = linkimg and the number of items in links array = 2, I want the value of the column to be hyperlinks

<span><a>link1</a><span><span><a>link2</a></span>

If label = linkimg and the number of items in links array > 2, I want the value of the column to be an image

<img src='images/icon.gif' width='10' height='10'>

Problem that I’m having

With the above code, the column in each row gets the following output:

<img src='images/icon.gif' width='10' height='10'><span><a>link1</a><span><span><a>link2</a></span>

The output should be

First Row – <img src='images/icon.gif' width='10' height='10'>

Second Row – <span><a>link1</a> <span><span><a>link2</a></span>

Third Row – <span><a>link1</a> <span><span><a>link2</a></span>

Answer 1

Look at the demo. It should solve your problem.

The idea of the solution is

1. To save the cells property of the input data in the object cellsById so that one can get the cells by the rowid with respect of cellsById[rowid].
2. To use custom formatter to format the contain of the ‘linkimg’ column based on the cells property. We will get cells from the rawObject parameter of the custom formatter (as rawObject.cells) or we will get the same data from cellsById. We get the rowid of the current formatted row from the options parameter (as options.rowId).

The most important code fragments are

formatter: function (val, options, rawObject) {
    var l, i, cellProp, linkimgItem, linkimgCount, g,
        cells = $.isEmptyObject(cellsById) ?
                rawObject.cells :
                cellsById[options.rowId];
    if (typeof cells !== "undefined" && cells.length > 0) {
        for (i = 0, l = cells.length; i < l; i++) {
            cellProp = cells[i];
            if (cellProp.label === "linkimg") {
                linkimgItem = cellProp.links;
                linkimgCount = linkimgItem.length;
                if (linkimgCount === 2) {
                    val = '';
                    for (g = 0; g < linkimgCount; g += 1) {
                        val += "<span style='padding-right:5px'><a href='#'>" +
                                linkimgItem[g].name + "</a></span>";
                    }
                } else {
                    val = "<img src='images/icon.gif' width='10' height='10'>";
                }
            }
        }
    }
    return val;
}}

and

loadComplete: function (data) {
    var rows, i, l, item;
    if (typeof data.mypage !== "undefined") {
        rows = data.mypage.outerwrapper.innerwrapper.rows;
        for (i = 0, l = rows.length; i < l; i++) {
            item = rows[i];
            cellsById[item.id] = item.cells;
        }
    }
}