:: Forum >> Version 1 >>

Display a range of data from a .CSV file

More information on this topic is available in the documentation section: /active.howto.scroll/scroll-into-view.html.

A little help please. . .

I need to display different ranges of data from the same .CSV file. The result will be one data file with different views. My intent is to give a viewer the ability to select from a drop down menu, and, based on their selection, the appropriate .htm file with the appropriate range of data appears in the visible area.
I'm certain the code Alex provided in
/javascript.forum.1668.5/can-i-specify-the-starting.html

will meet my need, but I am at a loss as to how to make it work.

1. Does my data source i.e. JS array, linked CSV file, etc. make any difference in whether Alex's code works?

2.I pasted the code into my file and followed the instructions from Alex regarding positioning the code AFTER document.write(obj).

3.As you can see, I changed the 'scrollIntoView.call(obj, 15)' from 15 to 25 - the first record I want to see.

4.Below is the code as it appears in my file.
<!-- grid data -->
<SCRIPT>
// source file for table
var table = new Active.Text.Table;
table.setProperty("URL", "data.csv");
table.request();

//create ActiveWidgets Grid javascript object
var obj = new Active.Controls.Grid;
obj.setProperty("column/count", 12);
obj.setRowProperty("count", 65);
obj.setModel("data", table);

//provide cells and headers text
var myColumns = [
"FY", "LOCATION", "DATE", "ENRL", "GRAD", "AOB AI", "AOB UI", "AOB HL", "AOB HM", "AOB II", "AOB AT", "AAOB SUM"
];
obj.setColumnProperty("text", function(i){return myColumns[i]});

// roll over color change
var row = new Active.Templates.Row;
row.setEvent("onmouseover", "mouseover(this, 'active-row-highlight')");
row.setEvent("onmouseout", "mouseout(this, 'active-row-highlight')");
obj.setTemplate("row", row);

// conditional formatting for data by column
function myColor(){
var value = this.getItemProperty("value");
return value>=2 ? "red" : "blue";
}
obj.getColumnTemplate(3).setStyle("color", myColor);
obj.getColumnTemplate(4).setStyle("color", myColor);

//write grid html to the page
document.write(obj);

function scrollIntoView(index){

var row = this.getTemplate("row", index);
var data = this.getTemplate("layout").getContent("data");
var left = this.getTemplate("layout").getContent("left");
var scrollbars = this.getTemplate("layout").getContent("scrollbars");

try {
var top, padding = parseInt(data.element().currentStyle.paddingTop);
if (data.element().scrollTop > row.element().offsetTop - padding) {
top = row.element().offsetTop - padding;
left.element().scrollTop = top;
data.element().scrollTop = top;
scrollbars.element().scrollTop = top;
}

if (data.element().offsetHeight + data.element().scrollTop <
row.element().offsetTop + row.element().offsetHeight ) {
top = row.element().offsetTop + row.element().offsetHeight - data.element().offsetHeight;
left.element().scrollTop = top;
data.element().scrollTop = top;
scrollbars.element().scrollTop = top;
}
}
catch(error){
// ignore errors
}
}

obj.timeout(function(){
scrollIntoView.call(obj, 25);
});

</SCRIPT>

Thanks in advance for any help.

Gil
Tuesday, February 15, 2005
Brain cramp.
Didn't mean to display link to original topic as code. Anyway. . .

/javascript.forum.1668.5/can-i-specify-the-starting.html

Gil
Tuesday, February 15, 2005
See what I mean when I say I could use some help.
Gil
Tuesday, February 15, 2005
Gil,

yes, there is a difference between JS and CSV data models - CSV (and XML) load data asynchronously by default. This is why your code does not work - you should wait until the data is loaded before trying to scroll the grid. Look here for more details:

/javascript.forum.892.4/how-ca-i-determine-when.html

So it should be something like

var table = new Active.Text.Table;
...
var 
defaultResponse table.response;

table.response = function(data){
  
defaultResponse.call(tabledata);

  
obj.timeout(function(){ 
    
scrollIntoView.call(obj25); 
  }, 
100); 

}
...
table.request();

 
Alex (ActiveWidgets)
Tuesday, February 15, 2005
Took what you gave me, plugged it in and It Worked! Thanks much for your help on this, and thanks for such a dynamic and useful tool!!

<SCRIPT>
// source file for table
var table = new Active.Text.Table;
table.setProperty("URL""DATA.csv");
table.request();

//create ActiveWidgets Grid javascript object
var obj = new Active.Controls.Grid;
obj.setProperty("column/count"12);
obj.setRowProperty("count"65);
obj.setModel("data"table);

//provide cells and headers text
var myColumns = [
"FY""LOCATION""DATE""ENRL""GRAD""AOB AI""AOB UI""AOB HL""AOB HM""AOB II""AOB AT""AAOB SUM"
];
obj.setColumnProperty("text", function(i){return myColumns[i]});

// roll over color change  
var row = new Active.Templates.Row;
row.setEvent("onmouseover""mouseover(this, 'active-row-highlight')");
row.setEvent("onmouseout""mouseout(this, 'active-row-highlight')");
obj.setTemplate("row"row);

// conditional formatting for data by column    
function myColor(){
var 
value this.getItemProperty("value");
return 
value>=2 ? "red" "blue";
}
obj.getColumnTemplate(3).setStyle("color"myColor);
obj.getColumnTemplate(4).setStyle("color"myColor);

//write grid html to the page
document.write(obj);

//Scrolls the requested row into view
var defaultResponse table.response
table.response = function(data){ 
defaultResponse.call(tabledata); 

function 
scrollIntoView(index){ 
var 
row this.getTemplate("row"index); 
var 
data this.getTemplate("layout").getContent("data"); 
var 
left this.getTemplate("layout").getContent("left"); 
var 
scrollbars this.getTemplate("layout").getContent("scrollbars"); 

try 
    var 
toppadding parseInt(data.element().currentStyle.paddingTop); 
    if (
data.element().scrollTop row.element().offsetTop padding) { 
        
top row.element().offsetTop  padding
        
left.element().scrollTop top
        
data.element().scrollTop top
        
scrollbars.element().scrollTop top
    } 

    if (
data.element().offsetHeight data.element().scrollTop 
        
row.element().offsetTop row.element().offsetHeight ) { 
        
top row.element().offsetTop row.element().offsetHeight data.element().offsetHeight
        
left.element().scrollTop top
        
data.element().scrollTop top
        
scrollbars.element().scrollTop top
    } 

catch(error){ 
    
// ignore errors 



obj.timeout(function(){ 
scrollIntoView.call(obj51); 
}, 
100); 



</
script
Tuesday, February 15, 2005



This topic is archived.

Back to /active.howto.scroll/scroll-into-view.html

Documentation:

Forum search