Ticket #6508: programaticGridNestedAttr.htm

File programaticGridNestedAttr.htm, 4.1 kB (added by yaz_k83, 3 months ago)

Demo to reproduce issue.

Line 
1<html>
2        <head>
3                <title>Grid</title>
4               
5                <style type="text/css">
6                        @import "../../dojo/resources/dojo.css";
7                        @import "../../dojox/grid/_grid/tundraGrid.css";
8                        @import "../../dijit/themes/tundra/tundra.css";
9                       
10                        #grid {
11                                border: 1px solid #333;
12                                width: 40em;
13                                height: 30em;
14                        }
15                </style>
16       
17                <script type="text/javascript" src="../../dojo/dojo.js" djConfig="parseOnLoad: true"></script>
18                <script type="text/javascript" src="../../dojox/grid/Grid.js" djConfig="parseOnLoad: true"></script>
19               
20                <script language="javascript" type="text/javascript">
21                        var grid = null;
22                        var json = null;
23                       
24                        dojo.require("dojox.grid.Grid");
25                        dojo.require("dojo.parser");
26                       
27                        dojo.require("dojo.date.locale");
28                       
29                        dojo.require("dojo.data.ItemFileReadStore");
30                        dojo.require("dojox.grid._data.model"); //Required t use DojoData
31
32                        dojo.require("dojo.data.ItemFileWriteStore");
33                       
34                        function getDataForGrid() {
35                                /*var data =
36                                        [
37                                                [1, "Abc", 100, true],
38                                                [2, "Pqr", 200, true],
39                                                [3, "Xyz", 300, true],
40                                                [4, "Lmn", 400, true],
41                                                [5, "Uvw", 500, true]
42                                        ];
43                               
44                                var model = new dojox.grid.data.Table(null, data);
45                               
46                                return model;*/
47                               
48                                json =
49                                {
50                                        data:
51                                        {
52                                                //BUG!!!
53                                                //identifier: 'roll', //COMMENT THIS TO MAKE IT WORK!!!
54                                                //BUG!!!
55                                                items:
56                                                [
57                                                        {roll: 1, name: 'AAA', marks: 10, active: true, "joiningDate": {/*roll: 10, */"day": "1", "month": "12", "year": "1983"}},
58                                                        {roll: 2, name: 'BBB', marks: 10, active: true, "joiningDate": {/*roll: 20, */"day": "1", "month": "12", "year": "1983"}},
59                                                        {roll: 3, name: 'CCC', marks: 10, active: true, "joiningDate": {/*roll: 30, */"day": "1", "month": "12", "year": "1983"}},
60                                                        {roll: 4, name: 'DDD', marks: 10, active: true, "joiningDate": {/*roll: 40, */"day": "1", "month": "12", "year": "1983"}},
61                                                        {roll: 5, name: 'EEE', marks: 10, active: true, "joiningDate": {/*roll: 50, */"day": "1", "month": "12", "year": "1983"}},
62                                                        {roll: 6, name: 'FFF', marks: 10, active: true, "joiningDate": {/*roll: 60, */"day": "1", "month": "12", "year": "1983"}},
63                                                        {roll: 0, name: 'ZZZ', marks: 10, active: false, "joiningDate": {/*roll: 70, */"day": "1", "month": "12", "year": "1983"}} //false and 0 are not visible as litirals, enclose in single quotes to view.
64                                                ]
65                                        }
66                                };
67                               
68                                var itemFileWriteStore = new dojo.data.ItemFileWriteStore(json);
69
70                                var dojoData = new dojox.grid.data.DojoData(null,itemFileWriteStore,{jsId: 'dojoData', rowsPerPage: 3, query:null});
71                                return dojoData;
72                        }
73                       
74                        fetchJoiningDate = function(i) {
75                                var data = null;
76                                if (grid.model.data.length <= i) {
77                                        data = json.data.items[i];
78                                } else {
79                                        data = grid.model.data[i];
80                                }
81                               
82                                return dojo.date.locale.format(new Date(data.joiningDate.year, data.joiningDate.month, data.joiningDate.day), {locale: "en-uk"});
83                        }
84                       
85                        //on load setup for grid.
86                        dojo.addOnLoad(
87                                function() {
88                                        var view0 =
89                                                {
90                                                        cells:
91                                                        [
92                                                                [
93                                                                        {name: 'Roll', field: "roll"},
94                                                                        {name: 'Name', field: "name"},
95                                                                        {name: 'Marks', field: "marks"},
96                                                                        {name: 'Is Active?', field: "active"},
97                                                                        {name: 'Date Of Joining', field: "joiningDate", get: fetchJoiningDate}
98                                                                ]
99                                                        ]
100                                                };
101                                               
102                                        var layout = [view0];
103                                        var model = getDataForGrid();
104                                       
105                                        grid = new dojox.Grid({"id": "grid", "model": model, "structure": layout});
106                                        dojo.byId("gridContainer").appendChild(grid.domNode);
107                                       
108                                        grid.render();
109
110                                        console.debug(grid);
111                                }
112                        );
113                </script>
114        </head>
115       
116        <body class="tundra">
117                <ol>
118<li>run it as is... it should work.
119<li>Uncomment line no. 53 [identifier: 'roll',]; Now the code wont work... check fire bug for error message. you will see - [TypeError: arrayOfValues has no properties message=arrayOfValues has no properties].
120<li>now uncomment the commented section of the joiningDate nested object from line no. 57 to 63 [roll: 10, ] - Now the code works..
121                </ol>
122       
123                <span id="panel">
124                        <span id="gridContainer"></span>
125                </span>
126        </body>
127</html>