jqgrid subgrids from a single nested json

Question

I want to use jqgrid with nested subgrids. However, the only examples I've found populate the main grid with one url load-data call and separate calls to populate the subgrids.

My subgrid data exist as nested documents in one JSON structure, as shown in the snippet below (I want chapters to appear as subgrids of the book, and files to be subgrids within chapters).

Can I create subgrids from nested JSON documents with jqgrid?

{
  _id: {"509403957ae7d3929edcb812"},
  name: {"MYBOOK"},
  layout: {
        chapters [
           {
              name: "myfirstchapter",
              sequence: 1,
              title: "My First Chapter",
              files: [
                 {
                 filetype: "tex",
                 name: "myfirstfile"
                 },
                 {
                 filetype: "tmpl",
                 name: "myfileb",
                 }
              ],

           },
           {
              name: "mysecondchapter",
              sequence: 2,
              title: "My Second Chapter",
              files: [
                 {
                 filetype: "tex",
                 name: "myintro"
                 },
                 {
                 filetype: "tex",
                 name: "myfilec",
                 }
              ],

           ],
        }
}

score 8 · Accepted Answer · edited May 23 '17 at 12:24

I made the demo which demonstrate how to do this:

enter image description here

The demo are based on the idea described here and on the fact that internal data option saves the input data in unmodified form. So you don't need to create some hidden columns to save additional information associated with the row. See the answer and this one for more details. I strictly recommend you additionally to use idPrefix option in subgrids. See the answer for details.

Below in the code which I used in the demo:

var myData = {
        _id: "509403957ae7d3929edcb812",
        name: "MYBOOK",
        layout: {
            chapters: [
                {
                    name: "myfirstchapter",
                    sequence: 1,
                    title: "My First Chapter",
                    files: [
                        { filetype: "tex", name: "myfirstfile" },
                        { filetype: "tmpl", name: "myfileb" }
                    ]
                },
                {
                    name: "mysecondchapter",
                    sequence: 2,
                    title: "My Second Chapter",
                    files: [
                        { filetype: "tex", name: "myintro" },
                        { filetype: "tex", name: "myfilec" }
                    ]
                }
            ]
        }
    },
    $grid = $("#list");

$grid.jqGrid({
    datatype: "local",
    data: myData.layout.chapters,
    colNames: ["Sequence", "Name", "Title"],
    colModel: [
        {name: "sequence", width: 65, key: true },
        {name: "name", width: 150 },
        {name: "title", width: 150}
    ],
    rowNum: 10,
    rowList: [5, 10, 20],
    pager: "#pager",
    gridview: true,
    ignoreCase: true,
    rownumbers: true,
    sortname: "sequence",
    viewrecords: true,
    height: "100%",
    subGrid: true,
    subGridRowExpanded: function (subgridId, rowid) {
        var subgridTableId = subgridId + "_t";
        $("#" + subgridId).html("<table id='" + subgridTableId + "'></table>");
        $("#" + subgridTableId).jqGrid({
            datatype: "local",
            data: $(this).jqGrid("getLocalRow", rowid).files,
            colNames: ["Name", "Filetype"],
            colModel: [
              {name: "name", width: 130, key: true},
              {name: "filetype", width: 130}
            ],
            height: "100%",
            rowNum: 10,
            sortname: "name",
            idPrefix: "s_" + rowid + "_"
        });
    }
});
$grid.jqGrid("navGrid", "#pager", {add: false, edit: false, del: false});

In the above code I fixed some syntax errors from the data which you posted.

thanks Oleg, I am using your example to learn from now. But to make sure I understand, I load the data at first with a url from my db server, and the subgrid then has datatype 'local', correct? — Tim, Nov 06 '12 at 18:05
@Tim: You are welcome! There are many different scenarios to fill jqGrid. It's better if you describe your requirements separately in details. Do you want better use `datatype: "json"`? Do you want to implement paging of data on the server side or want use `loadonce: true`? — Oleg, Nov 06 '12 at 18:48
thanks. I will try more with the example you've already given and if I can't figure it out I will ask a different question. Thank you! — Tim, Nov 06 '12 at 20:16
@Tim: You are welcome! One problem with jqGrid - there are too many alternative implementation ways. For example there are exist `data` parameter in different situation. If you use `datatype: "json"` without `loadonce: true` then no `data` will be filled. In the case one have to implement one solution way. If you use `datatype: "json"` with `loadonce: true` then `data` will be filled, but with some restrictions. If you use `datatype: "local"` you can use free structure of `data`. One can create solution for all cases, but the implementation will be different. — Oleg, Nov 06 '12 at 21:13

jqgrid subgrids from a single nested json

1 Answers1

Linked