:: Forum >>

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