JQGRID - Delete the row with button
<p>How to delete row in JQGrid with button</p>

<p><a href="http://jsfiddle.net/chandelyt/w4oudhh4/3/" rel="nofollow">http://jsfiddle.net/chandelyt/w4oudhh4/3/</a></p>

<p><strong>HTML</strong></p>

<pre><code>&lt;table id="list2"&gt;
    &lt;tr&gt;
        &lt;td /&gt;
    &lt;/tr&gt;
&lt;/table&gt;
&lt;div id="jQGridDemoPager"&gt;&lt;/div&gt;
</code></pre>

<p><strong>JQuery</strong></p>

<pre><code>var $j = $.noConflict(true);
var mydata = [
  { "UserName": "8125579231", "RoleId": 1, "Name": "John", "RoleName": "Administrator" },
  { "UserName": "9676078986", "RoleId": 1, "Name": "Mia", "RoleName": "Administrator" },
  { "UserName": "9703804807", "RoleId": 1, "Name": "Shan", "RoleName": "Administrator" },
  { "UserName": "9177458358", "RoleId": 1, "Name": "Tim", "RoleName": "Administrator" },
  { "UserName": "7760699118", "RoleId": 2, "Name": "Harry", "RoleName": "Sales" }
];


$j('#list2').jqGrid({
  caption: "Employee Details",
  data: mydata,
  datatype: "local",
  colNames: ["UserName", "RoleId", "Name", "RoleName","Delete"],
  colModel: [
    { name: "UserName", index: 'UserName', width: 150 },
    { name: 'RoleId', index: "RoleId", width: 150 },
    { name: "Name", index: "Name", width: 150 },
    { name: "RoleName", index: "RoleName", width: 150 },
    { name: 'Delete', formatter: buttonFormatter }
  ],
  rowNum: 10,
  pager: '#jQGridDemoPager',
  sortname: "UserName",
  viewrecords: true,
  sortorder: "desc",
});


function buttonFormatter(cellvalue, options, rowObject) {
  return '&lt;button type="button" onClick=clickFunction1();&gt;Delete&lt;/button&gt;';
};

function clickFunction1() {

  var grid = $j('#list2');
  var sel_id = grid.jqGrid('getGridParam', 'selrow');
  var myCellData = grid.jqGrid('getCell', sel_id, 'Name');
  alert("Selected  Name: " + myCellData);

};
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>.ui-jqgrid .ui-state-highlight { background: silver; }
</code></pre>

<p>Issue as below:
When i click delete button (without selecting row) it shows previously selected rows value (Name in this case)</p>

<p>I want to click on any button (and it should select that row -- or not) and get its fields value.. which I post to server for deletion and then refresh the grid once item is deleted.</p>

<p>It is working if I select a row and then click button ... Working my local copy but not on fiddle... might be becasue of old version of fiddeler</p>