jQWidgets Forums

Tagged: angular grid, grid, jquery grid, jqxgrid, level, n-nested, nested grids

This topic contains 5 replies, has 2 voices, and was last updated by Dimitar 9 years, 9 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Nested Grid not displaying -TypeError:W.localdata is undefined Posts

July 9, 2015 at 2:52 pm Nested Grid not displaying -TypeError:W.localdata is undefined #73583

Participant

Good Morning,

I have created a nested grid that contains 3 levels. At first I created the three levels and last level contained 2 grid (labs and invests). Now, I am trying to add a third grid to level 3, but it doesn’t seem to work. According to firebug I get the “TypeError:W.localdata is undefined”. However, the grid seems to display in IE, but not in Firefox and Chrome. Please help.

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

July 10, 2015 at 6:17 am Nested Grid not displaying -TypeError:W.localdata is undefined #73600

Dimitar

Participant

Hello samaramaiden,

Your code is fairly extensive and it is hard to navigate through it, so, please specify which piece of code initializes the third grid of the third level and where exactly the error is thrown.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

July 10, 2015 at 2:41 pm Nested Grid not displaying -TypeError:W.localdata is undefined #73614

samaramaiden

Participant

The data for the third grid that I want to add to the third level comes from:

$.getJSON("newdata3.php?level=5", function(json){
data5=json;
})

Here it is the grid:

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();
};

July 14, 2015 at 7:06 am Nested Grid not displaying -TypeError:W.localdata is undefined #73695

Dimitar

Participant

Hi samaramaiden,

Maybe there is some issue related to the asynchronicity when getting the data for data3, data4 and data5 with getJSON (each one should be called on the previous one’s success). That being said, we recommend populating the parent and nested grids directly through data adapter, as shown in the Nested Grids demo.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

July 17, 2015 at 3:32 pm Nested Grid not displaying -TypeError:W.localdata is undefined #73890

samaramaiden

Participant

Finally working. The only problem now is that the scrollbar doesn’t seem to be working for the last 3 grids. The data gets cut off, unless I super increase the size of the high level grid so it can display all the data. I thought that by default the nested grids get the scrollbar if there is more data than the size of the grid?

July 20, 2015 at 6:00 am Nested Grid not displaying -TypeError:W.localdata is undefined #73926

Dimitar

Participant

Hi samaramaiden,

Nested grids, by themselves, are standard grids. You need to set the necessary properties to ensure you get the required behaviour. For example, please make sure you have set the autoheight property to false (or have not set it at all) for these grids.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.