CODEWITHSUNDEEP
jqueryjqgrid
Andrus
Andrus

Reputation: 27931

how add button before action buttons in jqgrid

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.

Upvotes: 2

Views: 10540

Answers (1)

Oleg
Oleg

Reputation: 221997

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

enter image description here

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.

Upvotes: 7

Related Questions