title: JqGrid Basic Grid example error when saving a new row
body: <p>I am using the Basic Grid example from <a href="http://www.trirand.com/blog/jqgrid/jqgrid.html#t24" rel="nofollow noreferrer">jqGrid Demos</a>:</p>
  <pre><code>jQuery(&quot;#rowed1&quot;).jqGrid(
          {
              url : 'clientArray',
              datatype : &quot;local&quot;,
              colNames : [ 'Inv No', 'Date', 'Client', 'Amount', 'Tax',
                      'Total', 'Notes' ],
              colModel : [ {
                  name : 'id',
                  index : 'id',
                  width : 55,
                  editable : true,
                  key: true
              }, {
                  name : 'invdate',
                  index : 'invdate',
                  width : 90,
                  editable : true
              }, {
                  name : 'name',
                  index : 'name',
                  width : 100,
                  editable : true
              }, {
                  name : 'amount',
                  index : 'amount',
                  width : 80,
                  align : &quot;right&quot;,
                  editable : true
              }, {
                  name : 'tax',
                  index : 'tax',
                  width : 80,
                  align : &quot;right&quot;,
                  editable : true
              }, {
                  name : 'total',
                  index : 'total',
                  width : 80,
                  align : &quot;right&quot;,
                  editable : true
              }, {
                  name : 'note',
                  index : 'note',
                  width : 150,
                  sortable : false,
                  editable : true
              } ],
              rowNum : 10,
              rowList : [ 10, 20, 30 ],
              pager : '#prowed1',
              sortname : 'id',
              viewrecords : true,
              sortorder : &quot;desc&quot;,
              editurl : &quot;clientArray&quot;,
              caption : &quot;Basic Example&quot;
          });
  jQuery(&quot;#rowed1&quot;).jqGrid('navGrid', &quot;#prowed1&quot;, {
      edit : false,
      add : false,
      del : false
  });
  </code></pre>
  <p>The following events to handle the user clicks on edit, save, and cancel buttons:</p>
  <pre><code>jQuery(&quot;#ed1&quot;).click(function() {
      var id = jQuery('#rowed1').jqGrid('getGridParam','selrow');
      jQuery(&quot;#rowed1&quot;).jqGrid('editRow', id);
      this.disabled = 'true';
      jQuery(&quot;#sved1,#cned1&quot;).attr(&quot;disabled&quot;, false);
  });
  jQuery(&quot;#sved1&quot;).click(function() {
  
      var rowid = jQuery('#rowed1').jqGrid('getGridParam','selrow');
      alert('id: ' + rowid);
      jQuery(&quot;#rowed1&quot;).jqGrid('saveRow', rowid , false );
      jQuery(&quot;#sved1,#cned1&quot;).attr(&quot;disabled&quot;, true);
      jQuery(&quot;#ed1&quot;).attr(&quot;disabled&quot;, false);
      jQuery(&quot;#aded1&quot;).attr(&quot;disabled&quot;, false);
      
  });
  jQuery(&quot;#cned1&quot;).click(function() {
      var id = jQuery('#rowed1').jqGrid('getGridParam','selrow');
      jQuery(&quot;#rowed1&quot;).jqGrid('restoreRow', id);
      jQuery(&quot;#sved1,#cned1&quot;).attr(&quot;disabled&quot;, true);
      jQuery(&quot;#ed1&quot;).attr(&quot;disabled&quot;, false);
      jQuery(&quot;#aded1&quot;).attr(&quot;disabled&quot;, false);
  });
  
  jQuery(&quot;#aded1&quot;).click(function() {
      jQuery(&quot;#rowed1&quot;).jqGrid('addRow',  'new');
      this.disabled = 'true';
      jQuery(&quot;#sved1,#cned1&quot;).attr(&quot;disabled&quot;, false);
  });
  </code></pre>
  <p>And the html of the buttons:</p>
  <pre><code> &lt;input type=&quot;BUTTON&quot; id=&quot;aded1&quot;  value=&quot;Add Row&quot; /&gt;
   &lt;input type=&quot;BUTTON&quot; id=&quot;ed1&quot; value=&quot;Edit row 3&quot; /&gt; 
   &lt;input type=&quot;BUTTON&quot; id=&quot;sved1&quot; disabled='true' value=&quot;Save row 3&quot; /&gt; 
   &lt;input type=&quot;BUTTON&quot; id=&quot;cned1&quot; disabled='true' value=&quot;Cancel Save&quot; /&gt;
  </code></pre>
  <p>But the grid is not working properly because:</p>
  <ul>
  <li>After saving a new row it keeps selected and I can't select others.</li>
  <li>When I cancel the editing of a row, it deletes a few other rows.</li>
  <li>When I click for second time
  the add new row button, google chrome debugger console displays the error: <strong>Uncaught TypeError: Cannot read property 'name' of undefined</strong></li>
  </ul>
  <p>I am almost sure that it has something to do with the new row id, but after 2 days of trying I  would appreciate a little help, thanks in advance</p>