JQGRID - Delete the row with button

Question

How to delete row in JQGrid with button

http://jsfiddle.net/chandelyt/w4oudhh4/3/

HTML

<table id="list2">
    <tr>
        <td />
    </tr>
</table>
<div id="jQGridDemoPager"></div>

JQuery

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 '<button type="button" onClick=clickFunction1();>Delete</button>';
};

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);

};

CSS

.ui-jqgrid .ui-state-highlight { background: silver; }

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

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.

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

Answer 1

First of all, the function buttonFormatter, which you calls inside of onClick have to be global function (the property of the global window object). Seconds, I would recommend you to forward this, which is the clicked td element to clickFunction1 function:

function buttonFormatter() {
    return '<button type="button" onClick="clickFunction1.call(this)">Delete</button>';
}

and then use $j(this).closest("tr.jqgrow").attr("id") to get the rowid of the clicked row:

function clickFunction1() {
    var grid = $j('#list2'), rowid = $j(this).closest("tr.jqgrow").attr("id");
    var myCellData = grid.jqGrid('getCell', rowid, 'Name');
    alert("Selected  Name: " + myCellData);
}

You will see the results on the demo http://jsfiddle.net/OlegKi/w4oudhh4/12/

Alternatively you can use simplified version of the custom formatter:

function buttonFormatter() {
    return '<button type="button">Delete</button>';
}

where no onClick is used. jqGrid register already click event handler on the grid. If the user click on the "Delete" button then the click event handler of the parent outer element will be called because of the event bubbling. jqGrid provides beforeSelectRow callback which will be called inside of click event handler. The target property of the event is <td> element, which is clicked. Thus one can use

beforeSelectRow: function (rowid, e) {
    var grid = $j(this), rowid = $j(e.target).closest("tr.jqgrow").attr("id");
    var myCellData = grid.jqGrid('getCell', rowid, 'Name');
    alert("Selected  Name: " + myCellData);
    return true; // allows selection of the row
}

see another demo http://jsfiddle.net/OlegKi/w4oudhh4/13/