:: Forum >> Version 1 >>
Auto Column resize to largest text size ..... AW 2.0 Version
I had a working Auto Column resize with AW 1.0 and was testing to see if everything with 2.0 would work the same as I already had in 1.0. But a lot of things do not work because of a little different syntax to 2.0 compared to 1.0.
Does anyone know the proper syntax to fix this is?
Here is what my original code was for Auto Sizing columns....
/**** Autosize Columns ************/
var colSizes = new Array(myColumns.length) // array for colwidths
for (h=0;h<myColumns.length;h++){ // intialize with header widths
colSizes[h]= myColumns[h].length;
}
//get data function sets the col width for the
//data column if it is greater than the stored
//width
function getData(i, j){
chars = myData[i][j].length;
if ( chars > colSizes[j]) {
if (chars<70) { //70 char max to stop really wide cols.
colSizes[j] = chars;
} else {
colSizes[j] = 70;
}
}
return myData[i][j]
}
/*********************************/
//Need to go with AutoSizing of Columns
obj.setProperty("data/text", getData);
// write grid html to the page
document.write(obj);
// Autosizes Columns
var ssheet = document.getElementById("gridStyle").styleSheet;
for( cs=0;cs<myColumns.length-1;cs++) {
ssheet.addRule(".active-column-"+cs, "width:"+((colSizes[cs]*6)+20)+'px');
}
obj.getTemplate("layout").action("adjustSize");
obj.setDataProperty("value", function(i,j){
var text = "" + this.getDataText(i, j);
if (text.match(/^\s*$/)) {return ""}
var value = Number(text.replace(/[ ,%\$]/gi, "").replace(/\((.*)\)/, "-$1"));
return isNaN(value) ? text.toLowerCase() + " " : value;
});
var stylesheet = document.styleSheets[document.styleSheets.length-1];
stylesheet.addRule(".active-column-2", "width:150px");
Anthony
Tuesday, October 11, 2005
Maybe this is not the best way to do it, and/or is not an option in your case, but I discover that calling the getData function after return myData[row][col] does the trick.
Here is what I test:
var colSizes = new Array(myHeaders.length) // array for colwidths
for (h=0;h<myHeaders.length;h++){ // intialize with header widths
colSizes[h]= myHeaders[h].length;
}
//get data function sets the col width for the
//data column if it is greater than the stored width
function getData(col, row){
var chars = myData[row][col].length;
if ( chars > colSizes[col]) {
if (chars<70) { //70 char max to stop really wide cols.
colSizes[col] = chars;
} else {
colSizes[col] = 70;
}
}
// return myData[row][col] ;
}
// cell text (function) for all cells
obj.setCellText( function(col, row){return myData[row][col];getData} ); ////<<<<<<<<<<<<
// Autosizes Columns
// var ssheet = document.getElementById("myGrid").styleSheet;
var ssheet = document.styleSheets[document.styleSheets.length-1];
for( cs=0;cs<myHeaders.length;cs++) {
ssheet.addRule(".aw-column-"+cs, "width:"+((colSizes[cs]*6)+20)+'px');
}
Carlos
Wednesday, October 12, 2005
Does not seem to work in my testing.
Here is my code.
<html>
<head>
<title>ActiveWidgets Grid :: Examples</title>
<style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>
<!-- ActiveWidgets stylesheet and scripts -->
<link href="ActiveWidgets/runtime/styles/xp/aw.css" rel="stylesheet" type="text/css" ></link>
<script src="ActiveWidgets/runtime/lib/aw.js"></script>
<!-- grid format -->
<style id="gridStyle">
/********************************************************************
Grid
***********************0D
#myGrid .aw-grid-row {height: 20px; border-bottom: 1px solid #ccc}
/* #myGrid .aw-row-1 {color: blue} */
/* Alternate row colors */
#myGrid .aw-alternate-even {background: #fff;}
#myGrid .aw-alternate-odd {background: #ddd;}
/*#myGrid .aw-alternate-even .aw-column-0 {background: #eee;}
#myGrid .aw-alternate-odd .aw-column-0 {background: #ddd;}
#myGrid .aw-alternate-even .aw-column-1 {background: #eee;}
#myGrid .aw-alternate-odd .aw-column-1 {background: #ddd;}
#myGrid .aw-alternate-even .aw-column-2 {background: #eee;}
#myGrid .aw-alternate-odd .aw-column-2 {background: #ddd;}
#myGrid .aw-alternate-even .aw-column-3 {background: #eee;}
#myGrid .aw-alternate-odd .aw-column-3 {background: #ddd;}
#myGrid .aw-alternate-even .aw-column-4 {background: #eee;}
#myGrid .aw-alternate-odd .aw-column-4 {background: #ddd;}*/
/* Highlight on mouseover, mousedown */
#myGrid .aw-mouseover-row {background: #ccc;}
/* #myGrid .aw-mousedown-row {background: #999;} */
/* #myGrid .aw-mouseover-row .aw-column-1 {background: #bbb;} */
/* #myGrid .aw-mousedown-row .aw-column-1 {background: #888;} */
/* Selected rows */
/*#myGrid .aw-rows-selected {background: #316ac5;}
/*#myGrid .aw-rows-selected .aw-column-1 {background: #316ac5;}*/
/********************************************************************
Columns
********************************************************************/
#myGrid .aw-column-0 {text-align: left} /*{width: 50px; border-right: 1px dotted #ccc;}*/
#myGrid .aw-column-1 {text-align: left}/*{width: 150px; border-right: 1px dotted #ccc;}*/
#myGrid .aw-column-2 {text-align: left}
#myGrid .aw-column-3 {text-align: left}
#myGrid .aw-column-4 {text-align: left}
/********************************************************************
Cells
********************************************************************/
/* #myGrid .aw-row-2 .aw-column-1 {color: red; font-style: italic} */
/* Highlight on mouseover, mousedown */
/* #myGrid .aw-mouseover-cell {color: red;} */
/* #myGrid .aw-mousedown-cell {background: #666;} */
/* Selected cells */
#myGrid .aw-grid-row .aw-cells-selected {background: #316ac5;}
/********************************************************************
Headers
********************************************************************/
#myGrid .aw-grid-headers {color: blue; font-weight: bold}
/*#myGrid .aw-grid-headers .aw-column-1 {font-weight: bold}
/* Highlight on mouseover, mousedown */
#myGrid .aw-mouseover-header {color: red;}
#myGrid .aw-mousedown-header {color: yellow;}
/*#myGrid .aw-header-1 {background: #ddd}*/
/********************************************************************
Row selectors
********************************************************************/
/*#myGrid .aw-row-selector {display: none}
/*#myGrid .aw-row-selector {width: 20px; text-align: center}
/*#myGrid .aw-row-2 .aw-row-selector {font-weight: bold}*/
/*#myGrid .aw-mouseover-row .aw-row-selector {color: red;}
/* Highlight on mouseover, mousedown */
/*#myGrid .aw-mouseover-selector {background: green;}
#myGrid .aw-mousedown-selector {background: yellow;}*/
.transparent {background: Transparent; border: none}
.position {position: relative; top 30px}
@media print
{
.active-scroll-bars,
.active-scroll-left,
.active-scroll-corner {
display: none;
}
.active-scroll-top {
position: absolute;
overflow: visible;
width: auto!important;
height: auto!important;
}
.active-controls-grid {
overflow: visible;
height: auto;
width: auto;
}
.active-scroll-data {
position: absolute;
overflow: visible;
width: auto!important;
height: auto!important;
}
@page {
size: auto; /* auto is the initial value */
margin: 10%;
}
}
.padding {
padding: 2px
}
</style>
<!-- grid data -->
<script>
var myColumns = dialogArguments.Xstring;
var myData = dialogArguments.ctext;
//alert(myData);
</script>
</head>
<BODY onBeforePrint="onbeforeprint()" onAfterPrint="onafterprint()">
<p>
<form name="title" id="title">
<INPUT TYPE=TEXT NAME="GridTitle" ID="GridTitle" TITLE="" VALUE="Type report title here..." CLASS="transparent" MAXLENGTH=67 STYLE="position:relative; top:.15in; left:.1in; width:9.2in; height:0.250in; font-family: Arial; font-size: 14.00pt; font-weight: 400; font-style: normal;">
<button id="printit" style="padding-left:8px; padding-right:8px; position:absolute; top:.15in; left:9.85in;" onclick="printreport()">Print</button>
</form>
</p>
<SCRIPT LANGUAGE="JavaScript1.2">
function onbeforeprint(){
document.title.printit.style.visibility = "hidden";
}
function onafterprint(){
document.title.printit.style.visibility = "visible";
}
function printreport(){
print();
}
</script>
<script>
// create ActiveWidgets Grid javascript object
var obj = new AW.UI.Grid;
//var obj = new AW.Grid.Extended;
obj.setId("myGrid"); // necessary for CSS rules
// provide cells and headers text
obj.setCellText(function(c, r){return myData[r][c]});
obj.setHeaderText(function(r){return myColumns[r]});
// set number of columns/rows
obj.setRowCount(myData.length-1);
obj.setColumnCount(myColumns.length);
// enable row selectors
obj.setSelectorVisible(false);
obj.setSelectorText(function(i){return this.getRowPosition(i)+1});
// set headers width/height
obj.setSelectorWidth(28);
obj.setHeaderHeight(20);
// set row selection
//obj.setSelectionMode("single-row");
// set click action handler
obj.onCellDoubleClicked = function(event, col, row){alert(this.getCellText(col, row))};
// Cell ToolTip reads Data in cell on Mouseover
obj.setCellTooltip(function(i, j){return i});
obj.onCellMouseOver = function(event, col, row){
var e = this.getCellTemplate(col, row).element();
var s = this.getCellTooltip(this.getCellText(col, row));
if (e) {
e.setAttribute("title", s);
}
e = null;
}
var colSizes = new Array(myColumns.length) // array for colwidths
for (h=0;h<myColumns.length;h++){ // intialize with header widths
colSizes[h]= myColumns[h].length;
}
//get data function sets the col width for the
//data column if it is greater than the stored width
function getData(col, row){
var chars = myData[row][col].length;
if ( chars > colSizes[col]) {
if (chars<70) { //70 char max to stop really wide cols.
colSizes[col] = chars;
} else {
colSizes[col] = 70;
}
}
// return myData[row][col] ;
}
// cell text (function) for all cells
obj.setCellText( function(col, row){return myData[row][col];getData}); ////<<<<<<<<<<<<
//Need to go with AutoSizing of Columns
// obj.setProperty("data/text", getData);
// write grid html to the page
document.write(obj);
// Autosizes Columns
// var ssheet = document.getElementById("myGrid").styleSheet;
var ssheet = document.styleSheets[document.styleSheets.length-1];
for( cs=0;cs<myColumns.length;cs++) {
ssheet.addRule(".aw-column-"+cs, "width:"+((colSizes[cs]*6)+20)+'px');
}
</script>
</body>
</html>
Anthony
Wednesday, October 12, 2005
Curious, I just test with your code and do it. (the only things I changed are data-arrays and lib-links). ghosts revolution ??? ;-)
Ok, try this : To check what is doing , please place -- alert(colSizes); -- as last line in the script ( but before last } ), if everythig is going fine each time you click on the alert's button you can see a resize in one column.
Another test could be replace (at bottom):
ssheet.addRule(".aw-column-"+cs, "width:"+((colSizes[cs]*6)+20)+'px');
with something like:
ssheet.addRule(".aw-column-"+cs, "width:"+((colSizes[cs]*5))+'px');
If not, I would think that our PC's are AW incompatibles !! ;-)
Thanks
Carlos
Wednesday, October 12, 2005
Sorry, you are right,
the line:
// cell text (function) for all cells
obj.setCellText( function(col, row){return myData[row][col];getData}); ///<<<<<
Should be:
// cell text (function) for all cells
obj.setCellText( function(col, row){return myData[row][col];getData(col,row)});
Carlos
Monday, January 9, 2006
This topic is archived.
Back to support forum
Forum search
