Conditional actions between rows based on a given condition in jQgrid?

Question

I need to swap between actions based on a given condition in a jqGrid 4.4.1 grid. Take a look to the following image:

How it should works is:

if Type is api_response then the actions should be only the magnifier icon.
if Type is api_request then the actions should be the second icon but magnifier shouldn't be there.

This is how I am creating the buttons:

$.fn.fmatter.btnFormatter = function (cellValue, options, rowData, addOrEdit) {
    return '<a href="#">' +
        '<img class="api_button" data-id="' + options.rowId + '" src="/images/icons/16x16/document_view.png" alt="Show API Response Data" title="Show API Response Data" />' +
        '</a>' +
        '<a href="/sf/api-logs/error/' + options.rowId + '">' +
        '<img class="error_button" data-id="' + options.rowId + '" src="/images/icons/16x16/document_warning.png" alt="Show Errors" title="Show Errors" />' +
        '</a>';
};

$(function () {
    $("#grid").jqGrid({
        url: '/api-logs',
        datatype: "json",
        colNames: $('#colnames').data('values'),
        colModel: $('#colmodel').data('values'),
        width: 980,
        height: 300,
        pager: "#gridpager",
        toppager: true,
        hoverrows: true,
        shrinkToFit: true,
        autowidth: true,
        rownumbers: true,
        viewrecords: true,
        rowList: [10, 20, 50, 100],
        data: [],
        rownumWidth: 50,
        gridview: true,
        sortable: true,
        rowattr: function (item) {
            if (item.type === "api_response") {
                return {"class": "api_response"};
            } else if (item.type === 'api_request') {
                return {"class": "api_request"};
            }
        },
        jsonReader: {
            root: 'rows',
            page: 'page',
            total: 'total',
            records: 'records',
            cell: '',
            repeatitems: false
        }
    });
});

Of course the first column has the btnFormatter applied.

How I can do this?

How you create magnifier icon? You should post JavaScript code, which you use. The old jqGrid 4.4.1 don't have the possibility to create custom action button. Moreover jqGrid 4.4.1 is almost 5 years old. It's dead version, which not supported since years. — Oleg, Jun 07 '17 at 16:34
[Free jqGrid](https://github.com/free-jqgrid/jqGrid) (the current version is 4.14.1) supports custom buttons, which could be displayed conditionally based on input data. One need define `actionsNavOptions.isDisplayButtons` callback. See [the demo](http://www.ok-soft-gmbh.com/jqGrid/OK/CustomActionButton1.htm) created for [the answer](https://stackoverflow.com/a/29735149/315935) for more details. — Oleg, Jun 07 '17 at 16:34
@Oleg I have added the code to the OP however I can't update the library now because there is a whole system working based on such version and I don't know how BC will behaves. — ReynierPM, Jun 07 '17 at 17:07
Yeah the example you live using the `actionsNavOptions` won't work for me unless this is part of this version :-| — ReynierPM, Jun 07 '17 at 17:14

score 1 · Accepted Answer · answered Jun 07 '17 at 17:32

You can modify the code of $.fn.fmatter.btnFormatter, which you use to test rowData.type in the same way like you do it inside of rowattr callback.

In any way I would strictly recommend you to test, whether your existing code works with the current version of free jqGrid (the version 4.14.1). You can modify 3 lines of your HTML code and load CSS and JS files from CDN (see the wiki article). The version 4.4.1 of jqGrid is dead. It's really dangerous to use such old and unsupported version.

Conditional actions between rows based on a given condition in jQgrid?

1 Answers1