How to fire loadComplete after new row is added in jqgrid?
I would suggest you to remove the current code from loadComplete
to custom formatter. Using of custom formatters, cellattr
or rowattr
in combination with gridview: true
is the most effective way to fill the grid. See the answer for more details.
You can change the definition of 'cfgName' column to the following:
{name: 'cfgName', width: 80, classes: "myLink",
formatter: function (cellValue, options, rowObject) {
var converted = rowObject.converted === undefined ?
$(rowObject).find(">converted").text(): rowObject.converted,
updateDate = rowObject.updateDate === undefined ?
$(rowObject).find(">updateDate").text(): rowObject.updateDate;
return (isAlertedDate(updateDate) ? iconAlert: "") +
(converted === "yes" ? convertIcon : "") +
"<span>" + cellValue + "</span>";
},
cellattr: function () {
return " title=\"Click here to go to ViewAllPage\"";
}}
You can use use your current diffOf2Dates
function inside of the implementation of isAlertedDate
. Moreover I suggest don't use links (<a>
) at all to make the code more easy. Instead of that I use classes: "myLink"
and I defined the following CSS
.myLink { text-decoration: underline; cursor: pointer; }
The resulting grid will look exactly as before:
To execute some JavaScript code on click on the link (and even on click in the cell with the link) one can use beforeSelectRow
or onCellSelect
callback. For example
beforeSelectRow: function (rowid, e) {
var iCol = $.jgrid.getCellIndex($(e.target).closest("td")[0]);
if (this.p.colModel[iCol].name === 'cfgName') {
//alert("GO!!!");
goToViewAllPage(rowid);
return false;
}
}
You can see what I mean on the demo.