jQuery Grid Plugin - jqGrid

Okay I'm almost there. I have create a new grid in tab working using the OnSelectRow.

But I need to get this to work utilizing individual cells or icons. I've not been able to find a simale function as OnSelectRow for a single cell.

Here is my code:

<script type="text/javascript">

var mygrid = jQuery("#calllisting2").jqGrid({

url: 'server.php?q=calllisting',

datatype: "json",

mtype: "GET",

height: 400,

width: 750,

colNames:["id","Call#","View","Region","Sales Office", "Team", "Manager", "Property", "Period", "Call Date", "Score"],

colModel:[

{name: 'id',index:'id', width:1,hidden:true,key:true},

{name: 'callnumber',index:'callnumber', width:55, align:"right"},

{name: 'view', width: 30, sortable: false, search: false, align: "center",

formatter:function(cellvalue){

return "<a class='ui-icon ui-icon-document' >View Call Report</a>";

}},

{name: 'region',index:'region', width:80, align:"left",

stype:'select', editoptions:{value:":All;<?php

echo $region;

?>"} },

{name: 'salesoffice',index:'salesoffice', width:80, align:"left",

stype:'select', editoptions:{value:":All;<?php

echo $salesoffice;

?>"} },

{name: 'manager',index:'manager', width:80, align:"left",

stype:'select', editoptions:{value:":All;<?php

echo $manager;

?>"} },

{name: 'agent',index:'agent', width:120, align:"left",

stype:'select', editoptions:{value:":All;<?php

echo $agent;

?>"} },

{name: 'property',index:'property', width:70, align:"left",

stype:'select', editoptions:{value:":All;<?php

echo $property;

?>"} },

{name: 'periodid',index:'periodid', width:60, align:"center", stype:'select',

editoptions:{value:":All;2007-02:2007-02;2007-03:2007-03"}},

{name: 'reportdate',index:'reportdate', width:70, align:"center", sorttype:'date', datefmt:"Y-m-d",

searchoptions:{dataInit:function(el){$(el).datepicker({dateFormat:'yyyy-mm-dd'});} }},

{name: 'score',index:'score', width:54, align:"right", sorttype:'number', formatter:'number',formatoptions:{decimalPlaces:1, suffix: " %"} }

],

rowNum: 50,

rowList : [20,30,50,100],

rownumbers: true,

rownumWidth: 40,

gridview: true,

sortname: 'callnumber',

viewrecords: true,

sortorder: "asc",

pager : "#pcalllisting2",

userdata: "userdata",

caption: "Call Listing Report",

recordtext: "View {0} - {1} of {2} <span id=avgscore>Avg Score 100%</span>",

emptyrecords: "No records to view <span id=avgscore>Avg Score 100%</span>",

loadComplete: function printAvg() {

var txt = document.getElementById('avgscore');

txt.innerHTML = "Avg: "+jQuery("#calllisting2").jqGrid('getGridParam', 'userData' )['avgscore'] +" %";

},

onSelectRow: function(rowid) {

var rowdata = $("#calllisting2").jqGrid('getRowData',rowid);

var callurl = "./calldetail.php?callnumber="+rowdata.callnumber;

var st = "#t"+rowdata.callnumber;

if($(st).html() != null ) {

maintab.tabs('select',st);

} else {

maintab.tabs('add',st, rowdata.callnumber);

$.ajax({

url: callurl,

type: "GET",

dataType: "html",

complete : function (req, err) {

$(st,"#tabs").append(req.responseText);

$(st,"#tabs");

}

});

}

}

});