Custom jQGrid post action

I updated the demo for you. Now the http://ok-soft-gmbh.com/jqGrid/TestSamle/Admin1.htm do what you need. (I removed from the code the second grid to hold the code smaller):

Some comments to the implementation. The actions formatter add “action buttons” elements inside a div. Every “action button” has the HTML markup like the following

<div style="margin-left: 5px; float: left;"
     class="ui-pg-div ui-inline-del"
     onmouseover="jQuery(this).addClass('ui-state-hover');"
     title="Delete selected row"
     onmouseout="jQuery(this).removeClass('ui-state-hover');"
     onclick="$.fn.fmatter.rowactions('10','List1','del',0);">
    <span class="ui-icon ui-icon-trash"></span>
</div>

So to have the look of the custom button close to the original “action buttons” I do inside of loadComplete to following:

loadComplete: function () {
    var grid = $(this),
        iCol = getColumnIndexByName(grid,'act'); // 'act' - name of the actions column
    grid.children("tbody")
        .children("tr.jqgrow")
        .children("td:nth-child("+(iCol+1)+")")
        .each(function() {
            $("<div>",
                {
                    title: "Custom",
                    mouseover: function() {
                        $(this).addClass('ui-state-hover');
                    },
                    mouseout: function() {
                        $(this).removeClass('ui-state-hover');
                    },
                    click: function(e) {
                        alert("'Custom' button is clicked in the rowis="+
                              $(e.target).closest("tr.jqgrow").attr("id") +" !");
                    }
                }
              ).css({"margin-left": "5px", float:"left"})
               .addClass("ui-pg-div ui-inline-custom")
               .append('<span class="ui-icon ui-icon-document"></span>')
               .appendTo($(this).children("div"));
    });
}

where

var getColumnIndexByName = function(grid,columnName) {
        var cm = grid.jqGrid('getGridParam','colModel'), i=0,l=cm.length;
        for (; i<l; i+=1) {
            if (cm[i].name===columnName) {
                return i; // return the index
            }
        }
        return -1;
    };

You can change the icon of the custom button from ‘ui-icon-document’ and change the code of the click event handle what you need I showed how you can get the rowid. Using it you can use getRowData method to get contain of another cells of the row.

UPDATED: The current version of free jqGrid supports easy way to implement custom buttons. See the demo.