Display a range of data from a .CSV file

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
http://www.activewidgets.com/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.

Brain cramp.
Didn't mean to display link to original topic as code. Anyway. . .

http://www.activewidgets.com/javascript.forum.1668.5/can-i-specify-the-starting.html

See what I mean when I say I could use some help.

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:

http://www.activewidgets.com/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(table, data);

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

}
...
table.request();

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(table, data); 

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, 51); 
}, 100); 

} 

</SCRIPT>