javascript - What is the exact reverse of onCellSelect function in jqGrid?

Question

My code -

 onCellSelect: function(rowid,iRow,iCol,e)
  {
        jQuery("#createrule").click(function(){
        hidePopup();
        showPopUp6();
      });     
   onCellSelect:

},

What is the exact reverse of onCellSelect function in jqGrid?

Answer 1

You should don't register new click event handler every time if the user click in the grid.

jqGrid register click event handler one during creating the grid. So you can do some actions in case of user click on some cell of the grid. Parameters rowid and iCol helps you to identify which cell was clicked and the e parameter (the Event object of click event) could gives you even more information if required. jqGrid is Open Source project. So you can any time examine the source code to understand better what onCellSelect do and in which context it will be called. Look at the lines of code.

Just an example You can define the following formatter

formatter: function (cellValue, options, rowObject) {
    return "<span class='myLink'>" + cellValue + "</span>";
}

in the column with the name "myColumn" and define the following CSS rule which uses myLink class

.myLink { text-decoration: underline; cursor: pointer; }

You will have "links" in the column.

To detect that the user clicks on such pseudo-link you can use the following onCellSelect callback

onCellSelect: function (rowid, iRow, iCol, e) {
    var $self = $(this), colModel = $self.jqGrid("getGridParam", "colModel");
    if (colModel[iCol].name === "myColumn") { // test for the click in myColumn column
        alert("OK here we can do something");
    }
}

The alert will be displayed on click everywhere in the column, not only on the link. If you want to detect clicking only on the link then we should test e.tagret which is the element which was clicked by the user:

onCellSelect: function (rowid, iRow, iCol, e) {
    var $self = $(this), colModel = $self.jqGrid("getGridParam", "colModel");
    if (colModel[iCol].name === "myColumn" && $(e.tagret).hasClass("myLink")) {
        alert("OK, link is clicked and here we can do something");
    }
}

So onCellSelect can be used to handle click event on every cell of the grid. If you need to suppress selection of the grid additionally then you should use beforeSelectRow instead of onCellSelect. See the answer for example.