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.

Bottali

Can you post the corresponding HTML or create a jsFiddle? – Goody

If it's a working fiddle then yes it would since it would have both your jQuery AND HTML. – Goody

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

Humour

thank you Oleg, because of you i again learned a new thing..:) – Retrorse

This is it. Thank you Oleg for the comprehensive answer. I was thinking to use the cellIndex and go back to colModel to query for the column name but can't get the syntax right (what a poor programmer!). Also, I learned quite a lot from your other posts on jqgrid issues. Thanks. – Bottali

@biajee: You are welcome! I found your question absolutely correct and voted it up. I think that the persons who down-voted your question just didn't understood the specific of jqGrid context. By the way $td.text() or $grid.jqGrid('getCell', rowId, ci) will get you the cell content. – Humour

Thanks for the cell content and also thanks for the up-vote. My bad as well since originally I only put jqgrid in the tag but no where in the body. – Bottali

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;
});

Antebi

Thanks for the answer. Probably I am dumb, but I still can't figure out how to get the cell information from this. Can you give me an example? Thanks. – Bottali

I understand your point for a generic html element. This question is specific to jqgrid. Suppose you have hundred rows and many columns, and they are generated dynamically. How can I catch the hover event on each cell? – Bottali

Answer 3

Edit

OK, didn't see, that you're using jQuery grid plug-in.

All columns have an attribute role="gridcell" so you could use an attribute-based selector to select all cells:

// untested
$('td[role*="gridcell"]').hover();

First answer

This answer is more like a universal answer to the problem.

I'm assuming you're having a table like this:

<table>
        <tr class="jqgrow">
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
</table>

Than you can get information about the columns within the hovered row with:

$('.jqgrow').mouseover(function(e) {
    // get all child elements (td, th) in an array
    var cols    = $(this).children();
    console.log('All cols: ' + cols);
    // to retrieve a single column as a jQuery object use '.eq()' - it's like every array redo-indexed 
    console.log('HTML from col 2: ' + cols.eq(1).html());
});

This will also work for any other structure like this:

<div class="jqrow">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

If you want to have a hover on every child element of .jqrow you can attach it directly to the children:

$('.jqgrow').children().mouseover(function(e) {
    // gets the current 'column'
    var $this = $(this);
});

Rachellrachelle

This is close, but I am still thinking there should be better jqGrid specific solution. Adding a children() really helps to get the cellIndex. – Bottali

Argh, didn't notice that, sorry. Does the updated answer help? – Rachellrachelle

Sorry, originally I only put "jqgrid" in the tag. Not in the question body. I will try your answer. Thanks. – Bottali

Answer 4

var cm = jQuery("#list1″).jqGrid("getGridParam", "colModel");
var colName = cm[iCol];

Source: http://www.trirand.com/blog/?page_id=393/help/get-column-index-name-oncellselect-event-after-column-reorder/

Lastex

I think as soon as the column index is retrieved, this will be helpful. – Bottali

Answer 5

if you can get the row id then its not difficult to get cell information.

var col=$('#grid').jqGrid('getCell',rowId,columnName);

this will give data for that column.

Retrorse