JQGrid Custom Formatter not working for button creation

Question

I am using JQGrid customer formatter for creating button but button not showing.

function viewLineBtn(cellvalue, options, rowObject) {
    alert(cellvalue +         


        

Answer 1

First of all, I think that there exist some misunderstanding how jqGrid uses custom formatter. jqGrid build the whole jqGrid body (<tbody>) as one string. By default jqGrid place the cell data directly in the cell, buy using formatter one can place another string instead as the content of the cells of the column (the content of<td> elements). Thus the custom formatter have to return the string. You current viewLineBtn function returns undefined.

The next problem. jqGrid calls custom formatter for all rows of the page, build <tbody>, insert it in the grid and only after that one could make the binding to click event.

It's enough to bind click event handler on the grid (<table>) element and the event handler will be called on click on any internal element of the grid because of event bubbling. jqGrid registers already one click event handler. Thus you can just use beforeSelectRow instead of registering your own click handler. The second parameter of the beforeSelectRow callback is the Event object of the click. Thus one can use event.target to get all required information. No rowid is required to set. Especially your current code assign the same id value on the button like the rowid (the id of the outer row).

One don't need assign any id to the button and use $(e.target).closest("tr.jqgrow").attr("id") instead to get the rowid.

The final definition of the column with the button could be for example the following:

{ name: "mybutton", width: 100, sortable: false,
    resizable: false, hidedlg: true, search: false, align: "center",
    fixed: true, viewable: false,
    formatter: function () {
        return "<button class=\"viewLineItem\">View Line Item</button>";
    }
}

and the code of beforeSelectRow could be

beforeSelectRow: function (rowid, e) {
    if ($(e.target).is("button.viewLineItem")) {
        alert($(e.target).closest("tr.jqgrow").attr("id"));
        return false; // don't select the row on click on the button
    }
    return true; // select the row
}

See the demo https://jsfiddle.net/OlegKi/x0j55z1m/