jqgrid subgrids how to display json values in subgrid

Question

I want to use jqgrid with subgrids. I have created a jqgrid table. However, I want to display the descriptions and symbols in the subgrid .

I have also included JSOn data and my code snippet and the fiddle demo here

Can I create subgrids from the following JSON data with jqgrid with out having nested JSON data? Is there any example or demo I can refer to?

$(document).ready(function() {
    var jsonData = {
      "Name": "Julie Brown",
      "Account": "C0010",
      "LoanApproved": "12/5/2015",
      "LastActivity": "4/1/2016",
      "PledgedPortfolio": "4012214.00875",
      "MaxApprovedLoanAmt": "2050877.824375",
      "LoanBalance": "1849000",
      "AvailableCredit": "201877.824375",
      "Aging": "3",
      "Brokerage": "My Broker",
      "Contact": "Robert L. Johnson",
      "ContactPhone": "(212) 902-3614",
      "RiskCategory": "Yellow",
      "rows": [{
        "ClientID": "C0010",
        "Symbol": "WEC",
        "Description": "Western Electric Co",
        "ShareQuantity": "20638",
        "SharePrice": "21.12",
        "TotalValue": "435874.56",
        "LTVCategory": "Equities",
        "LTVRatio": "50%",
        "MaxLoanAmt": "217937.28"
      }, {
        "ClientID": "C0010",
        "Symbol": "BBB",
        "Description": "Bins Breakers and Boxes",
        "ShareQuantity": "9623",
        "SharePrice": "74.29125",
        "TotalValue": "714904.69875",
        "LTVCategory": "Equities",
        "LTVRatio": "50%",
        "MaxLoanAmt": "357452.349375"
      }, {
        "ClientID": "C0010",
        "Symbol": "GPSC",
        "Description": "Great Plains Small Cap Stock",
        "ShareQuantity": "49612",
        "SharePrice": "14.24",
        "TotalValue": "706474.88",
        "LTVCategory": "Mutual Funds - Small Cap",
        "LTVRatio": "40%",
        "MaxLoanAmt": "282589.952"
      }]
    },
    mmddyyyy = "";
  /*********************************************************************/


  $("#output").jqGrid({
    url: "/echo/json/",
    mtype: "POST",
    datatype: "json",
    postData: {
          json: JSON.stringify(jsonData)
    },
    colModel: [
      /**    { name: 'ClientID', label:'ClientID',width: 80, key: true },****/
      {
        name: 'Symbol',
        width: 65
      }, {
        name: 'Description',
        width: 165
      }, {
        name: 'ShareQuantity',
        align: 'right',
        width: 85,
        classes: "hidden-xs", labelClasses: "hidden-xs",
        formatter: 'currency',
        formatoptions: {
          prefix: " ",
          suffix: " "
        }
      }, {
        name: 'SharePrice',
        label: 'Share Price',
        align: 'right',
        width: 100,
        classes: "hidden-xs", labelClasses: "hidden-xs",
        template: "number",
        formatoptions: {
          prefix: " $",
          decimalPlaces: 4
        }
      },
      /*{ label: 'Value1', 
                  name: 'Value1', 
                  width: 80, 
                  sorttype: 'number', 
                  formatter: 'number',
                  align: 'right'
              }, */
      {
        name: 'TotalValue',
        label: 'Total Value',
        width: 160,
        sorttype: 'number',
        align: "right",
        formatter: 'currency',
        formatoptions: {
          prefix: " $",
          suffix: " "
        }
      }, {
        name: 'LTVRatio',
        label: 'LTV Ratio',
        width: 70,
        sorttype: 'number',
        align: "right",
        formatter: 'percentage',
        formatoptions: {
          prefix: " ",
          suffix: " "
        }
      }, {
        name: 'LTVCategory',
        label: 'LTV Category',
        classes: "hidden-xs", labelClasses: "hidden-xs",
        width: 120,
        width: 165
      },

      {
        name: 'MaxLoanAmt',
        label: 'MaxLoanAmount',
        width: 165,
        sorttype: 'number',
        align: "right",
        formatter: 'currency',
        formatoptions: {
          prefix: " $",
          suffix: " "
        }
      }

    ],
    additionalProperties: ["Num1"],
    /*beforeProcessing: function (data) {
        var item, i, n = data.length;
        for (i = 0; i < n; i++) {
            item = data[i];
            item.Quantity = parseFloat($.trim(item.Quantity).replace(",", ""));
            item.LTVRatio = parseFloat($.trim(item.LTVRatio *10000).replace(",", ""));
            item.Value = parseFloat($.trim(item.Value).replace(",", ""));
            item.Num1 = parseInt($.trim(item.Num1).replace(",", ""), 10);
            item.Num2 = parseInt($.trim(item.Num2).replace(",", ""), 10);
        }
    }, */
    iconSet: "fontAwesome",
    loadonce: true,
    rownumbers: true,
    cmTemplate: {
      autoResizable: true,
      editable: true
    },
    autoResizing: {
      compact: true
    },
    autowidth: true,
    height: 'auto',
    forceClientSorting: true,
    sortname: "Symbol",
    footerrow: true,
    caption: "<b>Collateral Value</b> <span class='pull-right' style='margin-right:20px;'>Valuation as of: " + mmddyyyy + "</span>",


    loadComplete: function() {
      var $self = $(this),
        sum = $self.jqGrid("getCol", "Price", false, "sum"),
        sum1 = $self.jqGrid("getCol", "MaxLoanAmt", false, "sum");
      //ltvratio =  $self.jqGrid("getCol","LTVRatio:addas", "Aved Loan Amount");
      $self.jqGrid("footerData", "set", {
        LTVCategory: "Max Approved Loan Amount:",
        Price: sum,
        MaxLoanAmt: sum1
      });
    }
  });

  $("#output").jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch : "cn"});


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

Answer 1

If I correctly understand your requirements, it's relatively easy. If you want to display "Symbol" and "Description" in subgrid, then you would like to remove the corresponding columns from the main grid. You use loadonce: true option to fill the local data with the data return from the server. The item, which represent every row of input data, will be filled with columns and the properties from additionalProperties option. Thus you should add

additionalProperties: ["Symbol", "Description"]

after removing "Symbol" and "Description" from the columns.

Now you should add subGrid: true option to create the "subrgid" column with "+" symbol, which allows to open the grid. On opening jqGrid create the div for the subrgid and the callback subGridRowExpanded is responsible to fill the grid with data. One can create subgrid inside of the div, but one can place any HTML fragments in any form. For example

subGridRowExpanded: function (subgridDivId, rowid) {
    var item = $(this).jqGrid("getLocalRow", rowid);
    $("#" + $.jgrid.jqID(subgridDivId)).html("Symbol: <em>" + item.Symbol +
        "</em><br/>Description: <em>" + item.Description + "</em>");
}

The resulting demo https://jsfiddle.net/OlegKi/615qovew/75/ displays the data like on the picture below

You are absolutely free in the design of information displayed in the "subgrid"-div.