jQuery Grid Plugin - jqGrid - Topic: Issue with multiple sub grids on a single page http://www.trirand.com/blog/?page_id=393/help/issue-with-multiple-sub-grids-on-a-single-page Simple:Press Version 5.7.5.3 dougis on Issue with multiple sub grids on a single page http://www.trirand.com/blog/?page_id=393/help/issue-with-multiple-sub-grids-on-a-single-page#p25924 Help http://www.trirand.com/blog/?page_id=393/help/issue-with-multiple-sub-grids-on-a-single-page#p25924 Issue was related to the key used for data extracted. Changed primary data key to use an int instead of a string and that fixed the issue

]]> Fri, 10 Feb 2012 18:14:22 +0200 dougis on Issue with multiple sub grids on a single page http://www.trirand.com/blog/?page_id=393/help/issue-with-multiple-sub-grids-on-a-single-page#p25911 Help http://www.trirand.com/blog/?page_id=393/help/issue-with-multiple-sub-grids-on-a-single-page#p25911 I have a page which I am using to show customer data.

there is a main grid (with sub grid data) and child grids.

Some of the child grids also have sub grids, but I can only get one of them to work.

Here is a screen shot of the sub grid which works

Sub Grid workingImage Enlarger

And here is the one which does not

Non Working gridImage Enlarger

The XML being returned by the server script is the same for each of the sub grids (slightly different where clauses but the same content)

And here is the HTML page itself.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Customer Listing</title>

<link rel="stylesheet" type="text/css" media="screen" href="css/redmond/jquery-ui-1.8.15.custom.css" />

<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

<link rel="stylesheet" href="/styles/register.css" type="text/css" />

<style type="text/css">

html, body {

margin: 10px;

padding: 1px;

font-size: 90%;

}

#custInfo

{

background-color: #f3f3f3;

border: solid 1px #a1a1a1;

padding: 4px;

width: 600px;

}

#custInfo label, #custInfo input

{

display: block;

width: 240px;

float: left;

margin-bottom: 5px;

}

#custInfo label

{

width: 90px;

text-align: right;

padding-right: 20px;

}

#custInfo br

{

clear: left;

}

#custLinks form

{

display:inline;

}

</style>

<script language="javascript" type="text/javascript" src="/javascript/pageDisplayLib.js"></script>

<script language="javascript" type="text/javascript" src="/javascript/ajax_lib.js"></script>

<script language="javascript" type="text/javascript" src="/javascript/regFuncs.js"></script>

<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>

<script src="js/jquery-ui-1.8.15.custom.min.js" type="text/javascript"></script>

<script src="js/grid.locale-en.js" type="text/javascript"></script>

<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

<script type="text/javascript">

var requestType = self.location.protocol;

if (requestType != "https:")

{

//var newHREF = "https://" + self.location.href.substr(self.location.href.indexOf("://") + 3);

//alert("would redirect to " + newHREF);

self.location.replace("https://" + self.location.href.substr(self.location.href.indexOf("://") + 3));

}

function setFormDests(whichID)

