Can I specify the starting position for a table?

#grid1 {height: 100; border: 2px inset; background: white}
#grid1 .active-column-1 {width: 200px; background color:threedlightshadow;}
.....
For the setting part, we can specify the height of a table, but how can I set the starting position of the table? The tables look very nice. Thanks for your good work.

<div>Hello World!!!</div>

How will you position this ? Using CSS-P, right?

Trying doing same for grid too.

I think Chunkai means:
" How can I set the scroll of a large table so that row #103 appears at the top of the cliping window of the widget."

I don't think that Sudhaker Raj's answer is relavent to my phrasing of the question.

Can anyone answer my question?

Fred, that's right. That's what I asked. Sorry for confusion...

var nextTopIndex = 11; // starts from zero, this is 12th

// @@@ step1 - set selectionIndex to last row
// use Data or Row, what ever was used initially in set
// obj.setProperty("selection/index", obj.getDataProperty("count") - 1);
obj.setProperty("selection/index", obj.getRowProperty("count") - 1);

// @@@ step2 - set selection to desired index
obj.setProperty("selection/index", nextTopIndex);

// @@@ step3 - unselect the selection
obj.setProperty("selection/index", -1);

You can skip step1, if you only care to have the desired row in visible area (can be anywhere, either top or bottom).

Here is the code for scrolling the row into view without selecting it

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

You should call it after document.write(obj)

Does that function go into grid.js? and if so, where?

Nevermind - I was overthinking it. I placed the code above just after the document.write(obj) as stated. Before, I was trying to actually call the scrollIntoView() function and pass in my desired selectedIndex value.

It didn't work, obviously.

Now, I see that the function gets called automatically when the page loads, however, the selected row still isn't 'scrolled into view'.

I've been wrestling with this for over 7 hours now - time to take a break and re-group.

Okay - the break worked!

I finally see that the 15 in

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

is the value of the row which I would want to have 'scrolled into view'.

Man, it is still amazing how simple this is, once I "get it"!

I found some anomolies with

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

and found that

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

works 100% each time.

Scratch that last comment - anomolies are still there.

Even though my selected row is highlighted and in the viewable area, the scroll bar is sometimes still in the uppermost position when the grid loads.

Can someone else check out that code and see if their vertical scrollbar is also not positioned to where the activerow is displayed?

A little help please. . .

I need to display different ranges of data from the same .CSV file. The intent is to give the user 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 Alex's code 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? (I'm using a linked CSV file)

2.I pasted the code into my file and followed the instructions from Alex regarding positioning the code AFTERdocument.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.

On 27 January 2005 in this topic, Mobasoft asked "Can someone else check out that code and see if their vertical scrollbar is also not positioned to where the activerow is displayed?".

I've checked it out, and found the same thing. It's brilliant that the code scrolls the highlighted row into view. It would be perfect if the scroll bar moved to the corresponding place as well. Has anyone solved this?

For me, it does scroll the scrollbar correctly. However, if there is a horizontal scrollbar, and the grid is autoscrolling down, then the scrolled to item does not come fully into view, but remains behind the horizontal scrollbar.

I'm not sure how to fix this. Can anyone help?

Thanks.

I don't know if this will help anyone else, but I've temporarily gotten around both problems (not moving scrollbar and not showing bottom item when horizontal scrollbar) by adding a delay before I call ScrollIntoView (which is what I suspect is the purpose of using obj.timeout to call it, but which didn't work for me). It seems that calling the ScrollIntoView code too quickly causes to work strangely.

I renamed ScrollIntoView to _ScrollIntoView and then added another function called ScrollIntoView that sets a timeout and then calls the old _ScrollIntoView. The code looks like this:

function ScrollIntoView(index){
    window.setTimeout("_ScrollIntoView.call(obj, "+index+");", 500);
  }
  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
    }

Then to call it, you just do:
ScrollIntoView(12); // 12 is the index

I experimented with different timeout values and 500 seemed to work all of the time. You might try lower values if that's too long for you. Again, I'm not extremely familiar with the grid and don't know if this is the correct solution. But, it works for me for now, so I HTH.

Is there a better solution?

Thanks again.

Mark, Thanks for sharing your idea. I've tried it in a few places, and it seems perfect so far! Thanks again.

does scrollIntoView() work for grids with large datasets? (there is a several-second delay before the scrollbar even appears on the grid due to the amount of data.)
thanks.

Love your work guy,

Is there a way to embed images as into the column sorting, or is it best just to use url addresses instead?

Cheers
http://www.loihuynh.com/cubecart

the script does work... the given row is selected and visible but the scrollbar at the left is still at the top of his bar...

when start draging the scrollbar a little bit the grid jumps to its beginning even when the selected row is the last one in the grid...

IE and firefox

I want to generate dynamic(auto refreshing after 3 minutes) html page from dynamically(auto refreshing in 3 minutes) excel file is it possible?Then how?
pls help

Can anyone suggest me
1. how to go for genertaion of text file from a webpage(html or asp) in linux.
2. How to generate web page from CSV format file ,where fields in html page are predefined, means u just need to fetch contents from csv n place in webpage fields.

Thanks