jqgrid - how to map cell data to column model IF column model is in JSON response?

Question

I have defined the jqgrid column name and column model arrays in the JSON response so that I can dynamically populate the jqgrid headers.

Problem that I'm having

Data is not getting displayed in the grid. How do I map cells.value to each column?

JSON

{
    "colModel": [
        {
            "name": "ID",
            "index": "ID",
            "width": 60,
            "align": "left"
        },
        {
            "name": "First Name",
            "index": "First Name",
            "width": 140,
            "align": "left"
        },
        {
            "name": "Last Name",
            "index": "Last Name",
            "width": 160,
            "align": "left"
        }
    ],
    "colNames": [
        "ID",
        "First Name",
        "Last Name"
    ],
    "mypage": {
        "outerwrapper": {
            "page":"1",
            "total":"1",
            "records":"1",
            "innerwrapper": {
                "rows":[
                    {
                        "id":"1",
                        "cells":
                        [               
                            {
                                "value":"12345"                     
                            },
                            {
                                "value":"David"
                            },
                            {                           
                                "value":"Smith"                     
                            }                                                                                       
                        ]       
                    }
                ]
            }
        }
    }
}

JQGrid Definition

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

            $("#dataGrid").jqGrid({
                jsonReader: {
                    root: "result.mypage.outerwrapper.innerwrapper.rows",
                    cell: "result.mypage.outerwrapper.innerwrapper.rows.cells",
                    repeatitems: true,
                    page: "result.mypage.outerwrapper.page",
                    total: "result.mypage.outerwrapper.total",
                    records: "result.mypage.outerwrapper.records"
                },
                datatype: 'local',
                data: columnData,                
                colNames: columnNames,
                colModel: columnModel,
                gridview: true,
                pager: "Pager",
                height: "auto",
                rowNum: 5,
                rowList: [5, 10, 20, 50],
                viewrecords: true
            });
        }
    });
    $("#dataGrid").jqGrid('navGrid','#Pager');  
});

score 5 · Accepted Answer · answered Dec 23 '11 at 22:00

In your current question you continue with extremely exotic JSON format of the input data.

First of all I recommend you never use columns having meta-characters in the value of name property in the colModel. In your case you used "name": "First Name" and "name": "Last Name" which can follow to serious problems. You should replace the name property to names like "name": "FirstName".

The next problem is that your data can be read only using jsonmap property of colModel. So you have to define the property in the JSON input. Moreover you can't use jsonmap property of colModel together with datatype: 'local'. So you have to either convert the information from the result.mypage.outerwrapper.innerwrapper.rows part of the JSON input to some more readable format or to use datatype: 'jsonstring'.

So you can fix the JSON data to the following

{
    "colModel": [
        {
            "name": "ID",
            "index": "ID",
            "width": 60,
            "align": "left",
            "jsonmap": "cells.0.value"
        },
        {
            "name": "FirstName",
            "index": "FirstName",
            "width": 140,
            "align": "left",
            "jsonmap": "cells.1.value"
        },
        {
            "name": "LastName",
            "index": "LastName",
            "width": 160,
            "align": "left",
            "jsonmap": "cells.2.value"
        }
    ],
    "colNames": [
        "ID",
        "First Name",
        "Last Name"
    ],
    "mypage": {
        "outerwrapper": {
            "page":"1",
            "total":"1",
            "records":"1",
            "innerwrapper": {
                "rows":[
                    {
                        "id":"1",
                        "cells":
                        [               
                            {
                                "value":"12345"                     
                            },
                            {
                                "value":"David"
                            },
                            {                           
                                "value":"Smith"                     
                            }                                                                                       
                        ]       
                    }
                ]
            }
        }
    }
}

and the code to the following

$.ajax({
    type: "GET",
    url: "SK11-4.json",
    data: "",
    dataType: "json",
    success: function (result) {
        var columnData = result.mypage.outerwrapper,
            columnNames = result.colNames,
            columnModel = result.colModel;

        $("#dataGrid").jqGrid({
            datatype: 'jsonstring',
            datastr: columnData,
            colNames: columnNames,
            colModel: columnModel,
            jsonReader: {
                root: 'innerwrapper.rows',
                repeatitems: false
            },
            gridview: true,
            pager: "Pager",
            height: "auto",
            rowNum: 5,
            rowList: [5, 10, 20, 50],
            viewrecords: true
        });
    }
});
$("#dataGrid").jqGrid('navGrid', '#Pager');

As the result you will have the demo which work.