{

var acctForm = document.forms["myacct"];

var onoffForm = document.forms["onoff"];

var pwForm = document.forms["changePW"];

var creditForm = document.forms["creditDL"];

var secureRoot = "https://" + self.location.host;

acctForm.action = secureRoot + '/cgi-bin/myAccount.cgi';

onoffForm.action = secureRoot + '/cgi-bin/utils/acct_on_off_choice.cgi';

pwForm.action = secureRoot + '/cgi-bin/regStep2.cgi';

// if we don't get an ID passed in then set them to blank and disable

if (whichID == null)

{

onoffForm.elements["submit"].disabled = true;

acctForm.elements["submit"].disabled = true;

pwForm.elements["submit"].disabled = true;

}

else

{

var data = $("#custlist").jqGrid('getRowData', whichID);

// is this a TrackMaster customer

if (data.cust_type == "TrackMaster")

{

onoffForm.elements["userid"].value = whichID;

acctForm.elements["rUserID"].value = whichID;

pwForm.elements["rUserID"].value = whichID;

pwForm.elements["UserIDShow"].value = whichID;

creditForm.elements["userID"].value = whichID;

pwForm.elements["rFirstName"].value = strip(data.first_name);

pwForm.elements["rLastName"].value = strip(data.last_name);

pwForm.elements["LastNameShow"].value = strip(data.last_name);

pwForm.elements["rAddress"].value = strip(data.address);

pwForm.elements["rCity"].value = strip(data.city);

pwForm.elements["rState"].value = strip(data.state);

pwForm.elements["rZip"].value = strip(data.zip);

pwForm.elements["rPhone"].value = strip(data.phone);

pwForm.elements["reMail"].value = strip(data.email);

onoffForm.elements["submit"].disabled = false;

acctForm.elements["submit"].disabled = false;

pwForm.elements["rPasswd"].disabled = false;

pwForm.elements["submit"].disabled = false;

$("#custLinks").show();

jQuery("#paymntData").jqGrid('setGridParam',{url:"custPayments.php?q=1&id="+whichID,page:1});

jQuery("#paymntData").jqGrid('setCaption',"Payments made by: "+whichID)

.trigger('reloadGrid');

jQuery("#invData").jqGrid('setGridParam',{url:"custInvoices.php?q=1&id="+whichID,page:1});

jQuery("#invData").jqGrid('setCaption',"Open Invoices for: "+whichID)

.trigger('reloadGrid');

jQuery("#itemsData").jqGrid('setGridParam',{url:"custActionItems.php?q=1&id="+whichID,page:1});

jQuery("#itemsData").jqGrid('setCaption',"Action Items for: "+whichID)

.trigger('reloadGrid');

jQuery("#dnldData").jqGrid('setGridParam',{url:"custDownloads.php?q=1&id="+whichID,page:1});

jQuery("#dnldData").jqGrid('setCaption',"Downloads for: "+whichID)

.trigger('reloadGrid');

}

else if(data.cust_type == "Players Club")

{

acctForm.elements["rUserID"].value = whichID;

pwForm.elements["rUserID"].value = whichID;

pwForm.elements["UserIDShow"].value = whichID;

pwForm.elements["rFirstName"].value = strip(data.first_name);

pwForm.elements["rLastName"].value = strip(data.last_name);

pwForm.elements["LastNameShow"].value = strip(data.last_name);

pwForm.elements["reMail"].value = strip(data.email);

acctForm.elements["submit"].disabled = false;

pwForm.elements["rPasswd"].disabled = false;

pwForm.elements["submit"].disabled = false;

$("#custLinks").show();

//$("#custInfo").show();

pwForm.action = secureRoot + '/cgi-bin/updateFreeInfo.cgi';

}

else

{

setFormDests(null);

}

}

}

function strip(html)

{

var tmp = document.createElement("DIV");

tmp.innerHTML = html;

return tmp.textContent||tmp.innerText;

}

function toggleDLCredit(product, fileName, isCredit)

{

var creditForm = document.forms["creditDL"];

var errText = "";

if (isCredit == "0" || isCredit == "C")

{

var userID = creditForm.elements["userID"].value;

var theLabel = "credit";

if (isCredit == "0")

{

theLabel = "remove the credit from";

}

var answer = confirm("Are you sure you want to " + theLabel + " the downloads of " + fileName + " by user " + userID + "?");

if (answer)

{

creditForm.elements["prodCode"].value = product;

creditForm.elements["downloadedFile"].value = fileName;

creditForm.elements["setStatusTo"].value = isCredit;

creditForm.submit();

}

}

else

{

alert("Invalid paramter passed for download status");

}

}

$(function()

{

$( "#tabs" ).tabs();

$("#custlist").jqGrid({

url:'custData.php',

datatype: 'xml',

mtype: 'GET',

height: 50,

colNames:['CUSTNO','User ID','Last Name','First Name', 'City','State', 'Zip', 'Phone', 'Email','Address','Last Download','Type of Cust'],

colModel :[

{name:'custno', index:'custno', width:55, search:true, stype:'text'},

{name:'custom_id', index:'custom_id', width:100},

{name:'last_name', index:'last_name', width:100},

{name:'first_name', index:'first_name', width:90},

{name:'city', index:'city', width:100, search:true},

{name:'state', index:'state', width:50, search:true},

{name:'zip', index:'zip', width:60, align:'right'},

{name:'phone', index:'phone', width:90, align:'right', searchoptions:{sopt:['cn']}},

{name:'email', index:'email', width:150, searchoptions:{sopt:['cn']}},

{name:'address', index:'address', width:200, searchoptions:{sopt:['cn']}},

{name:'last_dl', index:'last_dl', width:120, search:false},

{name:'cust_type', index:'cust_type', width:120, search:true, stype:'select', searchoptions:{sopt:['eq'],value:{'':'Any','TrackMaster':'TrackMaster','Equibase':'Equibase','Players Club':'Players Club'}}}

],

pager: '#pager',

rowNum:15,

rowList:[15,20,30],

sortname: 'first_name',

sortorder: 'asc',

viewrecords: true,

gridview: true,

subGrid : true,

subGridUrl: 'custCCData.php?q=2',

subGridModel: [{ name : ['Method','Last 4','Exp Date','First','Last','Balance'],

width : [60,60,70,90,100,60],

align : ['center', 'center', 'center', 'left', 'left', 'right'] }

],

caption: 'Customer List',

onSelectRow: function(customId)

{

setFormDests(customId);

}

});

$("#custlist").jqGrid('navGrid','#pager',{del:false,add:false,edit:false,search:false});

$("#custlist").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : true});

