jQuery - jqGrid - submit buttons in each row

Question

Using jqGrid 4.5.2 & jQuery 1.9.1. I have a jqGrid in a web page that displays rows of data returned from a query. Each row in the grid will have 2 submit buttons that by default are disabled, but become enabled within the onSelectRow event of the jqGrid.

I am adding the buttons in the code below:

var ids = $("#myGrid").jqGrid("getDataIDs");
for (var i=0;i < ids.length;i++) {
    var cl = ids[i];
    sm = "<input id='resendMsg' style='height:25px;width:65px;' type='submit' value='Re-Send' disabled='true'  />";
    ca = "<input id='cancelMsg' style='height:25px;width:55px;' type='submit' value='Cancel' disabled='true' />";
    $("#myGrid").jqGrid("setRowData",ids[i], {msgAct:sm+ca});
    }

Please note that the submit buttons come up disabled by default.

When a row in the grid is selected, I want the two buttons for that row only to be enabled. Also taking place in the onSelectRow event are where I set variables for use later on.

var gridRow = $(this).jqGrid("getRowData",id);
var srow = $(this).jqGrid("getGridParam","selrow");

Other behavior I want in onSelectRow -

Do not want to be able to click off the row - one of the 2 submit buttons must be clicked to go to another row in the grid. One submit takes one set of action & then resets the grid (nothing is selected & all buttons on all rows are disabled).
The other submit button (a Cancel button) does not take the action in the previous step, but does reset the grid (nothing is selected & all buttons on all rows are disabled).

I've tried various things to enable the buttons on the selected row, but it either enables the first row only, all rows, or no rows. I've looked at the value in srow above & can confirm it has the correct id for the row.

How do you target the submit buttons in the selected row to enable them (and to keep all other buttons in the grid disabled)?

Thanks!

EDIT:

Thanks to @Oleg & his suggestions & follow-up, I was able to resolve my question. @Oleg's responses put me onto the right track.

In the colModel I put the msgAct to get the buttons on each row & associated with that row.

{name: "msgAct",
    width: col4width,
    align: "center",
    formatter: function() {
    return "<input name='resendMsg' style='height:25px;width:65px;' type='submit' value='Re-Send' disabled='disabled' />" +
       "<input name='cancelMsg' style='height:25px;width:55px;' type='submit' value='Cancel' disabled='disabled' />" 
    }}

In the OnSelectRow, I also used his suggestion to switch off all the buttons in the jqGrid & then switch on the ones in the row I had selected.

// disable all resendMsg & cancelMsg buttons in the grid
$(this).find("input[name=resendMsg]").attr("disabled","disabled");
$(this).find("input[name=cancelMsg]").attr("disabled", "disabled");
// now enable the buttons for the current row only
$(tr).find("input[name=resendMsg]").removeAttr("disabled");
$(tr).find("input[name=cancelMsg]").removeAttr("disabled");

I also had other code in there to disable any other drop downs on the page, so that only one of three things could happen:

1. the user can click the Re-Send button
2. the user can click the Cancel button
3. the user can click another row on the jqGrid

Since #3 above would trigger another OnSelectRow event, I wanted the user to have to do something with the selected row.

Using @Oleg's suggestion to turn off all & then turn on only the selected row's buttons, I also put the click event code for each of them in the onSelectRow event.

$(tr).find("input[name=cancelMsg]").click(function() {
    // disable all resendMsg & cancelMsg buttons in the grid
    $(this).find("input[name=resendMsg]").attr("disabled","disabled");
    $(this).find("input[name=cancelMsg]").attr("disabled", "disabled");
    ....do other stuff .....
    ReloadGrid();
    });
$(tr).find("input[name=resendMsg]").click(function() {
    ReSend(gridRow.Col1, gridRow.Col2);
    // disable all resendMsg & cancelMsg buttons in the grid
    $(this).find("input[name=resendMsg]").attr("disabled","disabled");
    $(this).find("input[name=cancelMsg]").attr("disabled", "disabled");
    .... do other stuff ....
    });
},

The grid now does what I want it to do. For example -

