title: Jqgrid adding new blank row in inlineNav style
body: <p>I would like to create <code>Add</code> <code>Edit</code> <code>Save</code>   And <code>Delete</code> button below my JqGrid.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  jQuery(document).ready(function () {
      var lastSel = 0;
      jQuery("#list").jqGrid({
          url: '/SpeakerJqgrid/GridData/',
          editurl: "/SpeakerJqgrid/MyEdit/",
          datatype: 'json',
          mtype: 'GET',
          colNames: ['SpeakerID', 'SpeakerName'],
          colModel: [
                        { name: 'SpeakerID', index: 'SpeakerID', width: 40, align: 'left', editable: true, edittype: "text", editoptions: { size: "35", maxlength: "50"} },
                        { name: 'SpeakerName', index: 'SpeakerName', width: 200, align: 'left', editable: true, edittype: "text", editoptions: { size: "35", maxlength: "50"} }
                   ],
          onSelectRow: function (id) {
              if (id &amp;&amp; id !== lastSel) {
                  jQuery('#list').restoreRow(lastSel);
                  lastSel = id;
              }
              jQuery('#list').editRow(id, true);
          },
          loadComplete: function () {
              //alert("Load Complete");
          },
          addRowData: function (rowid, rdata, pos, src) {
              alert("addRowData");
              if (pos === 'afterSelected' || pos === 'beforeSelected') {
                  if (typeof src === 'undefined' &amp;&amp; this[0].p.selrow !== null) {
                      src = this[0].p.selrow;
                      pos = (pos === "afterSelected") ? 'after' : 'before';
                  } else {
                      pos = (pos === "afterSelected") ? 'last' : 'first';
                  }
              }
              return oldAddRowData.call(this, rowid, rdata, pos, src);
          },
  
          pager: jQuery('#pager'),
          rowNum: 10,
          rowList: [5, 10, 20, 50],
          sortname: 'SpeakerName',
          sortorder: "desc",
          viewrecords: true,            
          autowidth: true,
          autoheight: true,
          imgpath: '/scripts/themes/black-tie/images',
          caption: 'My first grid'
      })
      $("#list").jqGrid('navGrid', '#pager', {edit:false,add:false,del:false,refresh:false,search:false});
      $("#list").jqGrid('inlineNav', '#pager', {
          edittext: "Edit",
          addtext: "Add",
          savetext: "Save",
          canceltext: "Cancel",
          addParams: { position: "afterSelected" }
      });
      }); 
  &lt;/script&gt;
  </code></pre>
  
  <p>By using upper code, My Grid show me buttons called <code>Add</code> <code>Edit</code> <code>Save</code>   And <code>Delete</code>.<br>
  But what problem is when I click those buttons, nothing happen.</p>
  
  <p>I mean that I would like to create event which will fire when I click Add or Edit button.</p>
  
  <p>Most of the examples I found is about adding new rows by using <a href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing" rel="nofollow"> modal form</a>. But what I have to use is inline grid row adding style.</p>
  
  <p>Your suggestions will be appreciated.</p>