title: jqGrid with subgrid grouping issue; Subgrid is displayed even when groups are collapsed
body: <p>I'm using free-jqgrid. i have a nested jqgrid inside another jqgrid (i.e subgrid) with multi-select. I have grouped the parent grid and the grouping works fine. However, when i set the groupCollapse: true, the subgrids remain expanded. Please see the code i have attached and let me know whats missing.
       <a href="https://i.stack.imgur.com/8VRRx.jpg" rel="nofollow noreferrer">expanded view</a></p>
  
  <p><a href="https://i.stack.imgur.com/MrtKa.jpg" rel="nofollow noreferrer">group collapsed but subgrid still shows</a></p>
  
  <h2>Function to load parent grid (with grouping)</h2>
  
  <pre><code>function LoadActivities() {
  if (typeof (showRPMLogFrame) != 'undefined' &amp;&amp; showRPMLogFrame.toLowerCase() == true.toString().toLowerCase()) {
      //create custom object to bind to jqgrid
      var arrNewActivities = [];
      var clusterId;
      var cluster;
      var actId;
      var actDesc;
      var isCustomActivity;
  
      $("select[id*='drpCluster'] option:not(:first)").each(function () {
          clusterId = $(this).val();
          cluster = $(this).text();
          GetSelectedClusterId($(this).text());
          var arrActivities = [];
          //get the json data for activities
          $.ajax
             ({
                 type: "POST",
                 url: 'url',
                 cache: false,
                 async: false,
                 data: '{"appealId" : "' + appealId + '", "projectId" :"' + (projectId == "" ? "0" : projectId) + '", "clusterId" : "' + clusterId + '", "rpmClusterId" : "' + selectedClusterId + '"}',
                 dataType: 'json',
                 contentType: "application/json; charset=utf-8",
                 success: function (arr, status) {
                     arrActivities = arr;
                     for (i = 0; i &lt; arrActivities.d.length; i++) {
                         actId = arrActivities.d[i].id;
                         actDesc = arrActivities.d[i].description;
                         arrNewActivities.push({
                             "clusterId": clusterId,
                             "cluster": cluster,
                             "id": actId,
                             "description": actDesc,
                             "isCustomActivity": false,
                             "isSaved": false
                         });
                     }
                 },
                 error: function (request, status, error) {
                     alert('Error in fetching RPM cluster mapped to OPS cluster : ' + cluster + '/n ' + error);
                     return false;
                 }
             });
      });
  
      //gets the activities from database
      $.ajax({
          type: "POST",
          url: 'database webmethod url',
          cache: false,
          async: false,
          data: '{"projectId" :"' + (projectId == "" ? "0" : projectId) + '"}',
          dataType: 'json',
          contentType: "application/json; charset=utf-8",
          success: function (arr, status) {
  
              for (i = 0; i &lt; arr.d.length; i++) {
                  for (j = 0; j &lt; arrNewActivities.length; j++) {
                      if (arr.d[i].id == arrNewActivities[j].id) {
                          arrNewActivities[j].isCustomActivity = arr.d[i].IsCustomActivity;
                          arrNewActivities[j].isSaved = arr.d[i].IsSaved;
                      }
                  }
              }
          },
          error: function (request, status, error) {
              alert('Error in loading saved activities for : ' + $(this).text() + '/n ' + error);
              return false;
          }
      });
  
      $("input[type='hidden'][id*='hdnSelectedActivities']").val(JSON.stringify(arrNewActivities));
  
      $("#tblGrid").jqGrid('GridUnload');
  
      "use strict";
      $("#tblGrid").jqGrid({
          mtype: "GET",
          datatype: "local",
          data: arrNewActivities,
          colModel: [
              { label: "Activity Id", name: "id", key: true, hidden: true },
              { label: "Cluster Id", name: "clusterId", hidden: true },
              { label: "Cluster", name: "cluster", hidden:true, width: 50, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal !important;"' } },
              {
                  label: "Activity description", name: "description", required: true, editable: true, wrap: true, edittype: 'textarea', editoptions: { size: 300, maxlength: 2000 },
                  cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal !important;"' }
              }
          ],
          multiselect: true,
          width: 700,
          shrinktofit: false,
          wrap: true,
          loadtext: "Loading...",
          emptyrecords: "No activities found.",
          //editurl: OPSServicePath + "/SaveActivity",
          onSelectRow: function (id) {
              SaveGrid();
          },
          subGrid: true, // set the subGrid property to true to show expand buttons for each row
          subgridtype: 'local', // set the subgrid type to json
          subGridRowExpanded: ShowChildGrid,
          // description of the subgrid model
          subGridModel: [{
              name: ["IndicatorId", "IndicatorTitle", "Cluster Target", "Project Target"],
              //width: [50, 500, 200],
              align: ["left", "left", "right", "right"],
              params: false
          }],
          pager: "#jqGridPager",
          viewrecords: false,
          pgtext: "",
          pgbuttons: false,
          pginput: false,
          gridComplete: function () {
              //hide select all checkbox in main grid
              $("#cb_tblGrid").hide();
              var rowIds = $("#tblGrid").getDataIDs();
              $.each(rowIds, function (index, rowId) {
                  var arrActivities = $("#tblGrid").jqGrid("getGridParam", "data");
                  var activity = $.grep(arrActivities, function (v) {
                      if (v.id == rowId) {
                          return v;
                      }
                  });
                  //expand activities that were saved in database
                  if (activity[0].isSaved == true) {
                      $("#tblGrid").expandSubGridRow(rowId);
                      $("#tblGrid").setSelection(rowId, true);
                  }
  
              });
          },
          grouping: true,
          groupingView: {
              groupField: ["cluster"],
              groupColumnShow: [false],
              groupText: ["&lt;b&gt;{0}&lt;/b&gt;"],
              groupOrder: ["asc"],
              groupSummary: [false],
              groupSummaryPos: ['header'],
              groupCollapse: true
          }
      });
  
      $('#tblGrid').inlineNav('#jqGridPager',
          // the buttons to appear on the toolbar of the grid
          {
              view: false,
              edit: false,
              add: false,
              del: false,
              save: false,
              savetext: 'Save activity',
              cancel: true,
              editParams: {
                  keys: true,
              },
              addParams: {
                  keys: true
              },
  
          });
  
      //hide select all checkbox in main grid
      $("#cb_tblGrid").hide();
  }
  </code></pre>
  
  <p>}</p>
  
  <h2>Function to load subgrid</h2>
  
  <pre><code>function ShowChildGrid(parentRowID, parentRowKey) {
  var arrIndicators = [];
  
  //get the json data for activities
  $.ajax
     ({
         type: "POST",
         url: 'child grid data api url',
         data: '{"projectId" : "' + (projectId == "" ? "0" : projectId) + '", "activityId" : "' + parentRowKey + '"}',
         dataType: 'json',
         contentType: "application/json; charset=utf-8",
         async: false,
         cache: false,
         success: function (arr, status) {
             if (typeof (arr) != 'undefined' &amp;&amp; arr.d.length &gt; 0) {
                 for (i = 0; i &lt;= arr.d.length - 1; i++) {
                     arrIndicators.push({
                         "IndicatorId": arr.d[i].IndicatorId,
                         "IndicatorTitle": arr.d[i].IndicatorTitle,
                         "Target": arr.d[i].Target,
                         "ProjectTarget": arr.d[i].ProjectTarget,
                         "IsCustomIndicator": arr.d[i].IsCustomIndicator,
                         "IsSaved": arr.d[i].IsSaved
                     });
                 }
             }
         },
         error: function (request, status, error) {
             alert('Error in fetching RPM indicators mapped to activity : ');
             return false;
         }
     });
  
  var childGridID = parentRowID + "_table";
  var childGridPagerID = parentRowID + "_pager";
  
  // send the parent row primary key to the server so that we know which grid to show
  var childGridURL = parentRowKey + ".json";
  
  // add a table and pager HTML elements to the parent grid row - we will render the child grid here
  $('#' + parentRowID).append('&lt;table id=' + childGridID + '&gt;&lt;/table&gt;&lt;div id=' + childGridPagerID + ' class=scroll&gt;&lt;/div&gt;');
  
  $("#" + childGridID).jqGrid({
      //url: childGridURL,
      mtype: "GET",
      datatype: "local",
      data: arrIndicators,
      page: 1,
      multiselect: true,
      multiboxonly: true,
      colModel: [
          { label: 'Indicator ID', name: 'IndicatorId', key: true, hidden: true },
          { label: 'Indicator Title', name: 'IndicatorTitle', shrinkToFit: true, width: 300, editable: true, editrules: { required: true }, wrap: true, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal !important;"' } },
          { label: 'Cluster Target', name: 'Target', editable: false, shrinkToFit: true, width: 100, editrules: { required: true }, wrap: true },
          {
              label: 'Project Target', name: 'ProjectTarget', editable: true, shrinkToFit: true, width: 100, editrules: { required: true }, wrap: true, formatter: function (cellValue, option) {
                  return '&lt;input type="text" size="7" name="txtProjectTarget" onblur="CheckInput(this.id);" id="txtProjectTarget_' + option.rowId + '" /&gt;';
              }
          }
      ],
      onSelectRow: function (id) {
          SaveGrid();
      },
      loadonce: true,
      autowidth: true,
      loadtext: "Loading indicators...",
      emptyrecords: "No indicators found.",
      shrinktofit: true,
      height: '100%',
      pager: "#" + childGridPagerID,
      viewrecords: false,
      pgtext: "",
      pgbuttons: false,
      pginput: false,
      beforeSelectRow: function (rowId, e) {
          return $(e.target).is("input:checkbox");
      },
      gridComplete: function () {
          //hide select all checkbox in subgrids
          $("input[type='checkbox'][id*='cb_tblGrid_']").hide();
          var rowIds = $("#" + childGridID).getDataIDs();
          $.each(rowIds, function (i, rowId) {
              var arrIndicators = $("#" + childGridID).jqGrid("getGridParam", "data");
              var indicator = $.grep(arrIndicators, function (v) {
                  if (v.IndicatorId == rowId) {
                      return v;
                  }
              });
              if (indicator[0].IsSaved == true) {
                  $("#" + childGridID).setSelection(rowId, true);
                  $("#txtProjectTarget_" + indicator[0].IndicatorId).val(indicator[0].ProjectTarget)
              }
  
          });
      }
  });
  
  $("#" + childGridID).inlineNav("#" + childGridPagerID,
     {
         view: false,
         edit: false,
         add: false,
         del: false,
         cancel: false,
         save: false
  
     });
  
  //hide select all checkbox in subgrids
  $("input[type='checkbox'][id*='cb_tblGrid_']").hide();
  
  
  //get parent row ID only
  var parentRow = parentRowID.toString().split("_", 10)[1].toString();
  
  //bind click event to checkboxes inside subgrid
  $("#" + childGridID).find($("input[type='checkbox'][id*='jqg_tblGrid_" + parentRow + "_']")).each(function () {
      $(this).on("click", "", function () {
          //alert($(this).prop("id"));
  
          //check/uncheck the parent row checkbox if child grid checkboxes are checked/unchecked
          var parentTr = $("table#tblGrid tr#" + parentRow);
          if (typeof (parentTr) != "undefined") {
              var isChecked = $(this).prop("checked");
              //if current checkbox is checked, check parent row checkbox; if current checkbox is unchecked, do nothing to parent row checkbox 
              if (isChecked) {
                  parentTr.find($("input[type='checkbox'][id='jqg_tblGrid_" + parentRow + "']")).prop("checked", isChecked);
                  var selRowIds = $("#tblGrid").jqGrid("getGridParam", "selarrrow");
                  if ($.inArray(parentRowKey, selRowIds) == -1 || selRowIds.length == 0) {
                      $("#tblGrid").setSelection(parentRowKey, true);
                  }
              }
          }
      });
  });
  </code></pre>
  
  <p>}</p>