how add button before action buttons in jqgrid

Question

Answer in Custom jQGrid post action adds custom button to end of action buttons using appendTo().

How to add buttons befor action buttons ?

I tried to replace appendTo() with before() and prepend() but in this all buttons disappear.

Answer 1

I tried to use prependTo instead of appendTo and all works. To be exactly I used

loadComplete: function () {
    var iCol = getColumnIndexByName(grid, 'act');
    $(this).find(">tbody>tr.jqgrow>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-right": "5px", float: "left", cursor: "pointer"})
           .addClass("ui-pg-div ui-inline-custom")
           .append('<span class="ui-icon ui-icon-document"></span>')
           .prependTo($(this).children("div"));
    });
}

The corresponding demo displays

I added additionally the CSS

.ui-inline-custom.ui-state-hover span { margin: -1px; }

for small improvement of the hovering corresponds the the bug fix which already implemented in jqGrid 4.3.2.

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