I had a previous question regarding having buttons available in each row of a jqGrid, that would activate when the row was selected. With help from @Oleg
I was abl
It's wrong to bind button (to use .click
) inside of onSelectRow
callback.
Instead of you can move the code with registering click
event handler inside of loadComplete
. You can just move the code from onSelectRow
to loadComplete
and replace $(tr)
to $(this)
to search inside of all buttons of the grid and not only the buttons of selected row. You can still set or remove disabled
attribute inside of onSelectRow
callback.
More better would be to make no individual binding for every button. One can just use onCellSelect
or beforeSelectRow
which will be called from click
handler bound on whole grid. See the answer and this one for code examples.
UPDATED: I am not sure that I understand correctly your problem, but I hope that the demo will demonstrate the solution of the problem. I don't used any explicit click
handler. The most important change (which could important if you use Internet Explorer) is adding class='cbox'
to the formatter to prevent return
in the line of jqGrid code. The most important part of the code is below
colModel: [
{ name: "text", width: 500 },
{ name: "msgAct", width: 150,
formatter: function () {
return "<input name='resendMsg' class='cbox' style='height:25px;width:65px;' type='submit' value='Re-Send' disabled='disabled'/>" +
"<input name='cancelMsg' class='cbox' style='height:25px;width:55px;' type='submit' value='Cancel' disabled='disabled'/>"
}}
],
onSelectRow: function (rowid) {
var tr = $(this).jqGrid("getInd", rowid, true);
$(this).find("input[name=resendMsg],input[name=cancelMsg]").attr("disabled", "disabled");
$(tr).find("input[name=resendMsg],input[name=cancelMsg]").removeAttr("disabled");
},
beforeSelectRow: function (rowid, e) {
var $self = $(this),
$td = $(e.target).closest("td"),
iCol = $.jgrid.getCellIndex($td[0]),
name = $(e.target).attr("name");
if (this.p.colModel[iCol].name === "msgAct") {
if (name === "resendMsg") {
alert("'Re-Send' button clicked in the row with id=" + rowid +
"\ntext in the row =\"" + $self.jqGrid("getCell", rowid, "text") + "\"");
} else if (name === "cancelMsg") {
alert("'Cancel' button clicked in the row with id=" + rowid);
setTimeout(function () {
$self.trigger("reloadGrid");
}, 50);
}
}
return true;
}
You can replace alerts inside of beforeSelectRow
to the action which you need.