jQuery Grid Plugin - jqGridForum

Forum

November 2nd, 2014

A A A

Topic RSS

Issue with multiple sub grids on a single page

10/02/2012
00:17

dougis

Mountain View, CA

New Member

Members

Forum Posts: 2

Member Since:
10/02/2012

Offline

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

And here is the one which does not

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">

<head>

<title>Customer Listing</title>

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>

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>

</div>

<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>

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

<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 />

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

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

<label for="rState">State:</label><input id="rState" name="rState" 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>

</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.

10/02/2012
18:14

dougis

Mountain View, CA

New Member

Members

Forum Posts: 2

Member Since:
10/02/2012

Offline

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

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
49 Guest(s)

Currently Browsing this Page:
1 Guest(s)