SpreadJS and Viewports

A viewport in SpreadJS is the visible area of the sheet (excluding headers, the tab strip, and the scroll bar). You may want to know the visible area of the widget if you plan to display a floating object based on which rows are visible or want to save or load data based on the visible area. This information may also be useful if the user scrolls and changes the visible area. SpreadJS has several methods to get rows or columns for the viewports. The methods include:

• getViewportTopRow
• getViewportBottomRow
• getViewportLeftColumn
• getViewportRightColumn

SpreadJS also has methods for getting the height or width of the viewport. The methods include:

• getViewportWidth
• getViewportHeight

The viewport area is split into nine areas (three rows and three columns) which includes frozen and trailing frozen column or row areas. The index parameter for the viewport method refers to the specific viewport area.

Use an index of 1 for the viewport area that does not contain frozen or trailing frozen rows or columns. This refers to the non-frozen area. An index of 0 refers to the frozen rows or columns. An index of 2 refers to trailing frozen rows or columns. If the sheet does not have frozen rows, then a viewport index of 0 or 1 for the top row returns the same value. A viewport index of 2 returns the trailing viewport top row index. For example, Sheet.getViewportTopRow(2) means get the trailing viewport top row index. If there are no trailing frozen rows, then the top row index should be the last row index of viewport 1. If there is a trailing frozen row, then the last row index of viewport 1 is changed, and the last row index of viewport 2 is changed. For example, the top row result is changed to 197 in the following frozen trailing row example. The following examples get the top row for different viewport areas. The examples use Internet Explorer and the console to return the results. The following code returns “0 : 0 : 200”. Default Spread

var spread = new GcSpread.Sheets.Spread($("#ss").get(0));  
var sheet = spread.getActiveSheet();  
//No frozen header line  
var vp0tr = sheet.getViewportTopRow(0);  
var vp1tr = sheet.getViewportTopRow(1);  
var vp2tr = sheet.getViewportTopRow(2);  
console.log(vp0tr + " : " + vp1tr + " : " + vp2tr);  

The following code returns “0 : 2 : 200”. Frozen Rows

//Have frozen header line  
sheet.setFrozenRowCount(2);  
vp0tr = sheet.getViewportTopRow(0);  
vp1tr = sheet.getViewportTopRow(1);  
vp2tr = sheet.getViewportTopRow(2);  
console.log(vp0tr + " : " + vp1tr + " : " + vp2tr);  

The following code returns “0 : 0 : 197”. Frozen Trailing Rows

//Trailing frozen line  
sheet.setFrozenTrailingRowCount(3);   
vp0tr = sheet.getViewportTopRow(0);  
vp1tr = sheet.getViewportTopRow(1);  
vp2tr = sheet.getViewportTopRow(2);  
console.log(vp0tr + " : " + vp1tr + " : " + vp2tr);  

The following examples return the results for the getViewportBottomRow method. The following code returns “-1 : 13 : 199”.

var vp0tr = activeSheet.getViewportBottomRow(0);  
var vp1tr = activeSheet.getViewportBottomRow(1);  
var vp2tr = activeSheet.getViewportBottomRow(2);  
console.log(vp0tr + " : " + vp1tr + " : " + vp2tr);  

The following code returns “1 : 13 : 199”.

activeSheet.setFrozenRowCount(2);  
var vp0tr = activeSheet.getViewportBottomRow(0);  
var vp1tr = activeSheet.getViewportBottomRow(1);  
var vp2tr = activeSheet.getViewportBottomRow(2);  
console.log(vp0tr + " : " + vp1tr + " : " + vp2tr);  

The following code returns “-1 : 10 : 199”.

activeSheet.setFrozenTrailingRowCount(3);  
var vp0tr = activeSheet.getViewportBottomRow(0);  
var vp1tr = activeSheet.getViewportBottomRow(1);  
var vp2tr = activeSheet.getViewportBottomRow(2);  
console.log(vp0tr + " : " + vp1tr + " : " + vp2tr);  

The following examples return the results for the getViewportLeftColumn method. The following code returns the result “0 : 0 : 20”.

var vp0tr = activeSheet.getViewportLeftColumn(0);  
var vp1tr = activeSheet.getViewportLeftColumn(1);  
var vp2tr = activeSheet.getViewportLeftColumn(2);  
console.log(vp0tr + " : " + vp1tr + " : " + vp2tr);  

The following code returns the result “0 : 2 : 20”.

activeSheet.setFrozenColumnCount(2);  
var vp0tr = activeSheet.getViewportLeftColumn(0);  
var vp1tr = activeSheet.getViewportLeftColumn(1);  
var vp2tr = activeSheet.getViewportLeftColumn(2);  
console.log(vp0tr + " : " + vp1tr + " : " + vp2tr);  

The following code returns the result “0 : 0 : 17”. Frozen Trailing Columns

activeSheet.setFrozenTrailingColumnCount(3);  
var vp0tr = activeSheet.getViewportLeftColumn(0);  
var vp1tr = activeSheet.getViewportLeftColumn(1);  
var vp2tr = activeSheet.getViewportLeftColumn(2);  
console.log(vp0tr + " : " + vp1tr + " : " + vp2tr);  

The following examples return the results for the getViewportRightColumn method. The following code returns the result “-1 : 7 : 19”.

var vp0tr = activeSheet.getViewportRightColumn(0);  
var vp1tr = activeSheet.getViewportRightColumn(1);  
var vp2tr = activeSheet.getViewportRightColumn(2);  
console.log(vp0tr + " : " + vp1tr + " : " + vp2tr);  

The following code returns the result “1 : 7 : 19”.

activeSheet.setFrozenColumnCount(2);  
var vp0tr = activeSheet.getViewportRightColumn(0);  
var vp1tr = activeSheet.getViewportRightColumn(1);  
var vp2tr = activeSheet.getViewportRightColumn(2);  
console.log(vp0tr + " : " + vp1tr + " : " + vp2tr);  

The following code returns the result “-1 : 4 : 19”.

activeSheet.setFrozenTrailingColumnCount(3);  
var vp0tr = activeSheet.getViewportRightColumn(0);  
var vp1tr = activeSheet.getViewportRightColumn(1);  
var vp2tr = activeSheet.getViewportRightColumn(2);  
console.log(vp0tr + " : " + vp1tr + " : " + vp2tr);