How to dynamically add Edit button to grid for editing row using the jqGrid formedit

Goal:

Dynamically add an Edit button to an empty column that will NOT trigger an inline edit but rather a jqGrid formedit for the selected row using the modal dialog option.

Problem:

All examples in the Demo version include editing inline and adding buttons to a column that only does an inline edit and the Demo version's getRowdata does not perform as expected. I tried it an could not get it working and the getRowData did not work as specified.

Solution:

gridComplete: function() {
var rows = $(item).jqGrid('getRowData');
for (var i = 0; i < rows[0].rows.length; i++) {
var row = rows[0].rows[i];
var idx = row.id;
if (!$(row).hasClass('jqgrow') && !$(row).hasClass('alt'))
continue;
var be = "";
$(item).setRowData(idx, { act: be });
$('#editAddress' + idx).click(function() {
$(item).editGridRow($(this).parent().parent('tr').attr('id'));
});
}
},

item = that is a variable that contains the id of my grid.

This is for editing an address so change the "editAddress" id prefix for your needs or create a generic function that will handle all of this:

gridComplete: function() {
SetupJqGridEditDeleteButtons(item);
},

function SetupJqGridEditDeleteButtons(item) {
var rows = $(item).jqGrid('getRowData');
for (var i = 0; i < rows[0].rows.length; i++) {
var row = rows[0].rows[i];
var idx = row.id;
if (!$(row).hasClass('jqgrow') && !$(row).hasClass('alt'))
continue;
var be = "";
$(item).setRowData(idx, { act: be });
$('#editItem' + idx).click(function() {
$(item).editGridRow($(this).parent().parent('tr').attr('id'));
});
}
}