Jqgrid 4.7 multiple buttons in cells. Should be dynamic - jqgrid

Question

Is it possible to have a dynamic multiple buttons/images per column in a JQGrid 4.7? Each button/image should be clickable to bring up a custom modal pop up. This will only be used to display data, no editing at all.
Any code samples will be appreciated.
Here is a sample visual how it might look like:
Dynamic buttons

Answer 1

Free jqGrid allows to use formatter: "actions" or template: "actions" in multiple columns if you need:
colModel: [
{ name: "a1", template: "actions", width: 44, align: "left",
formatoptions: { mycol: "Q1" } },
{ name: "a2", template: "actions", width: 44, align: "left",
formatoptions: { mycol: "Q2" } },
...
],
actionsNavOptions: {
editbutton: false,// don't display Edit, Save and Cancel buttons
delbutton: false, // don't display Delete button
custom: [
{ action: "open", position: "first",
onClick: function (options) {
var item = $(this).jqGrid("getLocalRow", options.rowid);
alert("Open " + item.name + ", rowid=" + options.rowid);
} },
{ action: "post", position: "first",
onClick: function (options) {
var item = $(this).jqGrid("getLocalRow", options.rowid);
alert("Post " + item.name + ", rowid=" + options.rowid);
} }
],
posticon: "fa-lock",
posttitle: "Confirm (F2)",
openicon: "fa-folder-open-o",
opentitle: "Open (Enter)",
isDisplayButtons: function (options, rowData) {
if (options.mycol === "Q1") {
if (rowData.closed) { // or rowData.closed
return { post: { hidden: true } };
}
} else if (options.mycol === "Q2") {
if (parseFloat(rowData.amount) < 350) { // or rowData.closed
return { open: { hidden: true } };
}
}
}
}
With respect of editbutton: false and delbutton: false properties of actionsNavOptions you remove the standard actions buttons from the corresponding columns. By custom property one defines custom buttons and by callback isDisplayButtons one can include new custom buttons, include some buttons hidden or remove some custom buttons from the columns. The returned value of is described in the old answer and in the wiki article. In the way you have full control over displayed custom buttons and over the onClick behavior.
See the demo https://jsfiddle.net/OlegKi/av7ng1u0/ as an example.