source: Dev/trunk/src/client/dojox/grid/tests/test_subgrid.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

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