Question

This is in continuation of jqgrid – json looping issue with the difference that I have moved the colNames and colModel to JSON.

JSON

{
    "colModel": [
        {
            "name": "linkimg",
            "index": "linkimg",
            "width": 60,
            "align": "left",
            "jsonmap": "cells.0.links"
        }
    ],
    "colNames": [
        "linkimg"
    ],
    "mypage": {
        "outerwrapper": {
            "page": "1",
            "total": "1",
            "records": "1",
            "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

$(document).ready(function () { 
    $.ajax({
        type: "GET",
        url: "myjqgrid.json",
        data: "",
        dataType: "json",
        success: function(response){
            var columnData = response.mypage.outerwrapper,
                columnNames = response.colNames,
                columnModel = response.colModel;

            $("#myjqgrid").jqGrid({
                datatype: 'jsonstring',
                datastr: columnData,                
                colNames: columnNames,
                colModel: columnModel,
                jsonReader: {
                    root: "innerwrapper.rows",              
                    repeatitems: false
                },
                gridview: true,
                pager: "#Pager",
                rowNum: 2,
                rowList: [2, 4, 6, 8],
                viewrecords: true,              
                recordpos: 'left',
                multiboxonly: true,
                multiselect: true,
                sortname: 'id',
                sortorder: "desc",  
                sorttype: "text",   
                sortable: true,
                caption: "<h2>My JQGrid</h2>",
                width: "1406",      
                height: "100%",
                scrolloffset: 0,    
                loadonce: true,     
                cache: true,
                loadComplete: function(data){

                }
            });
        }
    });
    $("#myjqgrid").jqGrid('navGrid','#Pager');

});

Problem

How do I take formatter: out of the colModel? If I keep it in JSON, the jqgrid does not display.

Answer 1

If you don’t need unformatter you can extend the list of predefined formatters with your formatter:

$.fn.fmatter.myLinkFormatter = function (val, options, rawObject) {
    ....
};

and then use "formatter": "myLinkFormatter" in the column definition

{
    "colModel": [
        {
            "name": "linkimg",
            "index": "linkimg",
            "width": 60,
            "align": "left",
            "formatter": "myLinkFormatter",
            "jsonmap": "cells.0.links"
        }
    ],
    "colNames": [
        "linkimg"
    ],
    "mypage": {
        "outerwrapper": {
        ...
    }
}

See the demo.

One more remark: you should move $("#myjqgrid").jqGrid('navGrid','#Pager'); inside of success handler like I done in the demo.