JqGrid need hyperlink - need to capture value thro

Question

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

Answer 1

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.

Answer 2

You can append the following to your jqGrid declaration to prevent the default click action from triggering.

.click(function (event) { event.preventDefault(); })

You could then do something like your own click event handler via

$('a').click(function () { //ToDo: Extra actions before submitting to controller });

You could also build you own custom formatter to also add extra information to the hyperlink you are going to be displaying to do that work as the grid is being built.

Edit: Working example where I disabled the default click functionality and bind my own to display an alert (as an example to show where you would code your own function to do the extra work you want to do). http://jsfiddle.net/QEzhr/33/