kjordan2001
7 Nov 2006, 12:34 PM
I'm having a problem where when I have two grids on the same page, that they'll mimic each other's grid size up to the minimum number of columns. The headers stay the right size, but the body columns will have the same size as the last drawn table.
HTML:
1 <html>
2 <head>
3 <title>Grid test</title>
4 <script></script> These seemed to be removed by the forums, but it was just importing the css file I got from the examples and importing the javascript files.
5 <script></script>
6 <script></script>
7 <script></script>
8 <script></script>
9 <script></script>
10 <script></script>
11 <script></script>
12 <link>
13 </head>
14 <body>
15 <div></div>
16 <div></div>
17 </body>
18 </html>
Javascript:
1 var Grid1 = {
2 init: function() {
3 var schema = {
4 root: 'ResultSet',
5 totalProperty: 'totalCount',
6 id: 'index',
7 fields: ['location','bin','quantity','partNum','name','custNum']
8 };
9 this.dataModel = new YAHOO.ext.grid.JSONDataModel(schema);
10 this.dataModel.onLoad.subscribe(this.onLoad.createDelegate(this));
11 this.dataModel.initPaging('mssqlquery.php',10);
12 var myColumns = [
13 {header: "Location",width: 150,sortable: true},
14 {header: "Bin",width: 70, sortable: true},
15 {header: "Qty",width: 60, sortable: true},
16 {header: "Part Number", width: 110, sortable: true},
17 {header: "Desc", width: 250, sortable: true},
18 {header: "Customer", width: 100, sortable: true}
19 ];
20 var colModel = new YAHOO.ext.grid.DefaultColumnModel(myColumns);
21 this.grid = new YAHOO.ext.grid.Grid('gridtest',this.dataModel,colModel);
22 this.grid.addListener('rowclick',this.onClick);
23 this.grid.addListener('keypress',this.onKeyPress,this.grid,this);
24 this.grid.render();
25 this.dataModel.loadPage(1);
26 this.grid.autoSize();
27 },
28 onKeyPress: function(e) {
29 alert(this.getSelectedRow().innerHTML);
30 },
31 onLoad: function() {
32 this.grid.getSelectionModel().selectFirstRow();
33 },
34 onClick: function(grid,index,e) {
35 alert(grid.getDataModel().getValueAt(index,3));
36 }
37 }
38 var Grid2 = {
39 init: function() {
40 var schema = {
41 root: 'ResultSet',
42 totalProperty: 'totalCount',
43 id: 'index',
44 fields: ['SerialNum','ItemStatus','computed','PartNum']
45 };
46 this.dataModel = new YAHOO.ext.grid.JSONDataModel(schema);
47 this.dataModel.onLoad.subscribe(this.onLoad.createDelegate(this));
48 this.dataModel.initPaging('./itemquery.php',10,{f3: "='Y482024'"});
49 var myColumns2 = [
50 {header: "S/N",width: 20,sortable: true},
51 {header: "Item Status",width: 40,sortable:true},
52 {header: "Date Received",width: 60,sortable:true},
53 {header: "Part Number",width: 50,sortable: true}
54 ];
55 var colModel = new YAHOO.ext.grid.DefaultColumnModel(myColumns2);
56 this.grid = new YAHOO.ext.grid.Grid('itemgrid',this.dataModel,colModel);
57 this.grid.render();
58 this.dataModel.loadPage(1);
59 this.grid.autoSize();
60 },
61 onLoad: function() {
62 this.grid.getSelectionModel().selectFirstRow();
63 }
64 };
65 YAHOO.util.Event.on(window,'load',Grid1.init,Grid1,true);
66 YAHOO.util.Event.on(window,'load',Grid2.init,Grid2,true);
HTML:
1 <html>
2 <head>
3 <title>Grid test</title>
4 <script></script> These seemed to be removed by the forums, but it was just importing the css file I got from the examples and importing the javascript files.
5 <script></script>
6 <script></script>
7 <script></script>
8 <script></script>
9 <script></script>
10 <script></script>
11 <script></script>
12 <link>
13 </head>
14 <body>
15 <div></div>
16 <div></div>
17 </body>
18 </html>
Javascript:
1 var Grid1 = {
2 init: function() {
3 var schema = {
4 root: 'ResultSet',
5 totalProperty: 'totalCount',
6 id: 'index',
7 fields: ['location','bin','quantity','partNum','name','custNum']
8 };
9 this.dataModel = new YAHOO.ext.grid.JSONDataModel(schema);
10 this.dataModel.onLoad.subscribe(this.onLoad.createDelegate(this));
11 this.dataModel.initPaging('mssqlquery.php',10);
12 var myColumns = [
13 {header: "Location",width: 150,sortable: true},
14 {header: "Bin",width: 70, sortable: true},
15 {header: "Qty",width: 60, sortable: true},
16 {header: "Part Number", width: 110, sortable: true},
17 {header: "Desc", width: 250, sortable: true},
18 {header: "Customer", width: 100, sortable: true}
19 ];
20 var colModel = new YAHOO.ext.grid.DefaultColumnModel(myColumns);
21 this.grid = new YAHOO.ext.grid.Grid('gridtest',this.dataModel,colModel);
22 this.grid.addListener('rowclick',this.onClick);
23 this.grid.addListener('keypress',this.onKeyPress,this.grid,this);
24 this.grid.render();
25 this.dataModel.loadPage(1);
26 this.grid.autoSize();
27 },
28 onKeyPress: function(e) {
29 alert(this.getSelectedRow().innerHTML);
30 },
31 onLoad: function() {
32 this.grid.getSelectionModel().selectFirstRow();
33 },
34 onClick: function(grid,index,e) {
35 alert(grid.getDataModel().getValueAt(index,3));
36 }
37 }
38 var Grid2 = {
39 init: function() {
40 var schema = {
41 root: 'ResultSet',
42 totalProperty: 'totalCount',
43 id: 'index',
44 fields: ['SerialNum','ItemStatus','computed','PartNum']
45 };
46 this.dataModel = new YAHOO.ext.grid.JSONDataModel(schema);
47 this.dataModel.onLoad.subscribe(this.onLoad.createDelegate(this));
48 this.dataModel.initPaging('./itemquery.php',10,{f3: "='Y482024'"});
49 var myColumns2 = [
50 {header: "S/N",width: 20,sortable: true},
51 {header: "Item Status",width: 40,sortable:true},
52 {header: "Date Received",width: 60,sortable:true},
53 {header: "Part Number",width: 50,sortable: true}
54 ];
55 var colModel = new YAHOO.ext.grid.DefaultColumnModel(myColumns2);
56 this.grid = new YAHOO.ext.grid.Grid('itemgrid',this.dataModel,colModel);
57 this.grid.render();
58 this.dataModel.loadPage(1);
59 this.grid.autoSize();
60 },
61 onLoad: function() {
62 this.grid.getSelectionModel().selectFirstRow();
63 }
64 };
65 YAHOO.util.Event.on(window,'load',Grid1.init,Grid1,true);
66 YAHOO.util.Event.on(window,'load',Grid2.init,Grid2,true);