• When the grid loads, all rows in the grid have a msgAct column, and that column has in it a Re-Send and a Cancel button, both of which are present, but greyed out.
• If Row #3 is selected, Row #3's msgAct Re-Send & Cancel buttons are now activated and can be clicked. All other rows in the grid each have the buttons in those rows still greyed out.
• If the user clicks either Re-Send or Cancel, the appropriate action for that row in the grid takes place. Re-send adds another row to the grid, while Cancel resets the selection & the grid appears as it did when it was loaded.
• The only options available to the user are to click Re-Send, Cancel or to select a different row. Selection of a different row then enables the buttons on that row (disabling the ones on the previous selection), and clicking on either of them initiates the appropriate action for that row.

The question now might be - is there a better way to do this?

Thank you @Oleg for your valuable help!

Suitcase

Answer 1

The main problem is creating wrong HTML data.

You add buttons with the same ids (id='resendMsg' and id='cancelMsg') in all rows of the grid, but id attribute must be unique over the whole HTML page. If you would try enable the button by indexing it by id you will find probably only the first button having the id. It will by typically buttons from the first row. You can use name attribute instead of id attribute

Another problem is the usage of wrong value for disabled attribute. You should use disabled='disabled' instead of disabled='true' if you want that the code works correctly in all web browsers.

The best way to create such buttons is to use custom formatter. You can add formatter property in the msgAct which would create the buttons directly. The code could be about the following

colModel: [
    ...
    { name: "msgAct", width: 150,
        formatter: function () {
            return "<input name='resendMsg' style='height:25px;width:65px;' type='submit' value='Re-Send' disabled='disabled'/>" +
                "<input name='cancelMsg' style='height:25px;width:55px;' type='submit' value='Cancel' disabled='disabled'/>"
        }}
],
onSelectRow: function (rowid) {
    var tr = $(this).jqGrid("getInd", rowid, true);

    // first disable all "resendMsg" buttons in the grid
    $(this).find("input[name=resendMsg]").attr("disabled", "disabled");

    // then enable the button from the current row only
    $(tr).find("input[name=resendMsg]").removeAttr("disabled");
},
gridview: true

The answer described advantages of usage gridview: true and custom formatters.

Whim

That explains why it was a first/all/none on the buttons in the rows. Where does the click event for each of the submit buttons belong? Once the row has been selected, I can't get the click for either button to fire. – Suitcase

@steve_o: The line $(tr).find("input[name=resendMsg]").removeAttr("disabled") from onSelectRow do enable the button. It was your question, isn't so? I don't know what you plan to do with submit buttons. I personally prefer to use <span> as button. One can use beforeSelectRow or onCellSelect to catch click on any element of the grid. See the answer and another one for details. In the way one can create buttons, links and so on inside of grid and handle click event. – Whim

the line $(tr).find........removeAttr("disabled") does enable the buttons in the proper row, which was part of my problem. Now, though, I can't get either button to fire after the row has been selected. What I am doing with the submit buttons is to allow a user to re-send an item that was sent previously, or they can elect to not re-send it by hitting the cancel button (user will have a touch screen only & no keyboard). Once they hit submit, the item is re-sent & the jqGrid gets reloaded, with nothing selected. Cancel resets the selection & reloads the grid. – Suitcase

@steve_o: OK, but I still don't understand how you plan to control what and how will be submitted. Do you bound jQuery.submit to buttons? Do you looked in the answers which I referenced which shows how to use beforeSelectRow or onCellSelect? – Whim

I have read those links but obviously am not understanding something. Initially, I had this working by showing a DIV with 2 submit buttons on it that was displayed below the grid. OnSelectRow would fire, show DIV would catch the click on the button. Now required to move that functionality to each row of the grid. Now, on Re-Send, it would take col1 & col2 values from selected row & re-send that item to a table, refresh grid when done. Cancel would reset selection & refresh grid. Same functionality as before, but now button tied to each row. – Suitcase

@steve_o: The idea is: you just place any element in the column (two buttons, spans, divs etc). If the click on the element will be not handled then it will be bubbling. So the click can be handled in the parent: in <table>. jqGrid has already click handle which calls beforeSelectRow ànd onCellSelect. Look the code of the demo – Whim