Ticket #6593: datatype_2.html

File datatype_2.html, 5.4 kB (added by guest, 9 months ago)
Line 
1<?xml version="1.0" encoding="UTF-8"?>
2<!DOCTYPE html
3     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
4     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5<html xmlns="http://www.w3.org/1999/xhtml">
6
7<head>
8
9<!-- Styles -->
10<style type="text/css">
11    @import "/proserver/dojo/dijit/themes/tundra/tundra.css";
12    @import "/proserver/dojo/dojo/dojo.css";
13    @import "/proserver/dojo/dojox/grid/_grid/Grid.css";
14
15.dijitArrow {
16    background-repeat: no-repeat;
17    width: 15px;
18    height : 15px;
19    text-align: center;
20}
21
22.dijitUpArrow {background-image: url('/proserver/dojo/dijit/themes/tundra/images/arrowUp.gif'); }
23
24</style>
25
26<script type="text/javascript" src="/proserver/dojo/dojo/dojo.js.uncompressed.js" djConfig="parseOnLoad: true, isDebug: false">
27</script>
28
29<!-- Initialize page -->
30<script type="text/javascript">
31
32    dojo.require( "dijit.Dialog" );
33    dojo.require( "dijit.form.Button" );
34    dojo.require( "dojox.grid.Grid" );
35    dojo.require( "dojox.grid._data.model" );
36    dojo.require( "dojox.grid._data.editors" );
37    dojo.require( "dijit.layout.ContentPane" );
38    dojo.require( "dijit.layout.LayoutContainer" );
39
40    function handleInitPage()
41    {
42        new dijit.form.Button( { "onClick" : onCustomDataTypesButtonClicked }, dojo.byId( "customDataTypesButton" ) );
43    }
44
45    dojo.addOnLoad( handleInitPage );
46
47    function onCustomDataTypesButtonClicked()
48    {
49        buildGrid();
50        var dialog = dijit.byId( "customDataTypesDialog" );
51        dialog.show();
52    }
53
54    function buildGrid()
55    {
56        var gridObject = dijit.byId( "testGrid" );
57        if ( gridObject != null )
58            gridObject.destroy();
59
60        var gridHolderDiv = dojo.byId( "dtGridHolder" );
61        var dtDiv = document.createElement( "div" );
62        gridHolderDiv.appendChild( dtDiv );
63
64        var data = [ [ "one" ], [ "two" ], [ "three" ], [ "four" ] ];
65        var model = new dojox.grid.data.table( null, data );
66
67        var layout =
68        [
69            {   type: 'dojox.GridRowView', width: '20px' },
70            {   rows:
71                [[  { name: 'Value', width: 14, editor: dojox.grid.editors.Input }
72                ]]
73            }
74        ];
75
76
77        gridObject = new dojox.Grid(
78            {
79                id              : "testGrid",
80                model           : model,
81                structure       : layout,
82                singleClickEdit : true
83            },
84            dtDiv
85        );
86        gridObject.render();
87    }
88
89    function addDataValue()
90    {
91        var grid = dijit.byId( "testGrid" );
92        var rowCount = grid.model.getRowCount();
93        grid.addRow( [ "New Value" ], rowCount );
94        grid.selection.select( rowCount );
95        var cell = grid.getCell( 0 );
96        grid.edit.setEditCell( cell, rowCount );
97    }
98
99    function moveDataValueDown()
100    {
101    }
102
103    function moveDataValueUp()
104    {
105    }
106
107    function removeDataValues()
108    {
109        var grid = dijit.byId( "testGrid" );
110        grid.removeSelectedRows();
111    }
112
113</script>
114
115</head>
116<body class="tundra">
117    <div dojoType="dijit.Dialog" id="customDataTypesDialog" title="Grid in Dialog" style="display:none">
118        <table cellpadding="2" cellspacing="2">
119            <tr>
120                <td>
121                    <table cellspacing="0" cellpadding="0">
122                        <tr>
123                            <td align="left">
124                                <table width="300">
125                                    <tr>
126                                        <td>Click the "new" button below to add a row.  Then scroll the grid to make it refresh.  These steps are unnecessary when this same grid is not displayed in a dialog box.</td>
127                                    </tr>
128                                    <tr>
129                                        <td><button dojoType="dijit.form.Button" id="dtpvAdd" iconClass="dijitEditorIcon dijitEditorIconCopy" onclick="addDataValue()"></button></td>
130                                    </tr>
131                                </table>
132                            </td>
133                        </tr>
134                        <tr>
135                            <td>
136                                <div dojoType="dijit.layout.LayoutContainer"
137                                     id="dtGridHolder"
138                                     class="dijitTextArea"
139                                     style="position: relative; width: 205px; height: 120px; text-align:left; overflow:hidden;">
140                                </div>
141                            </td>
142                        </tr>
143                        <tr>
144                            <td width="300">
145                                The only issue that concerns me is the highlighting of the text in the editor, which works when not in a dialog.
146                            </td>
147                        </tr>
148                    </table>
149
150                </td>
151            </tr>
152            <tr>
153                <td>
154                    <table>
155                        <tr>
156                            <td><button id="doneDataTypesButton">Done</button></td>
157                        </tr>
158                    </table>
159                </td>
160            </tr>
161        </table>
162    </div>
163
164    <button id="customDataTypesButton">See Grid in Dialog...</button>
165</body>
166
167</html>