| 2150 |
mathias |
1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|
|
2 |
<html>
|
|
|
3 |
<head>
|
|
|
4 |
<title>dojox.Grid Subgrid Test</title>
|
|
|
5 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
|
6 |
</meta>
|
|
|
7 |
<style>
|
|
|
8 |
@import "../../../dojo/resources/dojo.css";
|
|
|
9 |
@import "../_grid/tundraGrid.css";
|
|
|
10 |
|
|
|
11 |
body { font-size: 1.0em; }
|
|
|
12 |
#grid {
|
|
|
13 |
height: 400px;
|
|
|
14 |
border: 1px solid silver;
|
|
|
15 |
}
|
|
|
16 |
.text-oneline {
|
|
|
17 |
white-space: nowrap;
|
|
|
18 |
overflow: hidden;
|
|
|
19 |
text-overflow: ellipsis;
|
|
|
20 |
}
|
|
|
21 |
.text-scrolling {
|
|
|
22 |
height: 4em;
|
|
|
23 |
overflow: auto;
|
|
|
24 |
}
|
|
|
25 |
.text-scrolling {
|
|
|
26 |
width: 21.5em;
|
|
|
27 |
}
|
|
|
28 |
</style>
|
|
|
29 |
|
|
|
30 |
<script type="text/javascript" src="../../../dojo/dojo.js"
|
|
|
31 |
djConfig="isDebug:true, debugAtAllCosts: false, parseOnLoad: true"></script>
|
|
|
32 |
<script type="text/javascript">
|
|
|
33 |
dojo.require("dojox.grid.Grid");
|
|
|
34 |
dojo.require("dojox.grid._data.model");
|
|
|
35 |
dojo.require("dojo.parser");
|
|
|
36 |
</script>
|
|
|
37 |
<script type="text/javascript">
|
|
|
38 |
data = [
|
|
|
39 |
[ '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).' ],
|
|
|
40 |
[ '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.' ],
|
|
|
41 |
[ '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>' ],
|
|
|
42 |
[ '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." ]
|
|
|
43 |
];
|
|
|
44 |
|
|
|
45 |
getDetailData = function(inRowIndex) {
|
|
|
46 |
var row = data[this.grid.dataRow % data.length];
|
|
|
47 |
switch (this.index) {
|
|
|
48 |
case 0:
|
|
|
49 |
return row[0]; //'<img src="images/sample/' + row[0] + '" width="109" height="75">';
|
|
|
50 |
case 1:
|
|
|
51 |
return (100000000 + this.grid.dataRow).toString().slice(1);
|
|
|
52 |
case 2:
|
|
|
53 |
return row[3];
|
|
|
54 |
case 3:
|
|
|
55 |
return row[1];
|
|
|
56 |
case 4:
|
|
|
57 |
return row[2];
|
|
|
58 |
case 5:
|
|
|
59 |
return row[4];
|
|
|
60 |
default:
|
|
|
61 |
return row[this.index];
|
|
|
62 |
}
|
|
|
63 |
}
|
|
|
64 |
|
|
|
65 |
getName = function(inRowIndex) {
|
|
|
66 |
var row = data[inRowIndex % data.length];
|
|
|
67 |
return row[2];
|
|
|
68 |
}
|
|
|
69 |
|
|
|
70 |
// Main grid structure
|
|
|
71 |
var gridCells = [
|
|
|
72 |
{ type: 'dojox.GridRowView', width: '20px' },
|
|
|
73 |
{
|
|
|
74 |
onBeforeRow: function(inDataIndex, inSubRows) {
|
|
|
75 |
inSubRows[1].hidden = !detailRows[inDataIndex];
|
|
|
76 |
},
|
|
|
77 |
cells: [[
|
|
|
78 |
{ name: '', width: 3, get: getCheck, styles: 'text-align: center;' }, { name: 'Name', get: getName, width: 40 },
|
|
|
79 |
], [
|
|
|
80 |
{ name: '', get: getDetail, colSpan: 2, styles: 'padding: 0; margin: 0;'}
|
|
|
81 |
]]
|
|
|
82 |
}
|
|
|
83 |
];
|
|
|
84 |
|
|
|
85 |
// html for the +/- cell
|
|
|
86 |
function getCheck(inRowIndex) {
|
|
|
87 |
var image = (detailRows[inRowIndex] ? 'open.gif' : 'closed.gif');
|
|
|
88 |
var show = (detailRows[inRowIndex] ? 'false' : 'true')
|
|
|
89 |
return '<img height="11" width="11" src="images/' + image + '" onclick="toggleDetail(' + inRowIndex + ', ' + show + ')">';
|
|
|
90 |
}
|
|
|
91 |
|
|
|
92 |
// provide html for the Detail cell in the master grid
|
|
|
93 |
function getDetail(inRowIndex) {
|
|
|
94 |
var cell = this;
|
|
|
95 |
// we can affect styles and content here, but we have to wait to access actual nodes
|
|
|
96 |
setTimeout(function() { buildSubgrid(inRowIndex, cell); }, 1);
|
|
|
97 |
// look for a subgrid
|
|
|
98 |
var subGrid = dijit.byId(makeSubgridId(inRowIndex));
|
|
|
99 |
var h = (subGrid ? subGrid.cacheHeight : "120") + "px";
|
|
|
100 |
// insert a placeholder
|
|
|
101 |
return '<div style="height: ' + h + '; background-color: white;"></div>';
|
|
|
102 |
}
|
|
|
103 |
|
|
|
104 |
// the Detail cell contains a subgrid which we set up below
|
|
|
105 |
|
|
|
106 |
var subGridCells = [{
|
|
|
107 |
noscroll: true,
|
|
|
108 |
cells: [
|
|
|
109 |
[{ name: "Rating", rowSpan: 2, width: 10, noresize: true, styles: 'text-align:center;' },
|
|
|
110 |
{ name: "Sku" },
|
|
|
111 |
{ name: "Price" },
|
|
|
112 |
{ name: "Vendor" },
|
|
|
113 |
{ name: "Name", width: "auto" }],
|
|
|
114 |
[{ name: "Description", colSpan: 4 }]
|
|
|
115 |
]}];
|
|
|
116 |
|
|
|
117 |
var subGridProps = {
|
|
|
118 |
structure: subGridCells,
|
|
|
119 |
rowCount: 1,
|
|
|
120 |
autoHeight: true,
|
|
|
121 |
autoRender: false,
|
|
|
122 |
"get": getDetailData
|
|
|
123 |
};
|
|
|
124 |
|
|
|
125 |
// identify subgrids by their row indices
|
|
|
126 |
function makeSubgridId(inRowIndex) {
|
|
|
127 |
return grid.widgetId + "_subGrid_" + inRowIndex;
|
|
|
128 |
}
|
|
|
129 |
|
|
|
130 |
// if a subgrid exists at inRowIndex, detach it from the DOM
|
|
|
131 |
function detachSubgrid(inRowIndex) {
|
|
|
132 |
var subGrid = dijit.byId(makeSubgridId(inRowIndex));
|
|
|
133 |
if (subGrid)
|
|
|
134 |
dojox.grid.removeNode(subGrid.domNode);
|
|
|
135 |
}
|
|
|
136 |
|
|
|
137 |
// render a subgrid into inCell at inRowIndex
|
|
|
138 |
function buildSubgrid(inRowIndex, inCell) {
|
|
|
139 |
var n = inCell.getNode(inRowIndex).firstChild;
|
|
|
140 |
var id = makeSubgridId(inRowIndex);
|
|
|
141 |
var subGrid = dijit.byId(id);
|
|
|
142 |
if (subGrid) {
|
|
|
143 |
n.appendChild(subGrid.domNode);
|
|
|
144 |
} else {
|
|
|
145 |
subGridProps.dataRow = inRowIndex;
|
|
|
146 |
subGridProps.widgetId = id;
|
|
|
147 |
subGrid = new dojox.VirtualGrid(subGridProps, n);
|
|
|
148 |
}
|
|
|
149 |
if (subGrid) {
|
|
|
150 |
subGrid.render();
|
|
|
151 |
subGrid.cacheHeight = subGrid.domNode.offsetHeight;
|
|
|
152 |
inCell.grid.rowHeightChanged(inRowIndex);
|
|
|
153 |
}
|
|
|
154 |
}
|
|
|
155 |
|
|
|
156 |
// destroy subgrid at inRowIndex
|
|
|
157 |
function destroySubgrid(inRowIndex) {
|
|
|
158 |
var subGrid = dijit.byId(makeSubgridId(inRowIndex));
|
|
|
159 |
if (subGrid) subGrid.destroy();
|
|
|
160 |
}
|
|
|
161 |
|
|
|
162 |
// when user clicks the +/-
|
|
|
163 |
detailRows = [];
|
|
|
164 |
function toggleDetail(inIndex, inShow) {
|
|
|
165 |
if (!inShow) detachSubgrid(inIndex);
|
|
|
166 |
detailRows[inIndex] = inShow;
|
|
|
167 |
grid.updateRow(inIndex);
|
|
|
168 |
}
|
|
|
169 |
|
|
|
170 |
dojo.addOnLoad(function() {
|
|
|
171 |
window["grid"] = dijit.byId("grid");
|
|
|
172 |
dojo.connect(grid, 'rowRemoved', destroySubgrid);
|
|
|
173 |
});
|
|
|
174 |
</script>
|
|
|
175 |
</head>
|
|
|
176 |
<body class="tundra">
|
|
|
177 |
<div style="font-weight: bold; padding-bottom: 0.25em;">dojox.Grid showing sub-grid.</div>
|
|
|
178 |
<div id="grid" dojoType="dojox.VirtualGrid" structure="gridCells" rowCount="100000" autoWidth="true"></div>
|
|
|
179 |
</body>
|
|
|
180 |
</html>
|