JqGrid need hyperlink – need to capture value through Jquery

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="https://stackoverflow.com/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.

Leave a Comment