Adding a custom button in row in jqGrid?

Question

I want to make a simple table that contains a custom button in a row. When the button is pushed, I want to pop up an \'alert\' box. I have read some posts on this, for ex

Answer 1

You can use action formatter here with each row and make edit and delete button as false in formatOptions like this:

formatoptions: {editbutton:false,delbutton:false}}

And follow these two demos:

http://www.ok-soft-gmbh.com/jqGrid/Admin3.htm

http://ok-soft-gmbh.com/jqGrid/TestSamle/Admin1.htm

And on click event of these custom buttons show your alert:

EDIT

var getColumnIndexByName = function (grid, columnName) {

                var cm = grid.jqGrid('getGridParam', 'colModel'), i, l = cm.length;

                for (i = 0; i < l; i++) {

                    if (cm[i].name === columnName) {

                        return i; // return the index

                    }

                }

                return -1;

            },

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"));

                });

            }

If you check this code, I'm trying to find out index value by giving column name as 'act', you can get index on any other column by giving a different column name.

var iCol = getColumnIndexByName(grid, 'Demo'); and the rest of the code will be same for you. //demo is the column name where u want to add custom button

and write your click event for this button.

Let me know if this works for you or not.