camel-2.8.x/components/camel-web/src/main/webapp/js/dojox/grid/compat/tests/test_subgrid.html - camel - Git at Google

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <title>dojox.Grid Subgrid Test</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </meta>
 <style>
 		@import "../../../../dojo/resources/dojo.css";
 		@import "../../_grid/tundraGrid.css";

 		body { font-size: 1.0em; }
 		#grid {
 			height: 400px;
 			border: 1px solid silver;
 		}
 		.text-oneline {
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
 		}
 		.text-scrolling {
 			height: 4em;
 			overflow: auto;
 		}
 		.text-scrolling {
 			width: 21.5em;
 		}
 	</style>

 	<script type="text/javascript" src="../../../../dojo/dojo.js"
 		djConfig="isDebug:true, debugAtAllCosts: false, parseOnLoad: true"></script>
 	<script type="text/javascript">
 		dojo.require("dojox.grid.Grid");
 		dojo.require("dojo.parser");
 	</script>
 	<script type="text/javascript">
 		data = [
 			[ '3 stars', 'Averagia', 'Averagia', 8.99, 'An authentic experience defined by the intense layer of frothy, real facts. This combination package includes special T DISCS that work with your system to produce a perfectly serene experience. $8.99 per package. Please choose Regular (#NS1) or Decaffeinated (#NS4).' ],
 		 	[ '2 stars', 'Cheapy', 'Cheapy', 6.29, 'Power and subtlety intersect for an experience with real character. Imported from Europe just for you. 16 T DISCS per package. $6.29 per package. #NJ4.' ],
 		 	[ '4 stars', 'Luxuria', 'Luxuria', 6.49, 'A bold statement from the respected European brand Luxuria, topped with delicate zanthum. Imported exclusively for you. 18 T DISCS per package. $6.49 per package. #N42.</div>' ],
 		 	[ '5 stars', 'Ultimo', 'Ultimo', 4.59, "A rich sensation of delicious experience, brought to you by one of Europe's oldest brands. A pure indulgence. 8 T DISCS per package. $4.59 per package. #NJ0." ]
 		];

 		getDetailData = function(inRowIndex) {
 			var row = data[this.grid.dataRow % data.length];
 			switch (this.index) {
 				case 0:
 					return row[0]; //'<img src="images/sample/' + row[0] + '" width="109" height="75">';
 				case 1:
 					return (100000000 + this.grid.dataRow).toString().slice(1);
 				case 2:
 					return row[3];
 				case 3:
 					return row[1];
 				case 4:
 					return row[2];
 				case 5:
 					return row[4];
 				default:
 					return row[this.index];
 			}
 		}

 		getName = function(inRowIndex) {
 			var row = data[inRowIndex % data.length];
 			return row[2];
 		}

 		// Main grid structure
 		var gridCells = [
 			{ type: 'dojox.GridRowView', width: '20px' },
 			{
 				onBeforeRow: function(inDataIndex, inSubRows) {
 					inSubRows[1].hidden = !detailRows[inDataIndex];
 				},
 				cells: [[
 					{ name: '', width: 3, get: getCheck, styles: 'text-align: center;' }, { name: 'Name', get: getName, width: 40 }
 				], [
 					{ name: '', get: getDetail, colSpan: 2, styles: 'padding: 0; margin: 0;'}
 				]]
 			}
 		];

 		// html for the +/- cell
 		function getCheck(inRowIndex) {
 			var image = (detailRows[inRowIndex] ? 'open.gif' : 'closed.gif');
 			var show = (detailRows[inRowIndex] ? 'false' : 'true')
 			return '<img height="11" width="11" src="images/' + image + '" onclick="toggleDetail(' + inRowIndex + ', ' + show + ')">';
 		}

 		// provide html for the Detail cell in the master grid
 		function getDetail(inRowIndex) {
 			var cell = this;
 			// we can affect styles and content here, but we have to wait to access actual nodes
 			setTimeout(function() { buildSubgrid(inRowIndex, cell); }, 1);
 			// look for a subgrid
 			var subGrid = dijit.byId(makeSubgridId(inRowIndex));
 			var h = (subGrid ? subGrid.cacheHeight : "120") + "px";
 			// insert a placeholder
 			return '<div style="height: ' + h + '; background-color: white;"></div>';
 		}

 		// the Detail cell contains a subgrid which we set up below

 			var subGridCells = [{
 				noscroll: true,
 				cells: [
 					[{ name: "Rating", rowSpan: 2, width: 10, noresize: true, styles: 'text-align:center;' },
 							{ name: "Sku" },
 							{ name: "Price" },
 							{ name: "Vendor" },
 							{ name: "Name", width: "auto" }],
 					[{ name: "Description", colSpan: 4 }]
 				]}];

 			var subGridProps = {
 				structure: subGridCells,
 				rowCount: 1,
 				autoHeight: true,
 				autoRender: false,
 				"get": getDetailData
 			};

 			// identify subgrids by their row indices
 			function makeSubgridId(inRowIndex) {
 				return grid.widgetId + "_subGrid_" + inRowIndex;
 			}

 			// if a subgrid exists at inRowIndex, detach it from the DOM
 			function detachSubgrid(inRowIndex) {
 				var subGrid = dijit.byId(makeSubgridId(inRowIndex));
 				if (subGrid)
 					dojox.grid.removeNode(subGrid.domNode);
 			}

 			// render a subgrid into inCell at inRowIndex
 			function buildSubgrid(inRowIndex, inCell) {
 				var n = inCell.getNode(inRowIndex).firstChild;
 				var id = makeSubgridId(inRowIndex);
 				var subGrid = dijit.byId(id);
 				if (subGrid) {
 					n.appendChild(subGrid.domNode);
 				} else {
 					subGridProps.dataRow = inRowIndex;
 					subGridProps.widgetId = id;
 					subGrid = new dojox.VirtualGrid(subGridProps, n);
 				}
 				if (subGrid) {
 					subGrid.render();
 					subGrid.cacheHeight = subGrid.domNode.offsetHeight;
 					inCell.grid.rowHeightChanged(inRowIndex);
 				}
 			}

 			// destroy subgrid at inRowIndex
 			function destroySubgrid(inRowIndex) {
 				var subGrid = dijit.byId(makeSubgridId(inRowIndex));
 				if (subGrid) subGrid.destroy();
 			}

 		// when user clicks the +/-
 		detailRows = [];
 		function toggleDetail(inIndex, inShow) {
 			if (!inShow) detachSubgrid(inIndex);
 			detailRows[inIndex] = inShow;
 			grid.updateRow(inIndex);
 		}

 		dojo.addOnLoad(function() {
 			window["grid"] = dijit.byId("grid");
 			dojo.connect(grid, 'rowRemoved', destroySubgrid);
 		});
 	</script>
 </head>
 <body class="tundra">
 	<div style="font-weight: bold; padding-bottom: 0.25em;">dojox.Grid showing sub-grid.</div>
 	<div id="grid" dojoType="dojox.VirtualGrid" structure="gridCells" rowCount="100000" autoWidth="true"></div>
 </body>
 </html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	<title>dojox.Grid Subgrid Test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	</meta>
	<style>
	@import "../../../../dojo/resources/dojo.css";
	@import "../../_grid/tundraGrid.css";

	body { font-size: 1.0em; }
	#grid {
	height: 400px;
	border: 1px solid silver;
	}
	.text-oneline {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	}
	.text-scrolling {
	height: 4em;
	overflow: auto;
	}
	.text-scrolling {
	width: 21.5em;
	}
	</style>

	<script type="text/javascript" src="../../../../dojo/dojo.js"
	djConfig="isDebug:true, debugAtAllCosts: false, parseOnLoad: true"></script>
	<script type="text/javascript">
	dojo.require("dojox.grid.Grid");
	dojo.require("dojo.parser");
	</script>
	<script type="text/javascript">
	data = [
	[ '3 stars', 'Averagia', 'Averagia', 8.99, 'An authentic experience defined by the intense layer of frothy, real facts. This combination package includes special T DISCS that work with your system to produce a perfectly serene experience. $8.99 per package. Please choose Regular (#NS1) or Decaffeinated (#NS4).' ],
	[ '2 stars', 'Cheapy', 'Cheapy', 6.29, 'Power and subtlety intersect for an experience with real character. Imported from Europe just for you. 16 T DISCS per package. $6.29 per package. #NJ4.' ],
	[ '4 stars', 'Luxuria', 'Luxuria', 6.49, 'A bold statement from the respected European brand Luxuria, topped with delicate zanthum. Imported exclusively for you. 18 T DISCS per package. $6.49 per package. #N42.</div>' ],
	[ '5 stars', 'Ultimo', 'Ultimo', 4.59, "A rich sensation of delicious experience, brought to you by one of Europe's oldest brands. A pure indulgence. 8 T DISCS per package. $4.59 per package. #NJ0." ]
	];

	getDetailData = function(inRowIndex) {
	var row = data[this.grid.dataRow % data.length];
	switch (this.index) {
	case 0:
	return row[0]; //'<img src="images/sample/' + row[0] + '" width="109" height="75">';
	case 1:
	return (100000000 + this.grid.dataRow).toString().slice(1);
	case 2:
	return row[3];
	case 3:
	return row[1];
	case 4:
	return row[2];
	case 5:
	return row[4];
	default:
	return row[this.index];
	}
	}

	getName = function(inRowIndex) {
	var row = data[inRowIndex % data.length];
	return row[2];
	}

	// Main grid structure
	var gridCells = [
	{ type: 'dojox.GridRowView', width: '20px' },
	{
	onBeforeRow: function(inDataIndex, inSubRows) {
	inSubRows[1].hidden = !detailRows[inDataIndex];
	},
	cells: [[
	{ name: '', width: 3, get: getCheck, styles: 'text-align: center;' }, { name: 'Name', get: getName, width: 40 }
	], [
	{ name: '', get: getDetail, colSpan: 2, styles: 'padding: 0; margin: 0;'}
	]]
	}
	];

	// html for the +/- cell
	function getCheck(inRowIndex) {
	var image = (detailRows[inRowIndex] ? 'open.gif' : 'closed.gif');
	var show = (detailRows[inRowIndex] ? 'false' : 'true')
	return '<img height="11" width="11" src="images/' + image + '" onclick="toggleDetail(' + inRowIndex + ', ' + show + ')">';
	}

	// provide html for the Detail cell in the master grid
	function getDetail(inRowIndex) {
	var cell = this;
	// we can affect styles and content here, but we have to wait to access actual nodes
	setTimeout(function() { buildSubgrid(inRowIndex, cell); }, 1);
	// look for a subgrid
	var subGrid = dijit.byId(makeSubgridId(inRowIndex));
	var h = (subGrid ? subGrid.cacheHeight : "120") + "px";
	// insert a placeholder
	return '<div style="height: ' + h + '; background-color: white;"></div>';
	}

	// the Detail cell contains a subgrid which we set up below

	var subGridCells = [{
	noscroll: true,
	cells: [
	[{ name: "Rating", rowSpan: 2, width: 10, noresize: true, styles: 'text-align:center;' },
	{ name: "Sku" },
	{ name: "Price" },
	{ name: "Vendor" },
	{ name: "Name", width: "auto" }],
	[{ name: "Description", colSpan: 4 }]
	]}];

	var subGridProps = {
	structure: subGridCells,
	rowCount: 1,
	autoHeight: true,
	autoRender: false,
	"get": getDetailData
	};

	// identify subgrids by their row indices
	function makeSubgridId(inRowIndex) {
	return grid.widgetId + "_subGrid_" + inRowIndex;
	}

	// if a subgrid exists at inRowIndex, detach it from the DOM
	function detachSubgrid(inRowIndex) {
	var subGrid = dijit.byId(makeSubgridId(inRowIndex));
	if (subGrid)
	dojox.grid.removeNode(subGrid.domNode);
	}

	// render a subgrid into inCell at inRowIndex
	function buildSubgrid(inRowIndex, inCell) {
	var n = inCell.getNode(inRowIndex).firstChild;
	var id = makeSubgridId(inRowIndex);
	var subGrid = dijit.byId(id);
	if (subGrid) {
	n.appendChild(subGrid.domNode);
	} else {
	subGridProps.dataRow = inRowIndex;
	subGridProps.widgetId = id;
	subGrid = new dojox.VirtualGrid(subGridProps, n);
	}
	if (subGrid) {
	subGrid.render();
	subGrid.cacheHeight = subGrid.domNode.offsetHeight;
	inCell.grid.rowHeightChanged(inRowIndex);
	}
	}

	// destroy subgrid at inRowIndex
	function destroySubgrid(inRowIndex) {
	var subGrid = dijit.byId(makeSubgridId(inRowIndex));
	if (subGrid) subGrid.destroy();
	}

	// when user clicks the +/-
	detailRows = [];
	function toggleDetail(inIndex, inShow) {
	if (!inShow) detachSubgrid(inIndex);
	detailRows[inIndex] = inShow;
	grid.updateRow(inIndex);
	}

	dojo.addOnLoad(function() {
	window["grid"] = dijit.byId("grid");
	dojo.connect(grid, 'rowRemoved', destroySubgrid);
	});
	</script>
	</head>
	<body class="tundra">
	<div style="font-weight: bold; padding-bottom: 0.25em;">dojox.Grid showing sub-grid.</div>
	<div id="grid" dojoType="dojox.VirtualGrid" structure="gridCells" rowCount="100000" autoWidth="true"></div>
	</body>
	</html>