// Set up the grid for open invoices

$("#invData").jqGrid({

url:'custInvoices.php?q=1&id=0',

datatype: 'xml',

mtype: 'GET',

height: 350,

colNames:['Date','Amount', 'Balance', ''],

colModel :[

{name:'invDate', index:'invDate', width:100, search:false},

{name:'total', index:'total', width:100, align:'right' },

{name:'balance', index:'balance', width:100 , align:'right' },

{name:'buffer', index:'buffer', width:710}

],

pager: '#invoicePager',

rowNum:15,

rowList:[15,20,30],

sortname: 'invDate',

sortorder: 'desc',

viewrecords: true,

gridview: true,

subGrid : true,

subGridUrl: 'custInvDetails.php?q=2',

subGridModel: [{ name : ['Product','Quantity','Price','Tax','Total','Details'],

width : [140,40,40,40,50,480],

align : ['left', 'right', 'right', 'right', 'right', 'left'] }

],

caption: 'Open Invoices'

});

$("#invData").jqGrid('navGrid','#invoicePager',{del:false,add:false,edit:false,search:false});

// set up the grid for Payemnts

$("#paymntData").jqGrid({

url:'custPayments.php?q=1&id=0',

datatype: 'xml',

mtype: 'GET',

height: 350,

colNames:['Date','Amount', 'Balance', 'Method', 'Details'],

colModel :[

{name:'dateMade', index:'dateMade', width:100, search:false},

{name:'amount', index:'amount', width:100, align:'right' },

{name:'balance', index:'balance', width:100, align:'right' },

{name:'method', index:'method', width:100},

{name:'tranDetails', index:'tranDetails', width:310}

],

pager: '#paymntPager',

rowNum:15,

rowList:[15,20,30],

sortname: 'dateMade',

sortorder: 'desc',

viewrecords: true,

gridview: true,

subGrid : true,

subGridUrl: 'custPaymentDetails.php?q=2',

subGridModel: [{ name : ['Item','#','Price','Tax','Total','Details'],

width : [300,40,40,40,50,280],

align : ['left', 'right', 'right', 'right', 'right', 'left'] }

],

caption: 'Payments'

});

$("#paymntData").jqGrid('navGrid','#paymntPager',{del:false,add:false,edit:false,search:false});

// set up the grid for Action items (comments, do not renew etc)

$("#itemsData").jqGrid({

url:'custActionItems.php?q=1&id=0',

datatype: 'xml',

mtype: 'GET',

height: 350,

colNames:['Type','details', 'Date Entered', 'Due Date', 'Date complete', 'Entered By', 'Product'],

colModel :[

{name:'actionType', index:'actionType', width:140, search:false},

{name:'comment', index:'comment', width:400},

{name:'entered', index:'entered', width:180},

{name:'dueDate', index:'dueDate', width:180},

{name:'doneDate', index:'doneDate', width:180},

{name:'enteredBy', index:'enteredBy', width:120},

{name:'product', index:'product', width:200}

],

pager: '#itemsPager',

rowNum:15,

rowList:[15,20,30],

sortname: 'none',

sortorder: 'desc',

viewrecords: true,

gridview: true,

subGrid : false,

caption: 'Action Items'

});

$("#itemsData").jqGrid('navGrid','#itemsPager',{del:false,add:false,edit:false,search:false});

// Set up the grid for download info

$("#dnldData").jqGrid({

url:'custDownloads.php?q=1&id=0',

datatype: 'xml',

mtype: 'GET',

height: 350,

colNames:['Dl Date','DL Time', 'File', 'Prod Code', 'Track', 'Race Date', 'Sub Type', 'Billed', '', 'IP Address'],

colModel :[

{name:'dl_date', index:'dl_date', width:140, search:false},

{name:'dl_time', index:'dl_time', width:140},

{name:'file_name', index:'file_name', width:220},

{name:'prod_code', index:'prod_code', width:100},

{name:'track', index:'track', width:100},

{name:'race_date', index:'race_date', width:120},

{name:'sub_type', index:'sub_type', width:90},

{name:'billed', index:'billed', width:80},

{name:'creditIt', index:'creditIt', width:170},

{name:'ipaddress ', index:'ipaddress', width:150}

],

pager: '#downloadPager',

rowNum:15,

rowList:[15,20,30],

sortname: 'none',

sortorder: 'desc',

viewrecords: true,

gridview: true,

subGrid : false,

caption: 'Downloads'

});

