Using jqGrid 4.5.2 and jQuery 1.9.1. I have jqGrid on a webpage that displays rows of data returned from a query. Each row in the grid will have two submit buttons that are disabled by default, but become enabled in the onSelectRow jqGrid event.
I add buttons to 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}); }
Note that submit buttons are disabled by default.
When a row in the grid is selected, I want the two buttons for this row only to be enabled . The onSelectRow event also occurs, where I set the variables to use later.
var gridRow = $(this).jqGrid("getRowData",id); var srow = $(this).jqGrid("getGridParam","selrow");
Another behavior I want in onSelectRow is
You do not want to be able to click a row - you need to click one of the two submit buttons to go to another row in the grid. One submit takes one set of actions, and then resets the grid (nothing is selected, and all buttons on all lines are disabled).
Another send button ( Cancel button) does not perform the action in the previous step, but reset the grid (nothing is selected, and all buttons on all lines are disabled).
I tried different things to enable the buttons in the selected row, but it either allows you to use only the first row, all rows or rows. I reviewed the value in srow above and can confirm that it has the correct id for the row.
How do I target the submit buttons in the selected row to enable them (and leave all other buttons in the grid disabled)?
Thanks!
EDIT:
Thanks to @Oleg and his suggestions and next steps, I was able to resolve my question. @Oleg answers put me on the right track.
In colModel I put msgAct to get the buttons on each line and associated with that line.
{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 onSelectRow I also used his suggestion to disable all buttons in jqGrid, and then enable the ones that I selected in the row.
// 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 to disable any other dropdowns on the page, so only one of three things could happen:
- user can click "Submit"
- user can click Cancel Button
- user can click another row on jqGrid
Since # 3 above fires another onSelectRow event, I wanted the user to have to do something with the selected row.
Using the @Oleg suggestion to disable everything and then only include the selected row 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 .... }); },
Now the grid does what I want. For example -
- When the grid is loaded, all rows in the grid have the msgAct column and there is a “Send” and “Cancel” button in this column, both of which are present but inactive.
- If Row # 3 is selected, the msgAct Re-Send and Cancel buttons No. 3 are now activated and can be pressed. All other lines in the grid each have buttons in these rows, still gray.
- If the user clicks the "Cancel" or "Cancel" button, the corresponding action for this row in the grid. Resending adds another line to the grid, while Cancel cancels the selection, and the grid appears as when it was loaded.
- Only those options are available that are available to the user: "Send-Cancel", "Cancel" or to select another line. Selecting another line then includes buttons on this line (disabling those that were on the previous selection), and clicking on any of them initiates an action for this line.
The question now may be - is there a better way to do this?
Thanks @Oleg for your valuable help!