Jqgrid 4.7 multiple buttons in cells. Should be dynamic

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

Which **version** of jqGrid you use (can use) and from which **fork** of jqGrid ([free jqGrid](https://github.com/free-jqgrid/jqGrid), commercial [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334) or an old jqGrid in version <=4.7)? Look at [the demo](https://www.ok-soft-gmbh.com/jqGrid/OK/CustomActionButton.htm) or at [the old answer](https://stackoverflow.com/a/29735149/315935) or [the wiki article](https://github.com/free-jqgrid/jqGrid/wiki/Enhancement-of-formatter:%22actions%22). — Oleg, Oct 11 '18 at 16:48
I use the free jqGrid. Your answer is a good start. In your demo link I see that every single row has the same number of buttons but in my case the number of buttons should vary from row to row based on the data. Ideally, I need 4 columns representing quarters (Q1, Q2, Q3, Q4) Each column will have a number of reports (buttons) that upon click will open up a modal pop up with a pdf file inside. Do you have any suggestions? Thank you — DMan, Oct 11 '18 at 20:02

score 0 · Answer 1 · answered Oct 12 '18 at 06:53

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.

Jqgrid 4.7 multiple buttons in cells. Should be dynamic

1 Answers1