$("#dnldData").jqGrid('navGrid','#downloadPager',{del:false,add:false,edit:false,search:false});

// end of the download info section

// End of the jQuery function brackets

});

</script>

</head>

<body>

<div id="custLinks">

<form action="/cgi-bin/utils/acct_on_off_choice.cgi" method="post" id="onoff" name="onoff" target="tmService"><input type="hidden" name="userid" value="" /><input type="submit" value="View Customers On/Off Page" name="submit" disabled="disabled" /></form> <form action="/cgi-bin/myAccount.cgi" method="post" name="myacct" id="myacct" target="tmService"><input type="hidden" name="rUserID" value="" /><input type="submit" value="View Customers My Account Page" name="submit" disabled="disabled" /></form>

<form action="/cgi-bin/utils/creditDownload.cgi" method="post" name="creditDL" id="creditDL" target="tmService"><input type="hidden" name="userID" value="" /><input type="hidden" name="prodCode" value="" /><input type="hidden" name="downloadedFile" value="" /><input type="hidden" name="setStatusTo" value="" /></form>

</div>

<div id="mainscreen">

<table id="custlist"></table>

<div id="pager"></div>

</div>

<div id="tabs">

<ul>

<li><a href="#custInfo">Customer Information</a></li>

<li><a href="#payments">Payments</a></li>

<li><a href="#invoices">Open Invoices</a></li>

<li><a href="#actItems">Action Items</a></li>

<li><a href="#downloads">Downloads</a></li>

</ul>

<div id="custInfo">

<form name="changePW" action="/cgi-bin/regStep2.cgi" method="post" target="tmService">

<input type="hidden" name="product" value="all" />

<input type="hidden" name="update_flag" value="U" />

<input type="hidden" name="loginPW" value="" />

<input type="hidden" name="baseRequest" value="" />

<input type="hidden" name="rUserID" value="" />

<input type="hidden" name="rLastName" value="" />

<h4>You will only be able to change TrackMaster customers</h4>

<label for="UserIDShow">User ID:</label><input id="UserIDShow" name="UserIDShow" type="text" value="" disabled="disabled" /><br />

<input name="submit" type="submit" value="Change users information" disabled="disabled" /><br />

<span id="pwInstructions" >Leave the Password field blank if you do not want to change it</span><br />

<label for="rPasswd">Password:</label><input name="rPasswd" value="" size="20" type="password" onchange="validatePW(this.form)" disabled="disabled" /><br />

<span id="pwFeedback" style='color:red'>&nbsp;</span><br />

<label for="rFirstName">First Name:</label><input id="rFirstName" name="rFirstName" type="text" value="" /><br />

<label for="LastNameShow">Last Name:</label><input id="LastNameShow" name="LastNameShow" type="text" value="" disabled="disabled" /><br />

<label for="rAddress">Address:</label><input id="rAddress" name="rAddress" type="text" value="" /><br />

<label for="rCity">City:</label><input id="rCity" name="rCity" type="text" value="" /><br />

<label for="rState">State:</label><input id="rState" name="rState" type="text" value="" /><br />

<label for="rZip">Zip:</label><input id="rZip" name="rZip" type="text" value="" /><br />

<label for="rPhone">Phone:</label><input id="rPhone" name="rPhone" value="" type="text" /><br />

<label for="reMail">Email:</label><input id="reMail" name="reMail" value="" type="text" onchange="validateEnteredEmail(this.form)" /><br />

</form>

</div>

<div id="payments">

<table id="paymntData"></table>

<div id="paymntPager"></div>

</div>

<div id="invoices">

<table id="invData"></table>

<div id="invoicePager"></div>

</div>

<div id="actItems">

<table id="itemsData"></table>

<div id="itemsPager"></div>

</div>

<div id="downloads">

<table id="dnldData"></table>

<div id="downloadPager"></div>

</div>

</div>

</body>

</html>

I have tried disabling the sub grid on the other tab when it isn't the main (no joy) and renamed the page element.

I would appreciate any help you can provide.

]]> Fri, 10 Feb 2012 00:17:21 +0200