Autosize Column Widths

Is there are way to have a column automatically set its width based on the width of the data?

No, this is not possible. The grid uses DIV tags everywhere (not TABLE/TR/TD), so you need to explicitly set the size of the cell.

I have built some autosize code it isn't 100% yet but thought i'd share where it's at so far

<style id='gridStyle'> 
  give your style sheet an id tag so we can get to it later.

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 th
    //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]
    }

  grid.setProperty("data/text", getData); 

    document.write(grid);
    
    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');
    }
    grid.getTemplate("layout").action("adjustSize");

  the ((colSizes[cs]*6)+20)+'px') code is an approximation I find works pretty well basically it allows 6pixels per character and 20pixels for safety.

a future enhancement would be to use the colSizes array and convert the value in percentages ofthe total widths and then set the width to a % rather than px value.

i managed it to get the real width of each cell in a column by assigning the width value "auto" to each cell,
followed by reading out the offsetWidth.
A restore of the width is not necessary as the grid refresh everything.

To see it real working: http://webmail.mbn.ch/table/dyntable.php
or just the javascript: http://webmail.mbn.ch/table/autoresize.js

Now a few problems i still have:

1. how can i attach a double click to the resizer div in the title
I solved this by a trick of knowing the id of all thes resizers.

2. is there a call to resize the whole column?
i use the code
var columnA = new Active.Templates.Text;
 columnA.setStyle('width', newSize+'px');
 gridasGridObj.setTemplate('column', columnA, ndx);
  but it does not resize the title, only the cells

3.is there a way to get an array of pointers to all divs within a column or row?
i solved it the 'hard' way:
while( document.getElementById( tableid +".data.item:"+ row + ".item:" + ndx ) ){
 arr[row] = document.getElementById( tableid +".data.item:"+ row + ".item:" + ndx );
 row++;
}
  This will be useful for editors etc..

My approach seem not to be very efficient. Large grids take a lot of time.
I wonder why.

Instead of
for(var i=0; i<colArr.length; i++){
        colArr[i].style.width = "auto";
        var imax = colArr[i].offsetWidth;
        colArr[i].style.width = "";
        maxx = (typeof(imax)=="number" && imax>maxx) ? imax : maxx;
    }

  i also tried:
var nodeX = document.body.appendChild(nX);
    for(var i=0; i<colArr.length; i++){
        nodeX.innerHTML = colArr[i].innerHTML;
        var imax = nodeX.offsetWidth;
        maxx = (typeof(imax)=="number" && imax>maxx) ? imax : maxx;
    }
    document.body.removeChild(nodeX);
  this was only faster by assigning a display:none;, but you guessed the sideeffect: maxx=0!!!

So maybe somebody can give me a few tipps.

use the getContent method to navigate the structure, and check the scrollwidth for the cell to determine what it should be... i had this working and think i posted it about a month ago, i'll have to dig it up later.

here is the simplified code to set the column width:

var stylesheet = document.styleSheets[document.styleSheets.length-1];
stylesheet.addRule(".active-column-2", "width:150px");

  Actually you also have to add control id if you want to handle more than one grid on the same page. Look at the source code for startColumnResize function in /lib/controls.grid.js

here is how you can access resizer (see lib/templates/header.js):

var header = obj.getTemplate("top/item");
    header.getContent("div").setEvent("onclick", function(){
        alert(1);
    });

  I am not sure why doubleclick doesn't work the same way - maybe mousedown event cancels it - however somehow you did it in your code.

catching the doubleclick and the click is amost impossible:

here the different order of the event leading up to dblclick:
(from http://www.quirksmode.org/js/events_compinfo.html#mouse )

* Explorer Windows: mousedown mouseup click mouseup dblclick
* Explorer Mac: mousedown mouseup click mousedown dblclick
* Mozilla: mousedown mouseup click mousedown mouseup click dblclick
* Safari: mousedown mouseup click mousedown mouseup dblclick
* Opera: mousedown mouseup click click dblclick mouseup
* Netscape 4: mousedown mouseup mousedown mouseup dblclick

In practice it is not possible to use both the click and dblclick events on the same element. The browsers aren't sufficiently able to distinguish between them.

I managed it, but its a hack and not suitable for clean environements, so : back to the beginning

I was struggling with this as well. But I did find a solution that works for me. You can catch the click on the grid element and the double click on the row element.
Here's a code snippet...

var row = new Active.Templates.Row;
row.setEvent("ondblclick", function(){this.action("_DoubleClick");});            obj.setAction("_DoubleClick", rowDoubleClick);    

row.setEvent("oncontextmenu", rowRightClick);            
obj.setTemplate("row", row);

obj.setAction("click", rowClick);
        
function rowClick (src) {    
 alert('Single Click on: '+src.getProperty("item/index"));   
}
function rowRightClick (src) {                                
   showPopup(event);
}
function rowDoubleClick (src) {
 alert('Double Click on: '+src.getProperty("item/index"));
}

  I've got to admit. I've tried to use the right click more than the single click since there really is a default action of row selection on the single click already. It's worked for me though to capture both the click and double click.

where is the eventlib.js??????????

Andres Obrero [Winterthur],

I included the atoresize.js, and eventlib.js files, and added this

document.write("<div id='cluster'>");
document.write(obj);
document.write("</div>");

var gridasGridObj = obj;

to my code.
What else I need to get this working?

Here's MySQL/PHP code that you can slot in right prior to echo activewidgets_grid($name, $data);

The only variable you should have to control is $data. $data should be the resulting recordset from mysql_query() command.

I have a $min_col_length variable that you can set, which will allow you to play with the widths a little more. It will prevent columns with very small data lengths from fouling up the headers, as well as giving the columns a much nicer flow.

// dynamic column width
    $records = mysql_numrows($data);

    for($i=0; $i < $records; $i++) {
      $row = mysql_fetch_row($data);
      $length = mysql_fetch_lengths($data);
      foreach($length as $key => $value) {if($maxlength[$key] < $value) {$maxlength[$key] = $value;} }
    }

    mysql_data_seek($data,0);

    $min_col_length = 30;

    print "<style>";
        foreach($maxlength as $key => $value) {if($value * 10 < $min_col_length) {print".active-column-$key {width:" . ($min_col_length) . "px}";} else {print".active-column-$key {width:" . ($value * 10) . "px}";}}
    print "</style>";
 

Hi
Can any one explain me how this can be done in Activewidget 2.0.1?

Thanks
Vikramaditya Garg