JqGrid need hyperlink - need to capture value through Jquery
I have the following in my code:
{ name: 'ID', index: 'ID', width: 40 , formatter: 'showlink', search: false, formatoptions: { baseLinkUrl: '/Program/EditMicro'} },
When I click on the PNum, what happens is that it goes to the following actionresult my controller:
/Program/EditMicro
What I would like instead is to capture that info through Jquery on what was selected (what ID was selected) as I want to do some json before it is sent to the following ActionResult
/Program/EditMicro
So, to recap, is there anyway to capture what the value of the hyperlink clicks on is and then I can capture that in Jquery.
Thank you in advance
In the most cases it's enough to use something like
formatter: "showlink",
formatoptions: {
baseLinkUrl: "/Program/",
showAction: "EditMicro",
idName: "myId"
}
In the case the links will be generated like
<a href="/Program/EditMicro?myId=123">text from the cell</a>
If you have in the action the id of the row you can get any other additional information which you need directly from the database.
Alternatively you can use the simple trick described in the answer. You define CSS class
.myLink { text-decoration: underline; cursor: pointer; }
Then you can use custom formatter like below
formatter: function (cellValue, options, rowObject) {
return "<span class='myLink'>" + cellValue + "</span>";
},
cellattr: function () {
return " title=\"Click here to go to EditMicro\"";
}
In the way you will generate <span>
which look for the user like a link. You can catch the click event on the cell using beforeSelectRow
or onCellSelect
callback. For example
beforeSelectRow: function (rowid, e) {
var $td = $(e.target).closest("td"),
iCol = $.jgrid.getCellIndex($td[0]);
if (this.p.colModel[iCol].name === 'note') {
window.location = "/Program/EditMicro/" +
encodeURIComponent(rowid);
return false;
}
}
If needed you can use getCol
or getRowData
to get any other data from the clicked row and append the information to the target URL.