JQGrid Subgrid Error How can this be fixed?

Question

I am trying to generate a JQgrid with Subgrid based on examples I came across online but instead of local data, I am using json service .

By Using nested JSON data, where the nested json data is used for the subgrid section.

When I try to create the grid, I keep getting this error "SyntaxError: Unexpected token i in JSON at position 26 200 OK"

What am I doing wrong or missing?

My code is below and my Fiddle is here

MY CODE

$(document).ready(function() {
  var jsonData = {
      id: 48803,
      thingy: "DSK1",
      number: "02200220",
      status: "OPEN",
      subgridData: [{
        num: 1,
        item: "Item 1",
        qty: 3
      }, {
        num: 2,
        item: "Item 2",
        qty: 5
      }]
    },
    {
      id: 48769,
      thingy: "APPR",
      number: "77733337",
      status: "ENTERED",
      subgridData: [{
        num: 3,
        item: "Item 3",
        qty: 5
      }, {
        num: 2,
        item: "Item 2",
        qty: 10
      }]
    },
    mmddyyyy = "";
  /*********************************************************************/


  $("#grid").jqGrid({
    url: "/echo/json/",
    mtype: "POST",
    datatype: "json",
    postData: {
      json: JSON.stringify(jsonData)
    },
    height: 'auto',
    colNames: ['Inv No', 'Thingy', 'Number', 'Status'],
    colModel: [{
      name: 'id',
      width: 60,
      sorttype: "int",
      key: true
    }, {
      name: 'thingy',
      width: 90
    }, {
      name: 'number',
      width: 80,
      formatter: "integer"
    }, {
      name: 'status',
      width: 80
    }],
    gridview: true,
    autoencode: true,
    pager: '#pagerId',
    caption: "Stack Overflow Subgrid Example",
    subGrid: true,
    subGridOptions: {
      plusicon: "ui-icon-triangle-1-e",
      minusicon: "ui-icon-triangle-1-s",
      openicon: "ui-icon-arrowreturn-1-e"
    },
    shrinkToFit: false,

    subGridRowExpanded: function(subgrid_id, row_id) {
      var subgrid_table_id = subgrid_id + "_t",
        pager_id = "p_" + subgrid_table_id,
        localRowData = $(this).jqGrid("getLocalRow", row_id);
      $("#" + subgrid_id).html("<table id='" + subgrid_table_id + "'></table><div id='" + pager_id + "'></div>");
      $("#" + subgrid_table_id).jqGrid({
        datatype: "local",
        data: localRowData.subgridData,
        colNames: ['No', 'Item', 'Qty'],
        colModel: [{
          name: "num",
          width: 80,
          key: true
        }, {
          name: "item",
          width: 130
        }, {
          name: "qty",
          width: 70,
          align: "right"
        }],
        rowNum: 20,
        idPrefix: "s_" + row_id + "_",
        pager: "#" + pager_id,
        autowidth: true,
        gridview: true,
        autoencode: true,
        sortname: "num",
        sortorder: "asc",
        height: "auto"
      }).jqGrid('navGrid', "#" + pager_id, {
        edit: false,
        add: false,
        del: false
      });
    }
  });


});

MY Fiddle

Answer 1

First of all you have to fix the syntax error. The definition of the variable jsonData in the form

var jsonData = {
        id: 48803,
        ...
    },
    {
        id: 48769,
        ...
    };

is false. You try to define jsonData as array of items. Thus the code fragment have to be fixed to

var jsonData = [{
        id: 48803,
        ...
    },
    {
        id: 48769,
        ...
    }];

Then you define <table id="grid"></table>, but create the grid using $("#output").jqGrid({...}); in your demo. You have to use in both cases the same value if id.

Now, back to you main problem. You want to use subgridData property of the items of the data ($(this).jqGrid("getLocalRow", row_id).subgridData) filled via datatype: "json". The datatype: "json" means server based sorting, paging and filtering of the data. jqGrid don't fill local data (the data parameter). To fill data you have to inform jqGrid that the input data from the server contains full data (all the pages) and thus jqGrid should fill data option and to use local sorting, paging and filtering. Thus you should add

loadonce: true,

and

additionalProperties: ["subgridData"],

additionally to inform jqGrid to fill the items of local data with subgridData property together with the properties id, thingy, number and status (the columns of the main grid).

Finally you can remove unneeded pager divs and to use simplified form of the pager: pager: true. You should consider to use Font Awesome additionally: iconSet: "fontAwesome".

The modified demo is https://jsfiddle.net/OlegKi/615qovew/64/, which uses the following code

$(document).ready(function() {
  var jsonData = [{
      id: 48803,
      thingy: "DSK1",
      number: "02200220",
      status: "OPEN",
      subgridData: [{
        num: 1,
        item: "Item 1",
        qty: 3
      }, {
        num: 2,
        item: "Item 2",
        qty: 5
      }]
    },
    {
      id: 48769,
      thingy: "APPR",
      number: "77733337",
      status: "ENTERED",
      subgridData: [{
        num: 3,
        item: "Item 3",
        qty: 5
      }, {
        num: 2,
        item: "Item 2",
        qty: 10
      }]
    }],
    mmddyyyy = "",
    $grid = $("#output");
  /*********************************************************************/

  $grid.jqGrid({
    url: "/echo/json/",
    mtype: "POST",
    datatype: "json",
    postData: {
      json: JSON.stringify(jsonData)
    },
    colNames: ['Inv No', 'Thingy', 'Number', 'Status'],
    colModel: [{
      name: 'id',
      width: 60,
      sorttype: "int",
      key: true
    }, {
      name: 'thingy',
      width: 90
    }, {
      name: 'number',
      width: 80,
      formatter: "integer"
    }, {
      name: 'status',
      width: 80
    }],
    loadonce: true,
    additionalProperties: ["subgridData"],
    autoencode: true,
    pager: true,
    caption: "Stack Overflow Subgrid Example",
    subGrid: true,
    /*subGridOptions: {
      plusicon: "ui-icon-triangle-1-e",
      minusicon: "ui-icon-triangle-1-s",
      openicon: "ui-icon-arrowreturn-1-e"
    },*/
    iconSet: "fontAwesome",
    shrinkToFit: false,
    subGridRowExpanded: function(subgridDivId, rowid) {
      var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
          subgridData = $(this).jqGrid("getLocalRow", rowid).subgridData;

      $("#" + subgridDivId).append($subgrid);
      $subgrid.jqGrid({
        data: subgridData,
        colNames: ['No', 'Item', 'Qty'],
        colModel: [{
          name: "num",
          width: 80,
          key: true
        }, {
          name: "item",
          width: 130
        }, {
          name: "qty",
          width: 70,
          align: "right"
        }],
        rowNum: 20,
        idPrefix: "s_" + rowid + "_",
        pager: true,
        iconSet: "fontAwesome",
        autowidth: true,
        autoencode: true,
        sortname: "num"
      }).jqGrid('navGrid', {
        edit: false,
        add: false,
        del: false
      });
    }
  }).jqGrid('filterToolbar', {
    stringResult: true,
    searchOnEnter: false,
    defaultSearch: "cn"
  });

  $(window).on("resize", function() {
    var newWidth = $grid.closest(".ui-jqgrid").parent().width();
    $grid.jqGrid("setGridWidth", newWidth, true);
  }).triggerHandler("resize");
});