My code is working for the Agents, Labs and Investigator's grid, but when I add the last grid 'Vaccines', the grid does not display. According to firebug there is a "TypeError:W.localdata is undefined"
It seems to be a problem with my orders3 data, but I can't figure out what.
Can anyone help me?
<!DOCTYPE html>
<html lang="en">
<body>
<script type="text/javascript">
$(document).ready(function () {
//var url = "../agents.txt";
var data1,data2,data3,data4,data5;
$.getJSON("newdata3.php?level=1", function(json){
data1 =json;
})
.success(function() {
$.getJSON("newdata3.php?level=2", function(json){
data2 =json;
})
.success(function() {
$.getJSON("newdata3.php?level=3", function(json){
data3 =json;
});
$.getJSON("newdata3.php?level=4", function(json){
data4 =json;
});
$.getJSON("newdata3.php?level=5", function(json){
data5=json;
})
.success(function() {
$('#load').hide();
var source =
{
datafields: [
{ name: 'AgentName' },
{ name: 'StudyName' },
{ name: 'INDno' },
{ name: 'Sponsor' },
{ name: 'StudyStatus' }
],
id:'StudyName',
record:'StudyName',
localdata:data1
};
var employeesAdapter = new $.jqx.dataAdapter(source);
var ordersSource =
{
datafields: [
{ name: 'StudyName', type: 'string' },
{ name: 'SiteName', type: 'string' },
{ name: 'PIName', type: 'string' },
{ name: 'SiteStatus', type: 'string' },
{ name: 'IRBappcr', type: 'string' },
{ name: 'Ohrp', type: 'string' },
{ name: 'Ib', type: 'string' },
{ name: 'Prot', type: 'string' },
{ name: 'Ic', type: 'string' },
{ name: 'Global1572', type: 'string' },
{ name: '1572', type: 'string' },
{ name: 'amtrackid', type: 'string' }
],
id:'amtrackid',
record:'amtrackid',
localdata:data2
};
var ordersDataAdapter = new $.jqx.dataAdapter(ordersSource, { autoBind: true });
orders = ordersDataAdapter.records;
var nestedGrids = new Array();
var ordersSource1 =
{
datafields: [
{ name: 'LabId', type: 'integer' },
{ name: 'amtrackid', type: 'string' },
{ name: 'Name', type: 'string' },
{ name: 'Cap', type: 'integer' },
{ name: 'Clia', type: 'integer' },
{ name: 'LNV', type: 'integer' }
],
id:'amtrackid',
record:'amtrackid',
localdata:data3
};
var ordersDataAdapter1 = new $.jqx.dataAdapter(ordersSource1, { autoBind: true });
orders1 = ordersDataAdapter1.records;
var nestedGrids1 = new Array();
var ordersSource2 =
{
datafields: [
{ name: 'PersonId', type: 'integer' },
{ name: 'amtrackid', type: 'string' },
{ name: 'Name', type: 'string' },
{ name: 'CV', type: 'integer' },
{ name: 'ML', type: 'integer' },
{ name: 'FD', type: 'integer' },
{ name: 'HSPT', type: 'integer' },
{ name: 'DOT', type: 'integer' },
{ name: 'PISORT', type: 'integer' }
],
id:'amtrackid',
record:'amtrackid',
localdata:data4
};
var ordersDataAdapter2 = new $.jqx.dataAdapter(ordersSource2, { autoBind: true });
orders2 = ordersDataAdapter2.records;
var nestedGrids2 = new Array();
var ordersSource3 =
{
datafields: [
{ name: 'amtrackid', type: 'string' },
{ name: 'Ibc', type: 'integer' },
{ name: 'Obarac', type: 'integer' }
],
id:'amtrackid',
record:'amtrackid',
localdata:data5
};
var ordersDataAdapter3 = new $.jqx.dataAdapter(ordersSource3, { autoBind: true });
orders3 = ordersDataAdapter3.records;
var nestedGrids3 = new Array();
// create nested grid.
var initrowdetails1 = function (index, parentElement, gridElement, record) {
var id = record.amtrackid.toString();
grid = $($(parentElement).children()[0]);
nestedGrids1[index] = grid;
grid1= $($(parentElement).children()[1]);
nestedGrids2[index] = grid1;
grid2= $($(parentElement).children()[2]);
nestedGrids3[index] = grid2;
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = id;
var filtercondition = 'equal';
var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
// fill the orders depending on the id.
var ordersbyid1 = [];
var ordersbyid2 = [];
var ordersbyid3 = [];
for (var m = 0; m < orders1.length; m++) {
var result = filter.evaluate(orders1[m]["amtrackid"]);
if (result)
ordersbyid1.push(orders1[m]);
};
for (var m = 0; m < orders2.length; m++) {
var result = filter.evaluate(orders2[m]["amtrackid"]);
if (result)
ordersbyid2.push(orders2[m]);
};
for (var m = 0; m < orders3.length; m++) {
var result = filter.evaluate(orders3[m]["amtrackid"]);
if (result)
ordersbyid3.push(orders3[m]);
}
var orderssource1 = { datafields: [
{ name: 'LabId', type: 'integer' },
{ name: 'Name', type: 'string' },
{ name: 'Cap', type: 'integer' },
{ name: 'Clia', type: 'integer' },
{ name: 'LNV', type: 'integer' }
],
id: 'LabId',
record: 'LabId',
localdata: ordersbyid1
}
var orderssource2 = { datafields: [
{ name: 'PersonId', type: 'integer' },
{ name: 'Name', type: 'string' },
{ name: 'CV', type: 'integer' },
{ name: 'ML', type: 'integer' },
{ name: 'FD', type: 'integer' },
{ name: 'HSPT', type: 'integer' },
{ name: 'DOT', type: 'integer' },
{ name: 'PISORT', type: 'integer' }
],
id: 'PersonID',
record: 'PersonID',
localdata: ordersbyid2
}
var orderssource3 = { datafields: [
{ name: 'amtrackid', type: 'string' },
{ name: 'Ibc', type: 'integer' },
{ name: 'Obarac', type: 'integer' }
],
id: 'amtrackid',
record: 'amtrackid',
localdata: ordersbyid3
}
var nestedGridAdapter1 = new $.jqx.dataAdapter(orderssource1);
var nestedGridAdapter2 = new $.jqx.dataAdapter(orderssource2);
var nestedGridAdapter3 = new $.jqx.dataAdapter(orderssource3);
if (grid != null) {
grid.jqxGrid({
source: nestedGridAdapter1, theme: 'fresh', autoheight: true, width: '100%',
columns: [
//{ text: '<b>Lab ID</b>', datafield: 'LabId', width: '10%' },
{ text: '<b>Lab</b>', datafield: 'Name', width: '50%' },
{ text: '<b>CAP</b>', datafield: 'Cap', width: '17%' },
{ text: '<b>CLIA</b>', datafield: 'Clia', width: '17%' },
{ text: '<b>LNV</b>', datafield: 'LNV', width: '16%' }
]
});
grid1.jqxGrid({
source: nestedGridAdapter2, theme: 'fresh', autoheight: true,width: '100%',
columns: [
//{ text: '<b>Person ID</b>', datafield: 'PersonId', width: '10%' },
{ text: '<b>Investigator</b>', datafield: 'Name', width: '35%' },
{ text: '<b>CV</b>', datafield: 'CV', width: '13%' },
{ text: '<b>FD</b>', datafield: 'FD', width: '13%' },
{ text: '<b>ML</b>', datafield: 'ML', width: '13%' },
{ text: '<b>HSPT</b>', datafield: 'HSPT', width: '13%' },
{ text: '<b>DOT</b>', datafield: 'DOT', width: '13%' }
//{ text: '<b>PISORT</b>', datafield: 'PISORT', width: '10%' }
]
});
grid2.jqxGrid({
source: nestedGridAdapter3, theme: 'fresh', autoheight: true,width: '100%',
columns: [
{ text: '<b>AmtrackID</b>', datafield: 'amtrackid', width: '10%' },
{ text: '<b>IBC</b>', datafield: 'Ibc', width: '45%' },
{ text: '<b>OBARAC</b>', datafield: 'Obarac', width: '45%' }
]
});
}
};
//////////////////////////////////////
// create nested grid.
var initrowdetails = function (index, parentElement, gridElement, record) {
var id = record.uid.toString();
var grid = $($(parentElement).children()[0]);
nestedGrids[index] = grid;
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = id;
var filtercondition = 'equal';
var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
// fill the orders depending on the id.
var ordersbyid = [];
for (var m = 0; m < orders.length; m++) {
var result = filter.evaluate(orders[m]["StudyName"]);
if (result)
ordersbyid.push(orders[m]);
}
var orderssource = { datafields: [
{ name: 'StudyName', type: 'string' },
{ name: 'SiteName', type: 'string' },
{ name: 'PIName', type: 'string' },
{ name: 'SiteStatus', type: 'string' },
{ name: 'IRBappcr', type: 'string' },
{ name: 'Ib', type: 'string' },
{ name: 'Ohrp', type: 'string' },
{ name: 'Prot', type: 'string' },
{ name: 'Ic', type: 'string' },
{ name: 'Global1572', type: 'string' },
{ name: '1572', type: 'string' },
{ name: 'amtrackid', type: 'integer'}
],
id: 'StudyName',
localdata: ordersbyid
}
var nestedGridAdapter = new $.jqx.dataAdapter(orderssource);
if (grid != null) {
grid.jqxGrid({ height: 500,rowdetails: true, theme: 'fresh', initrowdetails: initrowdetails1, source: nestedGridAdapter, width: '100%',
rowdetailstemplate: { rowdetailsheight: 600, rowdetails: "<div id='subgrid" + i + "' '></div><div id='subgridd" + i + "' '></div><div id='subgriddd" + i + "' '></div>", rowdetailshidden: true },
columns: [
{ text: '<b>Site</b>', datafield: 'SiteName', width: '20%' },
{ text: '<b>PI</b>', datafield: 'PIName', width: '20%' },
{ text: '<b>Site Status</b>', datafield: 'SiteStatus', width: '11%' },
{ text: '<b>IRB APPCR</b>', datafield: 'IRBappcr', width: '7%' },
{ text: '<b>OHRP</b>', datafield: 'Ohrp', width: '7%' },
{ text: '<b>IB</b>', datafield: 'Ib', width: '7%' },
{ text: '<b>PROT</b>', datafield: 'Prot', width: '7%' },
{ text: '<b>IC</b>', datafield: 'Ic', width: '7%' },
{ text: '<b>Global1572</b>', datafield: 'Global1572', width: '7%' },
{ text: '<b>1572</b>', datafield: '1572', width: '7%' },
]
});
}
};
///////////////////////////
var renderer = function (row, column, value) {
return '<span style="margin-left: 4px; margin-top: 9px; float: left;">' + value + '</span>';
}
// create jqxgrid
$("#jqxgrid").jqxGrid(
{
width: '90%',
autoheight: true,
//height: '100%',
source: source,
rowdetails: true,
theme:'fresh',
initrowdetails: initrowdetails,
rowdetailstemplate: { rowdetailsheight: 300, rowdetails: "<div id='grid'></div>", rowdetailshidden: true },
//ready: function () {
// $("#jqxgrid").jqxGrid('showrowdetails', 0);
//},
columns: [
{ text: '<b>Agent Name</b>', datafield: 'AgentName', width: '30%', cellsrenderer: renderer },
{ text: '<b>Study</b>', datafield: 'StudyName', width: '30%', cellsrenderer: renderer },
{ text: '<b>IND No.</b>', datafield: 'INDno', width: '10%', cellsrenderer: renderer },
{ text: '<b>Sponsor</b>', datafield: 'Sponsor', width: '10%', cellsrenderer: renderer },
{ text: '<b>Current Status</b>', datafield: 'StudyStatus', width: '20%', cellsrenderer: renderer }
]
});
});
});
});
});
<body class='default'><center><table style= "width: 100%;">
<div id="jqxgrid">
</div></table></center>
<img id="load" src="loading.gif" alt="Smiley face" height="250px" width="400px">
</body>
</html>