How to retrieve the cell information for mouseover event in jqGrid

Question

This question is specific to jqGrid. I learned that we can use .jqgrow item with mouseover event to retrieve the row information like the following:

gridComplete: function () {
  $('.jqgrow').mouseover(function(e) {
    var rowId = $(this).attr('id');
    console.log('You rolled over ' + rowId);
  });
}

My question is how can we retrieve the column information, cell name information and cell content information in such an event. Thanks in advance.

Answer 1

First of all you don't need to bind mouseover on every row. It's enough to bind the event once on the whole grid body. The e parameter of the event has target property which are initialized to the object which is the origin of the mouseover event. So you can use jQuery.closest to find the <td> and <tr> elements which are in the current context. In the way you save memory and improve a little the performance of the solution.

The demo shows how all works in jqGrid. The code which are used is

var cm = $grid.jqGrid('getGridParam', 'colModel');
$grid.mouseover(function(e) {
    var $td = $(e.target).closest('td'), $tr = $td.closest('tr.jqgrow'),
        rowId = $tr.attr('id'), ci;
    if (rowId) {
        ci = $.jgrid.getCellIndex($td[0]); // works mostly as $td[0].cellIndex
        if (console) {
            console.log('You rolled over the row with id="' + rowId +
               '" in the column ' + cm[ci].name);
        }
    }
});

The output which will be produced by the demo looks like the following

LOG: You rolled over the row with id="10" in the column note 
LOG: You rolled over the row with id="10" in the column ship_via 
LOG: You rolled over the row with id="9" in the column ship_via 
LOG: You rolled over the row with id="8" in the column ship_via 
LOG: You rolled over the row with id="8" in the column total 
LOG: You rolled over the row with id="7" in the column total 
LOG: You rolled over the row with id="7" in the column tax 
LOG: You rolled over the row with id="6" in the column tax 
LOG: You rolled over the row with id="6" in the column amount 
LOG: You rolled over the row with id="5" in the column amount 
LOG: You rolled over the row with id="4" in the column amount 
LOG: You rolled over the row with id="4" in the column invdate 
LOG: You rolled over the row with id="3" in the column invdate 
LOG: You rolled over the row with id="3" in the column name 
LOG: You rolled over the row with id="2" in the column name 
LOG: You rolled over the row with id="1" in the column name

Answer 2

It has nothing to do with the .jqgrow class.

It has to do with the event, which will set this to the dom element on which the event occurred.

So meaning if this is the HTML:

<div class="jqgrow" data-id="232" id="blabla">Text</div>

Then this will be that HTML on mouseover. Which you can do anything with you like.

$('.jqgrow').mouseover(function(e) {
  var id = $(this).attr('id');
  var dataId = $(this).data('id');
  var html = this;
});