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.

Sorry, but you don't formulate your question. Is this example not work? Do you have problems with the part "???" or in general what kind of help do you need? — Oleg, May 30 '10 at 18:13
The example works partially. I can create the button and add a javascript function without any problem. What I need to solve is: How do I toggle the text of my button from 'Check Out' to 'Check In' and viceversa, after I send the ajax request back to the server? — Romanof, May 30 '10 at 18:27

score 9 · Accepted Answer · answered May 30 '10 at 19:23

9

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.

answered May 30 '10 at 19:23

Oleg

220,925
34
403
798

Thank you Oleg. You are very helpful, as usual. The first part of my problem is solved ('Check In' <=> 'Check Out'), now I need to send the ajax request back to the server in order to update my shopping cart. How can I achieve that? – Romanof May 30 '10 at 19:58
How looks like the prototype on the server side of 'Check In' and 'Check Out'? Which parameters should be send to the server? Probably http://stackoverflow.com/questions/2737525/how-do-i-build-a-json-object-to-send-to-an-ajax-webservice/2738086#2738086 can help you? – Oleg May 30 '10 at 20:33
The prototype works well, exactly the way you coded it. As for the parameters to send to the server, I just need to be able to create/update/delete a record in a list or a table based on the jquery rowId. I think I have to do something like this: http://stackoverflow.com/questions/2360550/custom-delete-button-in-jqgrid What do you think? – Romanof May 30 '10 at 20:57
It can be a good way, but I personally prefer to use navigation bar with add/edit/delete buttons (form edit mode) or an "inline edit mode" on double click (see http://stackoverflow.com/questions/2863874/jqgrid-edit-only-certain-rows-for-an-editable-column/2866685#2866685). There are a lot of ways to implement add/edit/delete buttons you should choose the way which you more like. – Oleg May 30 '10 at 21:11
Thank you for your input, once again. BTW, totally unrelated to this issue, I don't think the developers of JqGrid have fixed the bug with jquery.maskedinput and advanced search yet. http://stackoverflow.com/questions/2829791/jqgrid-search-with-multiple-text-boxes-for-field – Romanof May 30 '10 at 21:47
At least Tony answers you in http://www.trirand.com/blog/?page_id=393/bugs/jqgrid-advanced-search-with-masked-input-plugin-bug/. You should give a good arguments which shows, that the problem is not in forms in general. jqGrid can create forms for example with form editing and all works perfect together with masked input. One have probably problems with `jQuery.clone(true)`. But is it a problem of masked input or multi-search plug-in? Probably I'll write also my opinion about this problem in http://www.trirand.com/blog/?page_id=393/bugs/jqgrid-advanced-search-with-masked-input-plugin-bug/. – Oleg May 30 '10 at 22:05
I just posted an answer with an example in jqGrid forum (see http://www.trirand.com/blog/?page_id=393/bugs/jqgrid-advanced-search-with-masked-input-plugin-bug/#p17596). – Oleg May 30 '10 at 23:51
Hey Oleg, nicely done. Unfortunately I am not an expert on jqGrid and jQuery, I could not have explained the issue better than you did. – Romanof May 31 '10 at 14:10
Maybe I should start a new thread, but I'll ask anyway. Now that I now how to add a custom button to a JqGrid row, how to I attach an event to it? I am using JqGrid with ASP.NET MVC and I want that everytime I click a button, I need to call an action in the controller to update the Cart Items table. – Romanof Jun 07 '10 at 17:34
A new thread can be a good idea because we have here not much place for writing. You can use `showlink` or `actions` formatter (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:predefined_formatter#predefined_format_types) or make binding with `dataEvents` (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#editoptions) or a direct binding. In a close situation I use a `select` element outside the grid for the propose. But if you explain your problem and requirement more detailed I could give your more detailed advice. – Oleg Jun 07 '10 at 18:33
Hi Oleg, simply, when I click on the 'Select Item' button (for example), it should call an action on the controller to add the row item to a table in the back end database, something like this /Controller/AddItem/1 ,where 1 is the row_id. – Romanof Jun 07 '10 at 19:11
I am not sure where you see a problem. You can use any jQuery.ajax function (see http://api.jquery.com/category/ajax/) to call your controller action like `jQuery.post('/Controller/AddItem', {row_id: 1}, success: function(data) {}) ` or some other depend on your server part. – Oleg Jun 07 '10 at 19:47
I will try again, but I did try what you are suggesting. I have to figure out why it didn't work. I'll let you know – Romanof Jun 07 '10 at 21:35

JqGrid Add custom button to Row

1 Answers1

Linked