JQGrid: How can I mouseover/out only one column in the grid?

Question

In my application I use JQGrid for listing some contacts. I need to show some details when user makes mouseover/mouseout over just one cloumn; for now I am using this code:

gridComplete: function () {
 jQuery('#MyGird').mouseover(function (e) {
      var rowId = $(e.target).parents("tr:first").attr('id');
      var rowdata = jQuery('#MyGird').getRowData(rowId);
      .....
      });
  jQuery('#MyGird').mouseout(function (e) {
      .....
       });
},

But this makes mouseover/mouseout over the entire row.

How can I mouseover/mouseout over just one column from the row?

score 3 · Accepted Answer · answered Nov 16 '11 at 10:24

the following selector grabs all first <td> elements from each <tr> within table#MyGird

$("td:first", $("#MyGird tr")).mouseover(function(e) {

if you don't wont the first row you could use the :eq(index) function like for the second column:

$("td:eq(1)", $("#MyGird tr")).mouseover(function(e) {

score 2 · Answer 2 · edited May 23 '17 at 12:14

You can use

var ci = $.jgrid.getCellIndex(e.target);

inside of any event handle to get the index of the current column. The index in colModel array (jQuery('#MyGird').jqGrid('getGridParam', 'colModel')) can be used to get the value of corresponding name property of the column.

In the most cases e.target will be just DOM element of the cell (<td>) and $.jgrid.getCellIndex will get back the value of cellIndex property.

If the details which you want to show are just a text which are build from some information of the current row you can use cellattr instead of mouseover and mouseout. See the answer for more information.

JQGrid: How can I mouseover/out only one column in the grid?

2 Answers2