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",
                 }
              ],

           ],
        }
}

Absonant

Answer 1

I made the demo which demonstrate how to do this:

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.

Macroscopic

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? – Absonant

@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? – Macroscopic

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! – Absonant

@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. – Macroscopic