3.0.5

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
October 11,
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
October 12,
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
October 12,
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
October 12,
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
January 9,

This topic is archived.

See also:


Back to support forum