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

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

Added Dojo 1.9.3 release.
File size: 2.9 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>Test dojox.grid.Grid Expand Rows</title>
6        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
7        <style type="text/css">
8                @import "../resources/Grid.css";
9                body {
10                        font-size: 0.9em;
11                        font-family: Geneva, Arial, Helvetica, sans-serif;
12                }
13                .heading {
14                        font-weight: bold;
15                        padding-bottom: 0.25em;
16                }
17               
18                .bigHello {
19                        height: 110px;
20                        line-height: 110px;
21                        text-align: center;
22                        font-weight: bold;
23                        font-size: 30px;
24                }       
25                               
26                #grid {
27                        border: 1px solid #333;
28                        height: 30em;
29                }
30        </style>
31        <script type="text/javascript" src="../../../dojo/dojo.js"
32                data-dojo-config="isDebug:false, parseOnLoad: true"></script>
33        <script type="text/javascript">
34                dojo.require("dijit.dijit");
35                dojo.require("dojox.grid.DataGrid");
36                dojo.require("dojo.parser");
37        </script>
38        <script type="text/javascript">
39                // inRow is an array of subRows. we hide the summary subRow except for every nth row
40                function onBeforeRow(inDataIndex, inRow) {
41                        inRow[1].hidden = (!this.grid || !this.grid.expandedRows || !this.grid.expandedRows[inDataIndex]);
42                }
43               
44                var structure = {
45                        onBeforeRow: onBeforeRow,
46                        cells: [
47                                [
48                                        { name: 'Whatever', width: 4.5, get: getCheck, formatter: formatCheck, styles: 'text-align: center;' },
49                                        {name: 'Column 0', get: get},
50                                        {name: 'Column 1', get: get},
51                                        {name: 'Column 2', get: get},
52                                        {name: 'Column 3', get: get},
53                                        {name: 'Column 4', get: get}
54                                ],
55                                [ { name: 'Detail', colSpan: 6, get: getDetail, formatter: formatDetail } ]
56                        ]
57                };
58               
59                // get can return data for each cell of the grid
60                function get(inRowIndex) {
61                        return [this.index, inRowIndex].join(', ');
62                }
63               
64                function getDetail(inRowIndex) {
65                        if (this.grid.expandedRows[inRowIndex]) {
66                                return 'Hello World!';
67                        } else {
68                                return '';
69                        }
70                }
71               
72                function formatDetail(value, inRowIndex){
73                        if(value){
74                                var n = (inRowIndex % 2);
75                                switch (n) {
76                                        case 0:
77                                                return value;
78                                        default:
79                                                return '<div class="bigHello">' + value + '</div>';
80                                }                       
81                        }
82                        return value;
83                }
84               
85                function toggle(inIndex, inShow) {
86                        grid.expandedRows[inIndex] = inShow;
87                        grid.updateRow(inIndex);
88                }
89               
90                function getCheck(inRowIndex) {
91                        if (!this.grid.expandedRows)
92                                this.grid.expandedRows = [ ];
93                        return {image: (this.grid.expandedRows[inRowIndex] ? 'open.gif' : 'closed.gif'),
94                                        show: (this.grid.expandedRows[inRowIndex] ? 'false' : 'true')};
95                }
96               
97                function formatCheck(value, inRowIndex){
98                        return '<img src="images/' + value.image + '" onclick="toggle(' + inRowIndex + ', ' + value.show + ')" height="11" width="11">';
99                }
100        </script>
101</head>
102<body>
103        <div class="heading">dojox.grid.Grid Expand Row Example</div>
104
105        <div id="grid" data-dojo-id="grid" dojoType="dojox.grid._Grid"
106                structure="structure" rowCount="100000" autoWidth="true" rowSelector="20px"></div>
107
108</body>
109</html>
Note: See TracBrowser for help on using the repository browser.