title: Treegrid with JSON data in jqgrid
body: <p>I am testing trees in jqgrid, so far I am only able to create something like below</p>
  
  <p><img src="https://i.stack.imgur.com/nChvD.png" alt="enter image description here"></p>
  
  <p>I want to have something like <a href="http://www.trirand.com/blog/jqgrid/jqgrid.html" rel="noreferrer">jqGrid Demo page</a></p>
  
  <p>I came up with the below code, but no idea how should I go about expanding each row in the tree from the given json format</p>
  
  <pre><code>$('&lt;table id="list2" cellspacing="0" cellpadding="0"&gt;&lt;/table&gt;&lt;/div&gt;').appendTo('#topics');
  
  var grid = jQuery("#list2");
  grid.jqGrid({
      datastr:topicjson,
      datatype: "jsonstring",
      height: "auto",
      pager: false,
      loadui: "disable",
      colNames: ["id","Items","url"],
      colModel: [
          {name: "id",width:1,hidden:true, key:true},
          {name: "elementName", width:150, resizable: false},
          {name: "url",width:1,hidden:true}
      ],
      treeGrid: true,
  
      caption: "jqGrid Demos",
      ExpandColumn: "elementName",
      autowidth: true,
      //width: 180,
      rowNum: 200,
      //ExpandColClick: true,
      treeIcons: {leaf:'ui-icon-document-b'},
      jsonReader: {
          repeatitems: false,
          root: "response"
      }
  });
  </code></pre>
  
  <p>Json format</p>
  
  <pre><code>var topicjson={
      "response": [
                   {
                       "id": "1",
                       "elementName": "Grouping",
                       "sub": [
                           {
                               "subelementName": "Simple Grouping"
                           },
                           {
                               "subelementName": "May be some other grouping"
                           }
                       ]
                   },
                   {
                       "id": "2",
                       "elementName": "CustomFormater",
                       "sub": [
                           {
                               "subelementName": "Image Formatter"
                           },
                           {
                               "subelementName": "Anchor Formatter"
                           }
                       ]
                   }
               ]
           };
  </code></pre>