JQGrid custom formatter button vanish after pagination

Question

I am using below code for creating custom formatter button :

colModel.push({ name : 'Id',index : 'Id', width: 100, sortable: false,
                resizable: false, hidedlg: true, search: false, align: "center",
                fixed: true, viewable: false,
                formatter: function (cellvalue, options, rowObject) {
                    if (rowObject[8] === "Active") {
                        return "<button class=\"resend\">Resend</button>";  
                    } 
                    return "-";
                }
            });

JQGrid Code :

jQuery("#" + gridName).jqGrid({
        url : gridUrl,
        datatype : "json",
        width : 1000,
        height : 200,
        colNames : colNames,
        colModel : colModel,
        rowNum : 20,
        rowList : [ 10, 15, 20 ],
        viewrecords : true,
        pager : "#" + pager,
        multiselect : false,
        loadonce : true,
        repeatitems: true,
        imgpath : "themes/basic/images",
        caption : "",
        beforeSelectRow: function (rowid, e) {            
            return true;
        },
    }).navGrid("#" + pager, {
        edit : false,
        add : false,
        del : false,
        search : false,
        refresh : false
    }, {}, // Default for edit
    {},// Default for add
    {}// Default for delete
    ).navButtonAdd("#" + pager, {
        caption : "Refresh",
        buttonicon : "ui-icon-refresh",
        onClickButton : function() {
            var urlStr = getLastUrl(gridUrl);
            jQuery("#" + gridName).jqGrid('setGridParam', {
                url : urlStr,
                mtype : 'POST',
                datatype : 'json'
            }).trigger("reloadGrid");
            return true;
        }
    }).navButtonAdd("#" + pager, {
        caption : "Export",
        buttonicon : "ui-icon-save",
        onClickButton : function() {
        }
    });

When grid is loading the button are displaying fine based on the logic, but after pagination buttons are not displaying in grid.

Not able to understand what happen. How to solve this issue?

I am using

jqGrid 4.0.0 - jQuery Grid

I's important that you post always the information about **the version** of jqGrid, which you use (can use), and the 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). I guess that you use `loadonce: true` option and you use `repeatitems: true` format of JSON data. It is so? Thus `rowObject` is **array** at initial loading and it's object later. Which column name have the column, which you address via `rowObject[8]`? — Oleg, Mar 18 '17 at 22:24
Yes, You are right, I am getting row data on load time, Once data is loaded then I am getting undefiend data form rowobject. — Shiladittya Chakraborty, Mar 19 '17 at 04:20
Do you **really** use retro version 4.0.0, which is 6 years old? I strictly recommend you to upgrade to free jqGrid 4.14.0. Free jqGrid is the fork of jqGrid, which I develop starting with the end of 2014, after the end of non-commercial jqGrid (see [the post](http://www.trirand.com/blog/?p=1438)) and starting Guriddo jqGrid JS. See the license and the price of Guriddo [here](http://guriddo.net/?page_id=103334). — Oleg, Mar 19 '17 at 08:28
Yes, but the usage of 4.0.0 today is really nonsense. It contains a lot of bugs, it's slow and so on. Later versions are compatible with jqGrid 4.0.0. You can just change 3 lines of your HTML to load `ui.jqgrid.min.css` and `jquery.jqgrid.min.js` from CDN (see [the wiki](https://github.com/free-jqgrid/jqGrid/wiki/Access-free-jqGrid-from-different-CDNs) and [the demo](https://free-jqgrid.github.io/getting-started/index.html#the_first_grid_code)). **Which web browsers you need to support in your application?** Which version of jQuery and jQuery UI you want to use? — Oleg, Mar 19 '17 at 08:39
You still don't included **the name of the column** (`colModel` item), which you try to access via `rowObject[8]`. — Oleg, Mar 19 '17 at 08:40

score 1 · Accepted Answer · edited May 23 '17 at 12:17

If you really need to use retro version 4.0.0, which is dead since many years, then you can fix your code by usage

formatter: function (cellvalue, options, rowObject) {
    // access the data of another column by column index or by column name "getStatus"
    var status = $.isArray(rowObject) ? rowObject[8] : rowObject.getStatus;
    return status === "Active" ? "<button class=\"resend\">Resend</button>" : "-";
}

I'd strictly recommend you to upgrade jqGrid to free jqGrid 4.14.0 and to more recent jQuery version (any version between 1.7.2 and 3.1.1). jqGrid 4.0.0 is 6 years old. It's released at the time of Chrome 10, Firefox 3.5 and IE8 (IE9 was just published for Vista). Now we have Chrome 57, Firefox 52, Edge 38, IE11. I point only on one problem described here, which describe real problem, which you have in jqGrid 4.0.0 in case of usage the current version of Chrome. If you use jqGrid 4.0.0 then you have to use retro versions of jQuery and jQuery UI too. because jqGrid 4.0.0 can be used with jQuery versions < 1.6.

The above code will work for free jqGrid (because of compatibility reasons), but the recommended usage would be the following:

formatter: function (cellvalue, options) {
    var status = options.rowData.getStatus;
    return status === "Active" ? "<button class=\"resend\">Resend</button>" : "-";
}

Finally I would recommend you to remove the following jqGrid options: multiselect: false, repeatitems: true, imgpath : "themes/basic/images", caption: "" which are either wrong or contain default values and to add gridview: true (which is default in free jqGrid, but not default in jqGrid 4.0.0). You can consider to use height: "auto" instead of height: 200 and to specify the height of the grid with respect of rowNum.

JQGrid custom formatter button vanish after pagination

1 Answers1