jQuery Grid Plugin - jqGrid

Hi, I'm trying to do a mouseover for the jquery and when the mouse is hovered over a certain row I can get the id from that row and populate information and display an image.  However, I have been having the hardest time trying to do so.

Here is what I want to happen

Just like in the onSelectRow where I obtain the data using the following code

var ret = $('#list').jqGrid('getRowData', Id);

I want to use when I do a mouseover.  However, I don't see a way of doing this.  I tried the following under gridComplete

gridComplete: function() {'.jqgrow').mouseover(function(e) {

var rowId = $('.jqgrow').parent(tr:first).attr('id');

alert("You rolled over " + rowId.Id);

});

}

but it only gave me the ide number of the row of that table inside the jqgrid and I need the data from that row instead.

For instance, in my data I have Id, FirstName, LastName, FullName, Title, SortID

I would like to present a picture on the right side of my HTML page when hovered over certain rows by passing the Id to the HTML page, and querying through an array.  If I can some how get the actual Id that's within my dataset I can do the rest.

Any help would be lovely.

I have given the entire code of my jqGrid at the bottom for reference.

jQuery("#list").jqGrid({

url:

'/Providers/DynamicGridData/',

datatype:

'json',

mtype:

'GET',

colNames: [

'Id', 'LastName', 'FirstName', 'FullName', 'Title', 'Url', 'SortId'],

colModel: [

{ name:

'Id', index: 'Id', width: 30, align: 'left', hidden: true },

{ name:

'LastName', index: 'LastName', width: 30, align: 'left', hidden: true },

{ name:

'FirstName', index: 'FirstName', width: 30, align: 'left', hidden: true },

{ name:

'FullName', index: 'FullName', width: 100, align: 'left' },

/*{ name: 'FirstName', index: 'FirstName', width: 100, align: 'left' },*/

{name:

'Title', index: 'Title', width: 200, align: 'left' },

{ name:

'Url', index: 'Url', width: 30, align: 'left', hidden: true },

{ name:

'SortId', index: 'SortId', width: 30, align: 'left', hidden: true}],

pager: jQuery(

'#pager'),

rowNum: 10,

rowList: [5, 10, 20, 50],

sortname:

'Id',

scrollOffset: 0,

width:

'425',

altRows:

'true',

altClass:

'ui-priority-secondary',

autowidth:

'true',

height:

'300',

altRows:

'true',

altClass:

'ui-priority-secondary',

viewrecords:

true,

caption:

'Clinical Providers',

onSelectRow:

function() {

var Id = $("#list").jqGrid('getGridParam', 'selrow');

if (Id) {

var ret = $('#list').jqGrid('getRowData', Id);

var url = ret.Url;

url.split(

' ').join('');

//alert("id=" + ret.Id + "FullName=" + ret.FullName + "...");

window.location =

"/" + url;

}

else { alert("Please select a row"); }

},

gridComplete:

function() {

$(

'.jqgrow').mouseover(function(e) {

var rowId = $('.jqgrow').

alert("You rolled over " + rowId.Id);

});

}

});