1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
| <!DOCTYPE html>
| <html>
| <head>
| <meta charset="utf-8">
| <title>Test Tree mixin with CompoundColumns extension</title>
|
| <style>
| @import "../../../../dojo/resources/dojo.css";
| @import "../../../css/dgrid.css";
| @import "../../../css/skins/claro.css";
|
| .dgrid {
| width: 700px;
| margin: 10px;
| }
|
| .dgrid .dgrid-content .dgrid-cell {
| height: 24px;
| }
|
| #treeGrid .field-type {
| width: 5em;
| }
| </style>
| </head>
|
| <body class="claro">
| <div id="treeGrid"></div>
|
| <script src="../../../../dojo/dojo.js" data-dojo-config="async: true"></script>
|
| <script>
| var treeGrid;
| var ready;
|
| require([
| 'dgrid/OnDemandGrid',
| 'dgrid/Tree',
| 'dgrid/ColumnSet',
| 'dgrid/extensions/CompoundColumns',
| 'dgrid/test/data/createHierarchicalStore',
| 'dgrid/test/data/hierarchicalCountryData'
| ], function (OnDemandGrid, Tree, ColumnSet, CompoundColumns,
| createHierarchicalStore, hierarchicalCountryData) {
|
| var testCountryStore = createHierarchicalStore({data: hierarchicalCountryData});
|
| treeGrid = new (OnDemandGrid.createSubclass([ Tree, CompoundColumns, ColumnSet ]))({
| sort: 'id',
| collection: testCountryStore,
| columnSets: [
| [
| [
| {
| renderExpando: true,
| label: 'Name',
| field: 'name',
| sortable: false
| }
| ]
| ],
| [
| [
| {
| label: 'Info',
| sortable: false,
| children: [
| {
| label: 'Type',
| field: 'type',
| sortable: false
| },
| {
| label: 'Population',
| field: 'population'
| },
| {
| label: 'Timezone',
| field: 'timezone'
| }
| ]
| }
| ]
| ]
| ]
| }, 'treeGrid');
|
| ready = true;
| });
| </script>
| </body>
| </html>
|
|
