diff options
Diffstat (limited to 'includes/js/dojox/grid/tests/test_subgrid.html')
| -rw-r--r-- | includes/js/dojox/grid/tests/test_subgrid.html | 179 |
1 files changed, 179 insertions, 0 deletions
diff --git a/includes/js/dojox/grid/tests/test_subgrid.html b/includes/js/dojox/grid/tests/test_subgrid.html new file mode 100644 index 0000000..4e5b8cd --- /dev/null +++ b/includes/js/dojox/grid/tests/test_subgrid.html @@ -0,0 +1,179 @@ +<!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> |