jqgrid subgrids from a single nested json

by

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.

More Related Contents:

  1. JQuery Grid-SubGrid for Parent-Child relation
  2. jqGrid returns blank cells
  3. Mapping JSON data in JQGrid
  4. JQgrid total amount row
  5. How do I POST JSON data with cURL?
  6. How can I deserialize JSON to a simple Dictionary in ASP.NET?
  7. How to update a value in a json file and save it through node.js
  8. Parse JSON from JQuery.ajax success data
  9. Flatten aggregated key/value pairs from a JSONB field?
  10. Convert nested JSON array into separate columns in CSV file
  11. Jenkins Pipeline NotSerializableException: groovy.json.internal.LazyMap
  12. Mongoimport of JSON file
  13. JSON Specification and usage of BOM/charset-encoding
  14. How to parse a complicated JSON with Go unmarshal?
  15. Can’t send a post request when the ‘Content-Type’ is set to ‘application/json’
  16. Proper formating of JSON using powershell
  17. Angular: ‘Cannot find a differ supporting object ‘[object Object]’ of type ‘object’. NgFor only supports binding to Iterables such as Arrays’
  18. In Excel VBA on Windows, for parsed JSON variables what is this JScriptTypeInfo anyway?
  19. How to format a JSON string as a table using jq?
  20. How to create dynamic routes with react-router-dom?
  21. JSON parse error: Can not construct instance of java.time.LocalDate: no String-argument constructor/factory method to deserialize from String value
  22. OpenAPI query string parameter with list of objects
  23. Is it possible to partially decode and update JSON? (go)
  24. How to convert postgres json to integer
  25. OpenAPI path/query parameters nested structure serialization
  26. Load data from Webservice (asmx) to jqgrid. Please help me
  27. Decoding Error — Expected to decode Dictionary but found an array instead
  28. Can I encrypt my JSON data?
  29. Converting object to an encodable object failed
  30. node.js readfile error with utf8 encoded file on windows

Leave a Comment