title: Adding a custom button in row in jqGrid?
body: <p>I want to make a simple table that contains a custom button in a row.  When the button is pushed, I want to pop up an 'alert' box.   I have read some posts on this, for example:
  <a href="https://stackoverflow.com/questions/1384685/how-do-you-add-scripts-to-custom-buttons-on-rows-in-jqgrid">this post</a>
  and
  <a href="https://stackoverflow.com/questions/1299479/adding-a-button-to-a-row-in-jqgrid">this other post</a>, and I don't understand why my code is not working.  The buttons are drawn, but pushing them has no effect.</p>
  
  <p>I have three attempts described here.</p>
  
  <p>Version 1.   The button click never fires:</p>
  
  <pre><code>  $(document).ready(function(){
        jQuery("#simpletable").jqGrid({
           datatype: "local",
          colNames:['A','B','Status'],
          colModel:[
          {name:'A',index:'A'},
          {name:'B',index:'B'},
          {name:'status',index:status}
      ],
          data:[ 
          {'A':2,'B':100,'status':"&lt;button  onclick=\"jQuery('#simpletable').saveRow('1', function(){alert('you are in')});\" &gt;in&lt;/button&gt;"},
          {'A':1,'B':200,'status':"&lt;button onclick=\"jQuery('#simpletable').saveRow('2', function(){alert('you are in')});\" &gt;in&lt;/button&gt;"},
          ],
          caption: "Demo of Custom Clickable Button in Row",
          viewrecords:true,
          editurl:'clientArray',
      });
  
     });
  </code></pre>
  
  <p>Html Code:</p>
  
  <pre><code>&lt;table id="simpletable"&gt;&lt;/table&gt;
  </code></pre>
  
  <p>EDIT 8/2/12 --  I've learned some things since my original post and here I describe two more attempts.</p>
  
  <p>Version 2:  I use onCellSelect.   This works, but it would not allow me to put more than one button in a cell.    Additionally, I made the code nicer by using the format option suggested by one of the comments to this post.</p>
  
  <pre><code>function status_button_maker_v2(cellvalue, options, rowObject){
      return "&lt;button class=\"ver2_statusbutton\"&gt;"+cellvalue+"&lt;/button&gt;"
  };
  
  jQuery("#simpletablev2").jqGrid({
      datatype: "local",
      colNames:['A','B','Status'],
      colModel:[
      {name:'A',index:'A'},
      {name:'B',index:'B'},
      {name:'status',index:status,editable:true,formatter:status_button_maker_v2}
      ],
          data:[ 
      {'A':2,'B':100,'status':"In"},
      {'A':1,'B':200,'status':"Out"}
          ],
  
      onCellSelect:function(rowid,icol,cellcontent,e){
      if (icol==2){
  
          alert('My value in column A is: '+$("#simpletablev2").getRowData(rowid)['A']);
      }else{
          return true;
      }
      },
  
      caption: "Demo of Custom Clickable Button in Row, ver 2",
      viewrecords:true,
  });  //end simpletablev2
  </code></pre>
  
  <p>Markup:</p>
  
  <pre><code>&lt;style&gt;.ver2_statusbutton { color:blue;} &lt;/style&gt;
  &lt;h3&gt;simple table, ver 2:&lt;/h3&gt;
  &lt;table id="simpletablev2"&gt;&lt;/table&gt;
  </code></pre>
  
  <p>Version 3:   I tried to use the solution to <a href="https://stackoverflow.com/questions/2774018/call-a-function-from-a-button-that-is-created-during-jqgrids-gridcomplete-event?answertab=active#tab-top">w4ik's post</a>, using ".on" instead of deprecated ".live".   This causes the button click to fire, but I don't know how to retrieve the rowid.  w4ik also struggled with this, and he posted that he worked it out, but not how he did it.   I can get the last row selected, but this will always refer to the previous row selected because the button is taking priority.</p>
  
  <p>I would prefer this solution if I could get it to work.</p>
  
  <pre><code>jQuery("#simpletablev3").jqGrid({
      datatype: "local",
      colNames:['A','B','Status'],
      colModel:[
      {name:'A',index:'A'},
      {name:'B',index:'B'},
      {name:'status',index:status,editable:true,formatter:status_button_maker_v3}
      ],
          data:[ 
      {'A':2,'B':100,'status':"In"},
      {'A':1,'B':200,'status':"Out"}
          ],
      caption: "Demo of Custom Clickable Button in Row, ver 3",
      viewrecords:true,
      onSelectRow: function(){},
      gridComplete: function(){}
  });  //end simpletablev3
  
  
  $(".ver3_statusbutton").on(
      {
      click: function(){
          //how to get the row id?  the following does not work
          //var rowid = $("#simpletablev3").attr('rowid'); 
          //
          //it also does not work to get the selected row
          //   this is always one click behind:
          //$("#simpletablev3").trigger("reloadGrid");
          rowid = $("#simpletablev3").getGridParam('selrow');
          alert("button pushed! rowid = "+rowid);
      }
      });
  </code></pre>
  
  <p>Markup:</p>
  
  <pre><code> &lt;style&gt;.ver3_statusbutton {    color:red;} &lt;/style&gt;
   &lt;h3&gt;simple table, ver 3:&lt;/h3&gt;
   &lt;table id="simpletablev3"&gt;&lt;/table&gt;
  </code></pre>
  
  <p>In summary, I'm struggling with the issue of getting my button to be pushed <em>at the right time</em>.  In version 1, the row gets selected and the button never gets pushed.  Version 2 does not use the "button" at all -- It just handles the cell click.  Verion 3 gets the button click before the row select (wrong order).</p>
  
  <p>Any help would be appreciated!</p>