I've created a subclass of the grid widget that does several things (i.e. sets default alternate row colors, allows rows to expand/collapse) BUT one of the main things I wanted it to do was hold onto its own data and heading info. That way when there are multiple grids on a page each will know its own data rather my storing all of that data and keeping track of all that data I can then talk directly to each grid.
The problem is that, although my variables seem to hold onto the correct info for each grid, they do not display properly. The last grid's data is displayed for all of the grids and the only the first grid triggers actions (i.e. clicking on a row to select it is recognized by the first grid, but is displayed in the second).
Also, I get different results on the web page based upon when I have the "document.write(....)" in my code.
Once again, if I look at the js arrays that are holding the data for each of my instances the data looks correct, but they do not behave properly.
Any help is appreciated.
Here is my subclass (I removed most of the code, it works, but it is just to demonstrate my problem) and a down and dirty file to try it out and demonstrate the problems:
--------------HERE IS MY SUBCLASS-------------------------
PromiaGrid.prototype = new Active.Controls.Grid();
PromiaGrid.prototype.constructor = PromiaGrid;
PromiaGrid.superclass = Active.Controls.Grid.prototype;
//Constructor
function PromiaGrid() {
this.dataForGrid = [['no data']];
this.headersForGrid = ['no data'];
this.setDataAndHeadings(this.dataForGrid, this.headersForGrid);
this.init();
}
//Initialize
PromiaGrid.prototype.init = function() {
this.setDataAndHeadings(this.dataForGrid, this.headersForGrid);
this.setDataProperty("text", function(i, j){return this.dataForGrid[i][j]});
this.setColumnProperty("text", function(i){return this.headersForGrid[i]});
//workaround for model proxy bug
this._DataProxy = null;
this._RowProxy = null;
};
//Set Data and/or Headings
PromiaGrid.prototype.setDataAndHeadings = function(someData, someHeadings) {
this.dataForGrid = someData;
this.headersForGrid=someHeadings;
this.setRowProperty("count",this.dataForGrid.length);
this.setColumnProperty("count",this.headersForGrid.length);
this.refresh();
}
---------------------------------------------------
-----------HERE IS CODE TO DEMONSTRATE THE PROBLEMS NOTE YOU'LL PROBLY NEED TO ADJUST THE PATHS TO THE CSS AND JS FILES---------
<head>
<!-- stylesheet(s) for the grid -->
<link href="../../runtime/styles/classic/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="../../runtime/lib/grid.js"></script>
<script src="../../runtime/lib/promia_grid_1.js""></script>
<style> .active-controls-grid {height: 60px; font: menu;} </style>
</head>
<script>
grid=new PromiaGrid();
grid.setDataAndHeadings([['AAAAAAAAAAAAAAAAAAAAAAAA'],['ZZZZZZZZZZZZZZZZZZZZZZZZ']],['col A'],true);
document.write("THIS GRID SHOULD CONTAIN A's in the first row, not B's AND THE SECOND ROW IS MISSING<BR>");
document.write("HERE IS THE DATA: " + grid.dataForGrid +"<BR>");
document.write(grid.toString()); //<--- THIS GRID WILL SHOW 'BBBBBBBBB's in the first row instead of 'AAAAAA's ???
document.write("<BR>");
var grid1=new PromiaGrid();
grid1.setDataAndHeadings([['BBBBBBBBBBBBBBBBBBBBBBBB']],['col B'],true);
document.write("THIS GRID LOOKS RIGHT BUT TRY CLICKING ON THE ROW THAT IS DISPLAYED<BR>");
document.write("HERE IS THE DATA: " + grid1.dataForGrid +"<BR>");
document.write(grid1.toString()) //<------This GRID WILL LOOK THE WAY WE EXPECT IT TO LOOK, BUT TRY CLICKING A ROW
document.write("<BR>");
</script>
<BODY>
<script>
document.write("THE FIRST GRID (ABOVE) SHOULD LOOK LIKE THIS. I HAVEN'T CHANGED THE DATA AND AM USING <BR>");
document.write("THE SAME 'document.write(grid)' THAT WAS USED TO DISPLAY THE FIRST GRID, SO WHY IS IT<BR>");
document.write("DIFFERENT ??? ALSO, TRY CLICKING ON THE FIRST ROW IN THIS GRID");
document.write("HERE IS THE DATA: " + grid.dataForGrid +"<BR>");
document.write(grid.toString())
document.write("<BR>");
document.write("LIKE THE 2nd GRID ABOVE THIS GRID LOOKS RIGHT BUT TRY CLICKING ON THE ROW THAT IS DISPLAYED<BR>");
document.write("HERE IS THE DATA: " + grid1.dataForGrid +"<BR>");
document.write(grid1.toString())
document.write("<BR>");
</script>
<BR>
So, the first and third grids should be the same <BR>
AND <BR>
the second and fourth grids should be the same <BR>
BUT THEY AREN'T
</BODY>
</HTML>
This is the same behavior I found when trying to create conglomerate components. When I have only one on the page it seems to work perfect, but once I drop a second one on everything crosses each other. I think it has everything to do with the ID's of the components. I have discovered that if you do not give an AW control an ID, and you have many of the same type of control on the page, updating one does not always update the one you think it should. or it doesn't update any of them. But once you assign an ID to each, everything works. So we need to learn how to assign a unique ID to each consumed control when creating new ones. I think once we learn that our issues will get smaller.
Jim, I was just going back to my post to say let people know that if I set the id of the grids everything works..... Great Minds..... Man one line of code, two days of banging my head against the wall.
I finally realized this when I realized from the alerts(...) that I was using that evey grid had an id of tag50. I also realized that in my "real" application that the grid (my outer grid) that I am using for row expansion did not get messed up when I added more grids. The outer grid DID have an id, the others didn't so I added setId to each of the others and like magic everything works now.
If you would like, I can post my subclass. It allows you to create grids more simply. I will be adding some stuff to the constructor that allows you to set the id as you construct the grid.
Some of the things my subclass does is allow you to expand/collapse a row, set row colors (the default is pale yellow and white, alternating) and each grid holds onto its own data and headings (which is good for the grids that show up when I expand a row in an outer grid).
I just figured an instance is an instance and therefore who cares what the objects id is.....
Thanks for your response, it confirms what I just discovered.
Here is the subclass
NOTE: I may need to look into the collapse function, it worked prior to
my making this a subclass, but I seem to be having some problems
with it now.
---------------------
PromiaGrid.prototype = new Active.Controls.Grid();
PromiaGrid.prototype.constructor = PromiaGrid;
PromiaGrid.superclass = Active.Controls.Grid.prototype;
//Constructor
function PromiaGrid(id) {
PromiaGrid.superclass.init();
this.setId(id);
this.origRowDivs=null;
this.dataForGrid = [['no data']];
this.headersForGrid = ['no data'];
this.alternateColors = ["#ffffcc", "#ffffff"]; //upon creation - white and pale yellow
this.setDataAndHeadings(this.dataForGrid, this.headersForGrid);
this.origRowDivs = null;
this.init();
}
//Initialize
PromiaGrid.prototype.init = function() {
//this.setDataAndHeadings(this.dataForGrid, this.headersForGrid);
this.setDataProperty("text", function(i, j){return this.dataForGrid[i][j]});
this.setColumnProperty("text", function(i){return this.headersForGrid[i]});
this.alternate = function(){ return this.alternateColors[this.getProperty("row/order") % this.alternateColors.length]; }
this.removeRowNumbers();
this.setRowColors();
// workaround for model proxy bug
this._DataProxy = null;
this._RowProxy = null;
};
//Set Data and/or Headings
PromiaGrid.prototype.setDataAndHeadings = function(someData, someHeadings, refreshToo) {
this.setData(someData);
this.setHeadings(someHeadings);
this.setRowAndColumnLengthsFromCache();
if(refreshToo != null && refreshToo)
this.refresh();
}
PromiaGrid.prototype.setData = function(someData, refreshToo) {
this.dataForGrid = someData;
this.setSelectionProperty("values", []);
if(refreshToo != null && refreshToo)
this.refresh();
}
PromiaGrid.prototype.setHeadings = function(someHeadings, refreshToo) {
this.headersForGrid=someHeadings;
if(refreshToo != null && refreshToo)
this.refresh();
}
//Set the number of rows and columns
PromiaGrid.prototype.setRowAndColumnLengthsFromCache = function() {
this.setNumberOfRowsFromCache();
this.setNumberOfColsFromCache();
}
PromiaGrid.prototype.setNumberOfRowsFromCache = function() {
this.setNumberOfRows(this.dataForGrid.length);
}
PromiaGrid.prototype.setNumberOfColsFromCache = function() {
this.setNumberOfCols(this.headersForGrid.length);
}
PromiaGrid.prototype.setNumberOfRows = function(numOfRows) {
this.setRowProperty("count",numOfRows);
}
PromiaGrid.prototype.setNumberOfCols = function(numOfCols) {
this.setColumnProperty("count",numOfCols);
}
//Remove the row numbers
PromiaGrid.prototype.removeRowNumbers = function() {
this.setRowHeaderWidth("0px");
}
//Set the row colors for a grid
//NOTE: If the arrayOfColors is not passed in than
//the rows alternate between pale yellow and white
//If you would like a single color to be used then pass in
//an array with a single color (i.e. [#ffffff] for white only)
//If you would like more than one color than pass in an array
//of those colors. They will be applied in the order that
//they appear in the array (i.e. ["#ddffcc", "#ccffff","#ffddff"])
PromiaGrid.prototype.setRowColors = function(arrayOfColors) {
if(arrayOfColors == null)
this.alternateColors = ["#ffffcc", "#ffffff"];
else
this.alternateColors = arrayOfColors;
var _alternateColors = this.alternateColors;
this.alternate = function(){return _alternateColors[this.getProperty("row/order") % _alternateColors.length];}
this.getTemplate("row").setStyle("background", this.alternate);
}
//Expand and Collapse
PromiaGrid.prototype.expandCollapse = function(rowNumber,someHtml) {
if(this.origRowDivs==null)
this.origRowDivs=new Array(this.dataForGrid.length);
if(this.origRowDivs[rowNumber] != null) {
this.collapse(rowNumber);
return;
}
fullRow=this.getProperty("row/template",rowNumber);
fullRowElement=fullRow.element();
this.dataForGrid[rowNumber][0] = "-";
this.getRowTemplate(rowNumber).getItemTemplate(0).refresh();
this.origRowDivs [rowNumber]=fullRowElement.innerHTML;
fullRowElement.innerHTML="<DIV>"+fullRowElement.innerHTML+''+someHtml+'</DIV>';
this.getTemplate("layout").action("adjustSize");
}
PromiaGrid.prototype.collapse = function(rowNumber) {
if(this.origRowDivs==null)
this.origRowDivs=new Array(this.dataForGrid.length);
fullRowElement.innerHTML=this.origRowDivs[rowNumber];
this.dataForGrid[rowNumber][0] = "+";
this.getRowTemplate(selectedRowIndex).getItemTemplate(0).refresh();
this.origRowDivs[selectedRowIndex]=null;
this.getTemplate("layout").action("adjustSize");
}