a Grid that can load any CSV file

Just testing, found a trick to load any CSV into array
array[0][x]!=table.getText(0, x)
but do not try == (because fail on empty items)
Need to put the headers in the first line (no spaces after the comas)
I didn't try with many files, so if you find loading-errors, please post.
Thanks

<html>
<head>
<title>ActiveWidgets Grid :: Examples</title>
<style> body, html {margin:0px; padding: 0px;} </style>


<link href="../../runtime/styles/classic/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="../../runtime/lib/grid.js"></script>


<style>
.active-controls-grid {height: 450px; font: menu;}
.active-column-0 {width: 210px;}
.active-column-1 {width: 230px; background-color: threedlightshadow;}
.active-column-2 {text-align: right;}
.active-column-3 {text-align: right;}
.active-column-4 {text-align: right;}
.active-grid-column {border-right: 1px solid threedshadow;}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}
</style>
</head>
<body>
<script>

// create ActiveWidgets data model - text-based table
var table = new Active.Text.Table;

// provide data URL - plain text comma-separated file
table.setURL("../data/companies.csv");

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 MaxItem = ["multiselect & CILCK HERE"];

//var myColumns = ["Ticker","Company Name","Market Cap.","$ Sales","Employees"];

// create javascript object
var objsel = new Active.Controls.Grid;

var obj = new Active.Controls.Grid;
obj.setStatusProperty("code", "loading");

var defaultResponse = table.response;
table.response = function(data){
defaultResponse.call(table, data);
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( ' + x + ', ' + y + ')';
y=1;
for(y=1; y< maxcol; y++) { Xsentence += ', table.getText( ' + x + ', ' + y + ')'; }
Xsentence += '])';
eval(Xsentence);

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

TestmyData = [];

NumColSel = lastcol;
for(var x=0; x< lastcol; x++) { ColSelected.push([x]); }
LoadData();
////**********************************************************
//var myColumns = ["Ticker","Company Name","Market Cap.","$ Sales","Employees"];

function LoadData() {

// load first CSV line into array myColumns (note: remove next line -- if myColumns load as array
for(var x=0; x< lastcol; x++) { myColumns.push([table.getText( 0, x)]); }

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( x< Datalen) {
Xsentence = 'myData.push([table.getText( ' + x + ', ' + y + ')';
y=1;
for(y=1; y< lastcol; y++) { Xsentence += ', table.getText( ' + x + ', ' + y + ')'; }
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(i, j){return CloneData[i][j]});
obj.setColumnProperty("text", function(i){return CloneColumns[i]});

objsel.setRowProperty("count", lastcol);
objsel.setColumnProperty("count", 1);
objsel.setDataProperty("text", function(i){return myColumns[i]});
objsel.setColumnProperty("text", function(i){return MaxItem[i]});

}

// row selection event
objsel.setSelectionProperty("multiple", true);

//*******************************************************

function headerClickedok(e) {

obj.refresh();

ColSelected = objsel.getProperty("selection/values");
if(ColSelected[0] != "-1" && ColSelected.length>0 ){
NumColSel = ColSelected.length;
//LoadData();

CloneColumns =[];

for(var x=0; x< NumColSel; x++) { z = ColSelected[x]; CloneColumns.push(myColumns[z]); }

obj.setColumnProperty("count", NumColSel);
obj.setColumnProperty("text", function(i){return CloneColumns[i]});

CloneData =[];
var w =0;
var x=0;
var y=0;

while( x< Datalen-1) { // Datalen if myColumns load as array or in a separate CSV file
for(y=0; y< NumColSel; y++) {
z = ColSelected[y];
if(w >0 ) {Xsentence += ', myData[' + x + '][' + z + ']'; }
if(w==0) { Xsentence = 'CloneData.push([myData[' + x + '][' + z + ']'; w++; }
}
Xsentence += '])';
eval(Xsentence);
w=0;
y=0;
z = ColSelected[y];
x++;
}
}

objsel.setSelectionIndex(0);
objsel.refresh();
obj.refresh();
}
// disable sort on header-click and assign it a function
objsel.getTemplate("top/item").setEvent("onmousedown", headerClickedok);

// let the browser paint the grid
window.setTimeout(function(){
obj.setStatusProperty("code", "");
objsel.refresh();
obj.refresh();
}, 0);
}
//*****************************************
// start asyncronous data retrieval
table.request();

// write grids to the page
document.write(obj);
document.write(objsel);

</script>
</body>
</html>

Carlos

October 30,

Note: This trick compares the headers line with the first data-line (2), so
in case you put the heades into a separate file (or as js array) need to compare with it (if not, be sure the first two data-lines's last item doesn't have the same value "or empty").
Thanks

Carlos

October 31,

Hmmm, but how I load a CSV-File from an user, not from a URL?

xml@wingi.de

July 4,

Do you mean a different csv file per user ???
If so, just ask it before (asign a URL and then load the grid).
if(user==1){table.setURL("../data/user1_file.csv");}
if user==2){table.setURL("../data/user2_file.csv");}

Carlos

July 4,

This topic is archived.

a Grid that can load any CSV file

See also:

Search

New Data Grid

Version 2