jqGrid: using beforeSelectRow it disables my onCellSelect event

Question

I found a solution for my issue here: jqGrid multiselect - limit the selection of the row only using the checkbox

but that cancels out my onCellSelect event. In short, I need to be able to select the rows ONLY when the user clicks on the checkbox column. The solution in the link above shows how to do that BUT I need to be able to take an action on specific cells in the grid, for instance, the code below opens a popup window when I click on column number 10:

  onCellSelect: function (rowid, iCol, cellcontent, e) {
      if (iCol == 10) {
          OpenPopupWindow(rowid); 
      }
  },

Any ideas? Thank you!

Isar

Answer 1

You should understand that both beforeSelectRow and onCellSelect are processed inside of click event handler which are set on the grid body (see the part source code of jqGrid). Moreover the callback onCellSelect will be processed only if beforeSelectRow returns true so only if the row will be selected by the click (see the lines of code).

What you can do as a workaround is just moving your current code of onCellSelect inside of beforeSelectRow:

beforeSelectRow: function (rowid, e) {
    var $self = $(this),
        iCol = $.jgrid.getCellIndex($(e.target).closest("td")[0]),
        cm = $self.jqGrid("getGridParam", "colModel");
    if (cm[iCol].name === "cb") {
        return true;
    }

    if (iCol === 10) {
        OpenPopupWindow(rowid);
    }

    return false;
}

Just small common additional remarks. I would recommend you to change testing for column number to testing for the name of the column: cm[iCol].name === 'myColumnName' instead of iCol === 10. It will make the code more maintainable. Additionally I would recommend you to change the name of function OpenPopupWindow to openPopupWindow. The naming conversion of JavaScript require that one uses function with the first capital name only for constructors. If you choose the name of the function as OpenPopupWindow then you gives the tip to use it with new operator: var test = new OpenPopupWindow(rowid);. You see that even the color of OpenPopupWindow on stackoverflow is another as the color of $.jgrid.getCellIndex. Your current choice looks the same like the statement:

var theVariableHoldOnlyIntegerValues = true; // assign boolean

Renaming the function OpenPopupWindow to openPopupWindow bring the colors in order.

Flagellate

I edited the code just for simplicity. I am using column names. Thank you so much for the detail explanation. That was great info! – Isar

@Max: You are welcome! I'm glad that you didn't taken umbrage because of my remarks about the names. Holding name conversion is really important. I am myself had the same problems because I came from C/C++/C#. – Flagellate