title: jqGrid issue grouping - Duplicate rows get appended every time sort is changed
body: <p>I'm using jqGrid and have added grouping to one of my grids.  Everything worked fine when grouping was not enabled, however once I added:</p>
  
  <pre><code>grouping: true,
  groupingView: { groupField: ['ProjName'], groupDataSorted: true }
  </code></pre>
  
  <p>I started running into some strange behavior.  When I click one of the column headers to change the sort order, instead of clearing the existing rows in the grid, new rows are appended to the end of the grid with all the groups being duplicated.</p>
  
  <p>In other words, when the page first draws, I see this:</p>
  
  <p><img src="https://i.stack.imgur.com/fDyaU.png" alt="enter image description here"></p>
  
  <p>Then, I click on a sort header and I get this:</p>
  
  <p><img src="https://i.stack.imgur.com/Sv0CL.png" alt="enter image description here"></p>
  
  <p>My initialization code is as follows:</p>
  
  <pre><code>var gridMyTasks = $('#gridMyTasks').jqGrid({
      jsonReader: { root: 'rows', repeatitems: false, id: 'ID' },
      datatype: 'json',
      colNames: ['Task ID', 'Task Name', 'Project Name', 'Task Stage', 'Doc Type', 'Due Date'],
      colModel: [
          { name: 'ShortCode', width: 70, jsonmap: 'ShortCode' },
          { name: 'TaskName', width: 200, jsonmap: 'TaskName', formatter: 'fmtTaskName' },
          { name: 'ProjName', width: 200, jsonmap: 'ProjName', formatter: 'fmtName' },
          { name: 'TaskStage', width: 100, jsonmap: 'TaskStage' },
          { name: 'DocType', width: 130, jsonmap: 'DocType' },
          { name: 'DueDate', width: 70, jsonmap: 'DueDate' }
      ],
      rowNum: 0,
      height: 'auto',
      autowidth: true,
      forceFit: true,
      multiselect: false,
      caption: '',
      altclass: 'zebra',
      altRows: true,
      hoverrows: false,
      gridview: true,
      grouping: true,
      groupingView: { groupField: ['ProjName'], groupDataSorted: true }
  });
  </code></pre>
  
  <p>My loader code (which is called again on sort) looks like this:</p>
  
  <pre><code>loader(limit, curSort, curDir, function (results) {
      grid[0].addJSONData({ rows: results });
      $('body').hideLoading();
      link.html(expanded ? 'Show less...' : 'Show all...');
  },
  null);
  </code></pre>
  
  <p>(<code>loader</code> is an AJAX call to the server) - I'm thinking maybe I need to do something to clear out all the existing rows?  However, why did it work perfectly fine before I had grouping enabled?</p>