jQuery Grid Plugin - jqGrid

Hi,

I am having tough time in getting the column value while I click on the + button of the main grid to show the subgrid. This column value will be passed as a parameter to subgrid (see below in bold)

Below is the code

<script type="text/javascript">

//<![CDATA[

$(function(){

$("#list").jqGrid({

url:"venue_listings.asp",

datatype: 'xml',

mtype: 'POST',

colNames:['Venue ID', 'Navigate', 'Record Date & Time', 'Venue Name', 'Venue Address', 'Has Floors'],

colModel :[

{name:'PK_VenueID', index:'PK_VenueID', width: 55, sortable:false, align:'center', hidden:false, sortable: true},

{name:'RowNavig', index:'RowNavig', width:140, sortable:false, align:'center', hidden:false, sortable: false},

{name:'RecordAddDateTime', index:'RecordAddDateTime', width:150, sortable:false, align:'center', hidden:false, sortable: true},

{name:'VenueName', index:'VenueName', width:250, sortable:true, align:'left', hidden:false, sortable: true},

{name:'VenueAddress', index:'VenueAddress', width:265, align:'left', hidden:false, sortable: true},

{name:'HasFloors', index:'HasFloors', width:80, align:'center', hidden:false, sortable: true}

],

rowNum:50,

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

pager: '#pager',

sortname: 'PK_VenueID',

sortorder: 'asc',

viewrecords: true,

rownumbers: true,

ignoreCase: true,

subGrid: true,

gridview: true,

caption: 'BELOW LIST SHOWS ALL THE VENUES WHICH ARE LISTED CURRENTLY IN THE DATABASE',

multiselect: false,

autowidth: true,

shrinkToFit: false,

height: 450,

subGridRowExpanded: function(subgrid_id, row_id)

{

// we pass two parameters

// subgrid_id is a id of the div tag created whitin a table data

// the id of this elemenet is a combination of the "sg_" + id of the row

// the row_id is the id of the row

// If we wan to pass additinal parameters to the url we can use

// a method getRowData(row_id) – which returns associative array in type name-value

// here we can easy construct the flowing

var subgrid_table_id, pager_id;

subgrid_table_id = subgrid_id+"_t";

pager_id = "p_"+subgrid_table_id;

$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");

jQuery("#"+subgrid_table_id).jqGrid({

url:"venue_list_floors.asp?q=2&venid"+ row_id,

datatype: "xml",

colNames: ['Floor ID','Floor Name', 'File/Image', 'Navigate'],

colModel: [

{name:"PK_VenueFloorID",index:"PK_VenueFloorID", width:50, key:true, align:"center", hidden:false, sortable:true},

{name:"VenueFloorName",index:"VenueFloorName", width:100, key:false, align:"left", sortable:true},

{name:"FileImage",index:"FileImage", width:100, key:false, align:"center", sortable:false},

{name:"SubRowNavig",index:"SubRowNavig", width:60, key:false, align:"center", sortable:false}

],

rowNum:50,

pager: pager_id,

rownumbers: true,

sortname: 'PK_VenueFloorID',

sortorder: "asc",

autowidth: true,

height: '100%'

});

jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false, search:false, refresh:true});

},

subGridRowColapsed: function(subgrid_id, row_id)

{

// this function is called before removing the data

var subgrid_table_id;

subgrid_table_id = subgrid_id+"_t";

jQuery("#"+subgrid_table_id).remove();

},

}).navGrid('#pager',{edit:false, add:false, del:false, search:false, refresh:true});

});

//]]>

</script>