:: Forum >> Version 1 >>

Can I specify the starting position for a table?

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

#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.
Chunkai
Friday, July 23, 2004
<div>Hello World!!!</div How will you position this ? Using CSS-P, right?

Trying doing same for grid too.
Sudhaker Raj
Saturday, July 24, 2004
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
Thursday, August 12, 2004
Fred, that's right. That's what I asked. Sorry for confusion...
chunkai
Thursday, August 12, 2004

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).
Sudhaker Raj
Thursday, August 12, 2004
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 
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(obj15);
});

 
You should call it after document.write(obj)
Alex (ActiveWidgets)
Thursday, August 12, 2004
Does that function go into grid.js? and if so, where?
Mobasoft
Wednesday, January 26, 2005
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.
Mobasoft
Wednesday, January 26, 2005
Okay - the break worked!

I finally see that the 15 in

obj.timeout(function(){ 
    
scrollIntoView.call(obj15); 
});  
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"!

Michael
Wednesday, January 26, 2005
I found some anomolies with

obj.timeout(function(){ 
    
scrollIntoView.call(objmySelectedIndex); 
});  
and found that
obj.timeout(function(){ 
    
scrollIntoView.call(thismySelectedIndex); 
});  
works 100% each time.
Mobasoft
Thursday, January 27, 2005
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.
Mobasoft
Thursday, January 27, 2005
Can someone else check out that code and see if their vertical scrollbar is also not positioned to where the activerow is displayed?
Mobasoft
Thursday, January 27, 2005
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.
Gil
Monday, February 14, 2005
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?
Justin
Thursday, February 24, 2005
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.
Mark
Tuesday, March 1, 2005
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 
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
    
}
 
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
Tuesday, March 1, 2005
Mark, Thanks for sharing your idea. I've tried it in a few places, and it seems perfect so far! Thanks again.
Justin
Wednesday, March 2, 2005
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.
dave
Monday, May 23, 2005
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
Internet Marketing eBook
Sunday, May 14, 2006
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
Marco Bergen
Monday, December 11, 2006
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
aditya
Friday, August 17, 2007
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
adityaC
Wednesday, August 29, 2007



This topic is archived.

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

Documentation:

Forum search