JqGrid need hyperlink - need to capture value through Jquery

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

Dort

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.

Saddlecloth

Thanks Oleg, the beforeSelectRow method you have above worked fine. I have another question relating somewhat to this. Once the user goes to window.location = "/Program/EditMicro/" + encodeURIComponent(rowid); and fills out the form, I the user to return to the page that they were on the grid. This way, they don't need to say go to page 102 were before. Is there a easy way to do this? Thanks – Dort

@NatePat: You are welcome! You can use approach described in the answer. It allows to save the state of jqGrid in the localStorage. If the user go back or just open one more time the same page the previous state of jqGrid will be restored. – Saddlecloth

@Vieenay: You are welcome! I'm glad that I could help you too. – Saddlecloth

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/

Nimitz

Mark, this does not work. When I click on hyperlink and click on it, does not even show me the alert message – Dort

Thanks Mark, How can you capture what is clicked on though. Like Note1, Note2, etc. – Dort

In the example above it is passing in a parameter of the current row so you could then turn around and get the row and then operate on it Ex. idRowData = $('#gridName').jqGrid('getRowData', rowid); (If You look at the href of each note in the example) – Nimitz