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