title: something similar to treegrid in jqGrid
body: <p>I want to have a tree expanded only when it is required. </p>
  
  <p>eg: <code>OS Type</code> is a leaf node it does not expand, but <code>Memory</code> has sub categories so it expands</p>
  
  <p>So what should I use to achieve something similar, since in jqGrid subgrid every row has an expansion, which I don't want here</p>
  
  <p><img src="https://i.stack.imgur.com/cJz6V.png" alt="enter image description here"></p>
  
  <p>My code (took from your example)</p>
  
  <pre><code>$('#compareContent').empty();
      $('&lt;div id="compareParentDiv" width="100%"&gt;'+
        '&lt;table id="list3" cellspacing="0" cellpadding="0"&gt;&lt;/table&gt;'+
              '&lt;div id="gridpager3"&gt;&lt;/div&gt;&lt;/div&gt;')
      .appendTo('#compareContent');
  
      var grid2 = $("#list3");
      grid2.jqGrid({
              datastr: myJson,
              datatype: "jsonstring",
              colNames: ['KeyName', 'Config1', 'Config2'],
              colModel: [
                  { name: 'elementName', index: 'elementName', key: true, width: 70 },
                  { name: 'attribute[0].firstValue', index: 'attribute[0].firstValue', width: 90},
                  { name: 'attribute.secondValue', index: 'attribute.secondValue', width: 100 }                   
              ],
              pager: '#gridpager3',
              rowNum: 10,
              viewrecords: true,
              jsonReader: {
                  repeatitems: false,
                  root: "response"
              },
              //rownumbers: true,
              //multiselect: true,
              height: "320",
              autowidth:true,
              subGrid: true,
              subGridRowExpanded: function(subgrid_id, row_id) {
                  var subgrid_table_id, pager_id, iData = -1;
                  subgrid_table_id = subgrid_id+"_t";
                  pager_id = "p_"+subgrid_table_id;
                  $("#"+subgrid_id).html("&lt;table id='"+subgrid_table_id+"' style='overflow-y:auto' class='scroll'&gt;&lt;/table&gt;&lt;div id='"+pager_id+"' class='scroll'&gt;&lt;/div&gt;");
  
                  $.each(myJSONObject.list,function(i,item){
                      if(item.id === row_id) {
                          iData = i;
                          return false;
                      }
                  });
                  if (iData == -1) {
                      return; // no data for the subgrid
                  }
                  jQuery("#"+subgrid_table_id).jqGrid({
                      datastr : myJSONObject.list[iData],
                      datatype: 'jsonstring',
                      colNames: ['Name','Value1','Value2'],
                      colModel: [
                          {name:"name",index:"name",width:90},
                          {name:"firstValue",index:"firstValue",width:100},
                          {name:"secondValue",index:"secondValue",width:100}
                      ],
                      rowNum:20,
                      pager: pager_id,
                      sortname: 'name',
                      sortorder: "asc",
                      height: 'auto',
                      autowidth:true,
                      jsonReader: {
                          repeatitems: false,
                          //page: function() { return 1; },
                          root: "attribute"
                      }
                  });
  
                  jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false});
                  /*var html = '&lt;span&gt;Some &lt;b&gt;HTML&lt;/b&gt; text which corresponds the row with id=&lt;i&gt;'+row_id+'&lt;/i&gt;&lt;/span&gt;&lt;br/&gt;'+
                             '&lt;a href="http://stackoverflow.com/users/315935/oleg"&gt;'+
                             '&lt;img src="http://stackoverflow.com/users/flair/315935.png" width="208" height="58" '+
                             'alt="profile for Oleg at Stack Overflow, Q&amp;A for professional and enthusiast programmers"'+
                             ' title="profile for Oleg at Stack Overflow, Q&amp;A for professional and enthusiast programmers"&gt;'+
                             '&lt;/a&gt;';
                  $("#" + subgrid_id).append(html);*/
              },
              loadComplete: function() {
                  var pos=0;
                  var envPos=0;
                  var envHalt=0;
                  $.each(myJson.response,function(i,val){
                      if(val.subCategory==="envVariable"&amp;&amp;envHalt===0)
                      {
                          console.info(val.subCategory+", "+envPos);
                          envHalt++;
                          envPos=pos;
                      }
                      pos++;
                  });
                  console.info(envPos);
  
                  var grid = $("#list3");
                  var subGridCells = $("td.sgcollapsed",grid[0]);
                  $.each(subGridCells,function(i,value){
                      if (i==envPos) {
                      }
                      else
                      {
                          $(value).unbind('click').html('');                      
                      }
  
                  });
              }
          });
      grid2.jqGrid('navGrid', '#gridpager3', { add: false, edit: false, del: false, search: false, refresh: true });
  </code></pre>
  
  <p>My JSON </p>
  
  <pre><code>var myJson={
          "response": [
                               {
                                  "id":"m1",  
                                  "subCategory":"system",
                                   "elementName": "osname",
                                   "attribute": [
                                       {
                                          "id":"m1_s1",
                                           "name": "osname",
                                           "firstValue": "Linux\n",
                                           "secondValue": "HP-US1000\n"
                                       }
                                   ],
                                   "isEqual": false,
                                   "isPrasentinXml1": false,
                                   "isPrasentinXml2": false
                               },
                               {
                                  "id":"m2",
                                      "subCategory":"system",
                                   "elementName": "hostname",
                                   "attribute": [
                                       {
                                          "id":"m2_s1",
                                           "name": "hostname",
                                           "firstValue": "estilo\n",
                                           "secondValue": "benz\n"
                                       }
                                   ],
                                   "isEqual": false,
                                   "isPrasentinXml1": false,
                                   "isPrasentinXml2": false
                               },
                               {
                                  "id":"m3",
                                  "subCategory":"envVariable",
                                   "elementName": "SSASERVERLOGSDIR",
                                   "attribute": [
                                       {
                                          "id":"m3_s1",
                                           "firstValue": "/home/hqusers1/IIR_1152825121_estilo_9.0.1SP2_32/iirlog",
                                           "secondValue": "/home/hqusers1/IIR_1152825121_estilo_9.0.1SP2_32/iirlog"
                                       }
                                   ],
                                   "isEqual": true,
                                   "isPrasentinXml1": false,
                                   "isPrasentinXml2": false
                               },
                               {
                                  "id":"m4",
                                  "subCategory":"envVariable",
                                   "elementName": "SSABIN",
                                   "attribute": [
                                       {
                                          "id":"m4_s1",
                                           "firstValue": "/home/hqusers1/IIR_1152825121_estilo_9.0.1SP2_32/bin",
                                           "secondValue": "/home/hqusers1/IIR_1152825121_estilo_9.0.1SP2_32/bin"
                                       }
                                   ],
                                   "isEqual": true,
                                   "isPrasentinXml1": false,
                                   "isPrasentinXml2": false
                               },
                               {
                                  "id":"m5",
                                  "subCategory":"envVariable",
                                   "elementName": "tusc.tusc-RUN",
                                   "attribute": [
                                       {
                                          "id":"m5_s1",
                                           "name": "information",
                                           "firstValue": "unzip"
                                       },
                                       {
                                          "id":"m5_s2",
                                           "name": "name",
                                           "firstValue": "tusc.tusc-RUN"
                                       },
                                       {
                                          "id":"m5_s3",
                                           "name": "version",
                                           "firstValue": "#"
                                       }
                                   ],
                                   "isEqual": false,
                                   "isPrasentinXml1": true,
                                   "isPrasentinXml2": false
                               }
                           ]
                       },grid2;
  </code></pre>
  
  <p>If <strong>subCategory == envVariable</strong> it should display a <code>+</code> symbol to expand</p>
  
  <p>This is what I came up with till now, also my <code>Config1</code> and <code>Config2</code> columns are not coming
  <img src="https://i.stack.imgur.com/WZZpu.jpg" alt="enter image description here"></p>
  
  <p>In the above image <code>SSASERVERLOGSDIR</code>, <code>SSABIN</code> and <code>tusc.tusc-RUN</code> should come under <code>envVariable</code> based on checking <strong>subCategory==envVariable</strong></p>
  
  <p><code>envVariable</code> will not have any <code>Config1</code> and <code>Config2</code> values</p>
  
  <p><strong>Updated</strong> particular row's color does not change</p>
  
  <pre><code>loadComplete: function() {
              var i, names=this.p.groupingView.sortnames[0], l = names.length;
              for (i=0;i&lt;l;i++) {
                  if (names[i]==='envVariable') {
                      $(this).jqGrid('groupingToggle',this.id+"ghead_"+i);
                  } else {
                      // hide the grouping row
                      $('#'+this.id+"ghead_"+i).hide();
                  }
              }
              var getColumnIndexByName = function(grid, columnName) {
                  var cm = grid.jqGrid('getGridParam','colModel'),i=0,l=cm.length;
                  for (; i&lt;l; i++) {
                      if (cm[i].name===columnName) {
                          return i; // return the index
                      }
                  }
                  return -1;
              };
  
              var iCol = getColumnIndexByName($(this),'isEqual'),
              cRows = this.rows.length, iRow, row, className;
              for (iRow=0; iRow&lt;cRows; iRow++) {
                  row = this.rows[iRow];
                  className = row.className;
                  if ($.inArray('jqgrow', className.split(' ')) &gt; 0) { // $(row).hasClass('jqgrow')
  
                      if(row.cells[iCol].title=="false")   //here i identify isEqual's value
                      {
                          if ($.inArray('myAltRowClass', className.split(' ')) === -1) {
                              row.className = className + ' myAltRowClass';
                          }
                      }
                  }
              }
  
          }
  </code></pre>