Add ActionLink in JqGrid column in ASP.NET MVC 3 Razor

Question

I am using jqGrid with ASP.NET MVC 3 and Razor.

I am looking to add 2 columns to the jqGrid along with the rest of the columns.

The columns I want to add are

• Edit
• Delete

These columns value I want to be ActionLink.

How do I add an ActionLink to a Column of a JqGrid ?

Please guide me on this.

Update 1: with help from @user1534482 I tried this but did not work

colModel: [
    ...
    { name: 'Open', formatter: 'prepareLinks' },
    ...
],

 function prepareLinks(cellvalue, options, rowObject) {
    return "@Html.ActionLink("Open this","Test")";

}

javascript error message :

SyntaxError: missing ; before statement
[Break On This Error]   

return "<a href="/SomeController/Test">Open this</a>";

SomeController (line 92, col 41)

Answer 1

Thanks to @tpeczek and @user1534482

I finally got the solution,

colModel: [
    ...
    { name: 'Open',
        formatter: function (cellvalue, options, rowObject) {
            return '<a href="/ControllerName/Test/?myId=' + cellvalue + '">' + "Open" + '</a>';
        } 
    },
    ...
],

Answer 2

You should take a look at showlink predefined formatter.

There is no code in your question so I don't know how complex your scenario is, but in general code like this should be enough:

<script type="text/javascript">
    jQuery("#gridId").jqGrid({
        colNames: [..., 'Edit', 'Delete'],
        colModel: [
            ...
            {name:'EditAction', formatter:'showlink', formatoptions: { baseLinkUrl: '@Url.Action("Edit")' } },
            {name:'DeleteAction', formatter:'showlink', formatoptions: { baseLinkUrl: '@Url.Action("Delete")' } }
        ],
        ...
    });
</script>

The row id will be added automatically (you can control how with idName option). If you need to pass some additional parameters take a look at addParam option in the documentation.

UPDATE

For clarification on how the final link is generated, you can use this formula:

"<a " + ((op.target) ? "target=" + op.target : "") + " href=\"" + op.baseLinkUrl + op.showAction + "?" + op.idName + "=" + rowId + op.addParam + "\">" + cellvalue + "</a>"

Where op is the formatoptions object and cellvalue is the value for the column from data you have pasted to the jqGrid.

Answer 3

u can use ur own formater like

 colModel: [

        { name: 'colname', formatter: linkbuilder   },
    ],

and

and add function

function linkbuilder(cellval, opts, rwdat, _act) {
    return "@Htm.ActionLink()";
}