Is it possible to access `#dataGrid` using `$(this)` within `$("#dataGrid").jqGrid({...})`? — techlead, Dec 27 '11 at 21:00
@SK11: To answer your question it's important to know *where* you want to use `$(this)`. Could you post more full code fragment which you mean. In any way to use `this` it should be set by somewhere. For example inside of `loadComplete`, `onSelectRow` and many other callbacks/events of jqGrid you can use `$(this)` instead of `$("#dataGrid")` for example. — Oleg, Dec 27 '11 at 21:15
Thank you. I got it. Can you please help me with this? - http://stackoverflow.com/questions/8651719/jqgrid-loadcomplete-error-when-navigating-from-1-page-to-another — techlead, Dec 28 '11 at 04:05
@Oleg, I have more than one million data. So I should fetch part of data in per page. Every page I want to call server method that returns above json data. How can I do this? — AliRıza Adıyahşi, Nov 19 '12 at 10:22
@AliRızaAdıyahşi: I don't think that the usage of `datatype: 'jsonstring'` is good in the case. You should use `datatype: 'json'`. If the user would click on "Next" or "Previous" button on the pager or if the user change sorting order of set some filter the new request to `url` will be send with corresponding parameters. It's the standard server side implementation of jqGrid. — Oleg, Nov 19 '12 at 10:34
Could you look at this question? http://stackoverflow.com/questions/13452132/jqgrid-with-dynamic-colnames — AliRıza Adıyahşi, Nov 19 '12 at 10:44

Matt Cashatt · Answer 2 · 2011-12-23T19:26:53.267

0

Here is an example from a recent project of mine (DON'T FORGET THE HTML TAGS!):

 <table id="campaignGuidance"></table>

 <script>
  $("#campaignGuidance").jqGrid({
        url: '[PUT THE URL FOR YOUR JSON HERE]',
        datatype: "json",
        colNames: ['Status', 'Category', 'Description', 'Details', 'Ad/RM', 'Available'],
        colModel: [
            { name: 'Status', index: 'Status', width: 40, colName: 'Status', canHide: true, hidden: false },
            { name: 'Category', index: 'Category', width: 150, colName: 'Category' },
            { name: 'Description', index: 'Description', width: 200, colName: 'Description', canHide: true, hidden: false },
            { name: 'Details', index: 'Details', width: 200, colName: 'Details', canHide: true, hidden: false },
            { name: 'AdOrRm', index: 'AdOrRm', width: 70, colName: 'Ad/RM', canHide: true, hidden: false },
            { name: 'Available', index: 'Available', width: 110, colName: 'Available', canHide: true, hidden: false }
        ],

        ondblClickRow: function (id) { actions.viewCGDetails(id); },
        rowNum: 1000,
        autowidth: false,
        height: 700,
        width: 1900,
        rowList: [2, 5, 10, 20, 30],
        rowTotal: 2000,
        loadonce: true,
        viewrecords: true,
        caption: "CGD"
    });
</script>

edited Dec 23 '11 at 19:26

answered Dec 23 '11 at 19:14

Matt Cashatt

23,490
28
78
111

My column model is in JSON response and not defined within the jqgrid plugin. – techlead Dec 23 '11 at 19:17
OK, then you definitely need to change some things. I am opening a project now that I completed recently that what you need. I will replace the sample above with that code. – Matt Cashatt Dec 23 '11 at 19:22
I would really appreciate that. The only problem I'm having is mapping the data in `cells`. – techlead Dec 23 '11 at 19:24
How does this help me? What's the difference? Your column model is still in jqgrid plugin and not in the JSON response. – techlead Dec 23 '11 at 19:29
I am unfamiliar with that kind of problem, sorry. I just know that what I have done (in my example) works great. Pay close attention to those colNames & colModel parameters and make sure their attributes are all correct. Wish I could help more! – Matt Cashatt Dec 23 '11 at 19:29
Well, first off, there are some differences in the attributes of the jqGrid object which is now set up correctly to call a URL rather than an object. Secondly, the colNames and colModel properties in the jqGrid object I posted show you the proper structure you need to bind "cells"--as you put it--to the response. Are you calling the JSON from a URL or are you hard-coding it into your script? – Matt Cashatt Dec 23 '11 at 19:33
Well, I don't think you understand the problem here. If I use your code, it works. But please see the difference between the two. I'm making an Ajax call to get the result as JSON and then I'm binding this result to the jqgrid plugin using `data`, `colNames' and `colModel`. Your solution is not the answer to my problem. – techlead Dec 23 '11 at 19:37

jqgrid - how to map cell data to column model IF column model is in JSON response?

2 Answers2

Linked