How to make sub rows for json nested array in jqgrid

Question

I have the local json string as follows:

var jsonObj = {
        "page": "1",
        "records": "2",
        "rows": [
{"id":"1","firstName":"ABC","lastName":"XYZ","city":"blr","state":"Karnataka","arr":[
{"arr1":"value1","arr2":"value2"},{"arr1":"value3","arr2":"value4"}]},
        {"id":"2","firstName":"DEF","lastName":"PQR","city":"Mumbai","state":"Maharashtra","arr":[{"arr1":"result1","arr2":"result2"},{"arr1":"result3","arr2":"result4"}]}]};

Using jqgrid i would like to show the above json string in two rows, having id1 and id2, however for nested array (i.e. arr in above string) i would like to show them as sub rows of their parent row but not as a sub grid.

The other columns in the sub row should contain duplicate data as parent row except for two columns i.e. arr1 and arr2. The sub rows should not be visible on load. There should be a plus/traingle icon on click of which the sub row should expand.

This is the code i used to display jqgrid.

 $("#list").jqGrid({
                datastr : jsonObj,
                datatype : "jsonstring",
                colNames : [ 'Id', 'FirstName', 'LastName', 'City', 'State', 'Array1', 'Array2' ],
                colModel : [ {
                        name : 'id',
                        index : 'id',
                        width : 100,
                        key : true
                }, {
                        name : 'firstName',
                        index : 'firstName',
                        width : 150

                }, {
                        name : 'lastName',
                        index : 'lastName',
                        width : 150

                }, {
                        name : 'city',
                        index : 'city',
                        width : 100

                }, {
                        name : 'state',
                        index : 'state',
                        width : 100

                }, {
                        name : 'arr1',
                        index : 'arr1',
                        width : 100,
                        jsonmap : "arr.0.arr1"
                }, {

                        name : 'arr2',
                        index : 'arr2',
                        width : 100,
                        jsonmap : "arr.0.arr2"
                } ],
                pager : '#pager',
                rowNum : 10,
                rowList : [ 10, 20, 30 ],
                sortname : 'id',
                sortorder : 'desc',
                viewrecords : true,
                gridview : true,
                caption : 'JSON Array',
                jsonReader : {
                        repeatitems : false, root: "rows"
                }
        });

score 0 · Accepted Answer · edited May 23 '17 at 11:52

0

It seems to me that you do need to use subgrid as grid and create the required subgrid data based on the data of the parent string. Look the answer for more details. Exactly like in the referenced answer you can use getLocalRow with the parent row id to get all data of the parent row and you can fill array with two items of data from the data of the parent row. You can hide the column headers of subgrid like in the demo.

edited May 23 '17 at 11:52

Community

1
1

answered Aug 15 '15 at 19:07

Oleg

220,925
34
403
798

@ Oleg: The answer you referred was very helpful. Thanks a ton for that. However i am still facing issue in getting the data in sub grid. data: $(this).jqGrid("getLocalRow", pureRowId) is not getting the intended data. Am i doing anything wrong. Sorry for asking petty questions but i m new to jqgrid. – HarishSingh Aug 16 '15 at 16:20
@Toni: The solution depends on the fork of jqGrid which you use and from the version. If you use [free jqGrid](https://github.com/free-jqgrid/jqGrid), it's my fork, then you can add `additionalProperties: ["arr"]` parameter. In the case jqGrid will read the data. Alternatively you can use `datatype: "local", data: jsonObj.rows` instead of `datatype : "jsonstring", datastr: jsonObj` used currently. In the case local data with save `arr` proparty in the local data and `$(this).jqGrid("getLocalRow", pureRowId)` will contain `arr` property. So you can get the object and create `data` for subgrid. – Oleg Aug 16 '15 at 17:21
Thanks again for the reply. I had used datatype : "jsonstring", datastr: jsonobj so that i can use jsonmap in colModel to map to the arr contents i.e. value1 and value2 for the first row. What i want is, there should be two rows (along with 1-1 sub_rows/sub_grid), first row should have 7 columns i.e. id, firstName, lastName, city, state, arr1, arr2 and their value should be 1, ABC, XYZ, blr, Karnataka, value1, value2. Now as arr for id = 1 has two arrays so second row should display in sub grid with values 1, ABC, XYZ, blr, Karnataka, value3, value4. Similarly for 2nd row (and sub row) – HarishSingh Aug 16 '15 at 18:40
If you use [free jqGrid](https://github.com/free-jqgrid/jqGrid) then `jsonmap` will work in case of usage `datatype: "local"` too (see [the wiki](https://github.com/free-jqgrid/jqGrid/wiki/The-usage-of-jsonmap-with-local-data)). If you can't migrate to free jqGrid 4.9.2 then you can just **modify** the input data by assigning `arr[0].arr1` and `arr[0].arr2` as direct property of every item of `rows`. You need just include the simple `for` loop before creating the grid. – Oleg Aug 16 '15 at 18:50

How to make sub rows for json nested array in jqgrid

1 Answers1