JqGrid Add custom button to Row

Question

I am trying to add a custom button to a JqGrid that implements a 'Check Out' process. Basically, every row has a 'Check Out' button that if clicked should be able to send a post back to the server and update a shopping cart and then change the button text to 'Undo Check Out'. So far I have:

colNames: ['Id', ... , 'Action' ],
colModel: [
{ name: 'Id', sortable: false, width: 1, hidden: true},
...
{ name: 'action', index: 'action', width: 75, sortable: false }
],
...
gridComplete: function() {
            var ids = jQuery("#east-grid").jqGrid('getDataIDs');
            for (var i = 0; i < ids.length; i++) {
                var cl = ids[i];
                checkout = "<input style='height:22px;width:75px;' type='button' value='Check Out' onclick=\" ??? \"  />";
                jQuery("#east-grid").jqGrid('setRowData', ids[i], { action: checkout });
            }
        },
...

Where '???' is the part I need to solve.

Thank you in advance for your help.

Answer 1

It seem to me that you have already a global JavaScript function like MyCheckOut and call it inside of '???' area. If you add to this function an additional parameter like rowId then you can simply so overwrite the contain of you <input> button of the 'action', that it will point to new MyCheckIn function and have corresponding text in the value attribute. Your code will looks like following:

MyCheckOut = function (gridId,rowId) {
    // do Check Out
    // ...
    // replace "Check Out" button to "Check In"
    var checkIn = "<input style='height:22px;width:75px;' type='button' " + 
               "value='Check In' " +
               "onclick=\"MyCheckIn(jQuery('" + gridId + "')," +
               rowId + "); \"  />";
    jQuery(gridId).jqGrid('setRowData', rowId, { action: checkIn });
};

MyCheckIn = function (grid,rowId) {
    // do Check In
    // ..
    // replace "Check In" button to "Check Out" like in MyCheckOut 
};

jQuery("#east-grid").jqGrid({
    // ...
    colNames: ['Id', ... , 'Action' ],
    colModel: [
        { name: 'Id', sortable: false, width: 1, hidden: true},
        // ...
        { name: 'action', index: 'action', width: 75, sortable: false }
    ],
    // ...
    gridComplete: function() {
        var grid = jQuery("#east-grid");
        var ids = grid.jqGrid('getDataIDs');
        for (var i = 0; i < ids.length; i++) {
            var rowId = ids[i];
            var checkOut = "<input style='height:22px;width:75px;' " +
                           "type='button' value='Check Out' " +
                           "onclick=\"MyCheckOut('#east-grid'," +
                           rowId + ");\" />";
            grid.jqGrid('setRowData', rowId, { action: checkOut });
        }
    },
    // ...
});

If you have as a rowIdnot an integer, then you should place ' from the both side from rowId.