:: Forum >> Version 1 >>

Importing CSV with header / Autoadjustable table

Hi Active Users,

I have discovered Grid 1.0 last week and I have to say I was (and still am) very impressed - very good job!

This week, I tried using it to create a data editor for a statistical program. Well, for this purpose, I think I will wait for next version (editable one). though I tried the patch version which works, I prefer to wait a more official stuff. Little question: do you still intend to keep your dual-licence approach? I am working in a univeristy, only for open-source projects and would not be able to buy something...

Anyway, here is my little contribution: a function to load an external CSV, based on one I found on this forum, which also writes the good CSS to obtain a table with good sizes.

function LoadTXTfile(URLfic){

    
// create ActiveWidgets data model - text-based table
    
var table = new Active.Text.Table;
    
// provide data URL - plain text comma-separated file
    
table.setURL(URLfic);
    var 
Datalen 0;
    var 
myData =[];
    var 
TestmyData =[];
    var 
myColumns =[];
    var 
CloneColumns =[];
    var 
CloneData = [];
    var 
ColSelected =[];
    var 
NumColSel 0;
    var 
Xsentence ="";
    var 
maxcol 150;
    var 
lastcol 0;
    var 
ColLength = [];
    
    var 
obj = new Active.Controls.Grid;
    
obj.setStatusProperty("code""loading"); 
    var 
defaultResponse table.response;
    
table.response = function(data){
    
defaultResponse.call(tabledata);
    
Datalen=table.getCount();


    
// load second CSV line (max 150 cols) to calculate last not empty field
    
var x=1;
    var 
y=0;
    
Xsentence 'TestmyData.push([table.getText( ' ', ' ')';
    
y=1
    for(
y=1ymaxcoly++) { Xsentence += ', table.getText( ' ', ' ')'; }
    
Xsentence += '])';
    eval(
Xsentence);

    
// calculate ths CSV file last data column 
    
for(var x=0xmaxcolx++) { if(TestmyData[0][x]!=table.getText(0x)) {lastcol x+1; } }
    
//alert(lastcol);

    
TestmyData = [];

    
NumColSel lastcol;
    for(var 
x=0xlastcolx++) { ColSelected.push([x]); }
    
LoadData();
    function 
LoadData() {
        
// load first CSV line into array myColumns (note: remove next line -- if myColumns load as array 
        // take header size also
        
for(var x=0xlastcolx++) { 
            
myColumns.push([table.getText0x)]); 
            
ColLength.push((myColumns[x])[0].length);
            }

        
CloneColumns myColumns 

        
// load CSV data lines 2 to bottom into array myData 
        
var x=1// x=0 -- if myColumns load as array or in a separate CSV file 
        
var y=0;

        while( 
xDatalen) {
            
Xsentence 'myData.push([table.getText( ' ', ' ')';
            var 
tmpsize table.getText(x,y).length;
            if (
tmpsizeColLength[y]) ColLength[y]= tmpsize

            y
=1
            for(
y=1ylastcoly++) { 
                
Xsentence += ', table.getText( ' ', ' ')'
                var 
tmpsize table.getText(x,y).length;
                if (
tmpsizeColLength[y]) ColLength[y]= tmpsize
                
}
            
Xsentence += '])';
            eval(
Xsentence);
        
y=0;
        
x++; }

        
// clone the arrays and use tem as default
        
CloneColumns myColumns 
        
CloneData myData ;

        
// load data javascript objects
        
obj.setRowProperty("count"Datalen-1);
        
obj.setColumnProperty("count"NumColSel);
        
obj.setDataProperty("text", function(ij){return CloneData[i][j]});
        
obj.setColumnProperty("text", function(i){return CloneColumns[i]});

        
// write good CSS to "auto-size" the grid
        
var objid=obj.getId();
        var 
stylesheet document.styleSheets[document.styleSheets.length-1];
        var 
TableWidth=0;
        for(var 
x=0<lastcol;x++){
            var 
colWidth 20+(ColLength[x]*7);
            
stylesheet.addRule("#"+objid" .active-column-"+x,"width:"+colWidth+"px");
            
TableWidth += colWidth;
        }
        
//TableWidth += 1;

        
stylesheet.addRule("#"+objid"width:"+TableWidth+"px");
        var 
TableHeight=(20+(Datalen-1)*18);
        
stylesheet.addRule("#"+objid"height:"+TableHeight+"px");
    }
    
// let the browser paint the grid
    
window.setTimeout(function(){
    
obj.setStatusProperty("code""");
    
obj.refresh();
    }, 
0);
    }
    
// start asyncronous data retrieval
    
table.request();
    
// writes obj / One could also imagine returning directly obj for more operations on it...
    
obj.setRowHeaderWidth("0px");
    
document.write(obj);
}
 
Not possible to provide an example: data directory does not contain any data file with headers.

Best wishes,

Eric
Thursday, November 4, 2004



This topic is archived.

Back to support forum

Forum search