:: Forum >> Version 2 >>
Help - Dancing Scroll bar
I am trying to add a counter to display the # of rows displayed on the grid EG 1-5 of 10
As well as keep the relative row selected when scrolling.
EG If the third row is selected then after scroll the third row from the top will be selected.
I kind of have this working but if the user selects the first or last row visible in the grid then the scroll bar 'does a little dance'.
That is it will jump al the way to the top and or bottom during the midle of a scroll.
Any thoughts:
Her is the code I have to date.
<HTML>
<HEAD>
<title>Producer Code Selection Screen</title>
<link rel="stylesheet" type="text/css" href="./runtime/styles/xp/aw.css">
<SCRIPT LANGUAGE='JavaScript' SRC='./runtime/lib/aw.js'></script>
<SCRIPT LANGUAGE='JavaScript'>
var rtnVal = new Array();
rtnVal[0] ="N";
rtnVal[1] ="";
rtnVal[2] ="User X'ed out";
var myData2 = [['11110','BOB FIRM','BOB PARENT','NOTE5 THIS IS TO ILLUSTRATE THAT SOME NOTES MAY BE VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY LONGISH!!','P' ],
['22221','AMERICAN GENERAL SECURITIES INCORPORATED','AMERICAN GENERAL SECURITIES INCORPORATED','NOTE 1','A' ],
['22222','ADVANTAGE - NEW YORK','ADVANTAGE - HEAD OFFICE','THIS IS MY NOTE','A' ],
['22223','COMMONWEALTH EQUITY','COMMONWEALTH EQUITY PARENT','THIS IS A NOTE','A' ],
['22224','CBIZ SPECIAL RISK INSURANCE SERVICES INC','CBIZ PARENT','NOTES ARE OFF VARYING LENGTH SOME NEED TO BE VIEWED VIA THE FULL TEXT WINDOW','A' ],
['22225','FIDELITY FINANCIAL GR','FIDELITY _HEAD OFFICE','A AM GETTING BORED MAKING UP NOTES','A' ],
['22226','MERRILL LYNCH - GEORGIA/MACON','MERRILL LYNCH - HEAD OFFICE','ME TOO','A' ],
['22227','TIME FINANCIAL','TIME FINANCIAL - HEAD OFFICE','HEY WHO WAS THAT','A' ],
['22228','CASSANI & ASSOCIATES INSURANCE SERVICES INC.','CASSANI & ASSOCIATES INSURANCE SERVICES INC.','JUST THE VOICE IN YOUR HEAD','A' ],
['22229','BB&T INSURANCE SERVICES INC.','HEAD OFFICE - BB&T INSURANCE SERVICES INC.','OH - NOT HIM AGAIN','A' ]];
var name = "Collaborative Insurance Agency Inc.";
var productType = "TRAD";
var taxId ="12-3456789";
var wholesaleFlag = "Y";
var statCompany = "019";
var errMsg = ""
var PolNo = "12345678";
var InsuredName ="John Q. Public";
var SolState = "CA";
var AppDate = "12/31/2006";
function init() {
window.document.myForm.textName.value = name;
window.document.myForm.textType.value = productType;
window.document.myForm.textTax.value = taxId;
window.document.myForm.textWholesale.value = wholesaleFlag;
//window.document.myForm.textCompany.value = statCompany;
window.document.myForm.textMsg.value = errMsg;
// WE WILL GET EITHER VALID DATA OR AN ERROR MESSAGE NOT BOTH
// IN THEORY
if (myData2.length > 0 && errMsg.length < 1 ) {
//DATA ONLY
document.all.Grid.style.display = '' ;
document.all.Msg.style.display = 'none';
obj.setCellData(myData2);
obj.setRowCount(myData2.length);
var mywidth = parseInt(obj.getColumnWidth(3))
setcolWidth(mywidth, 3);
obj.raiseEvent("adjustScrollHeight");
obj.raiseEvent("adjustScrollBars");
obj.refresh();
}
updategrid2Count();
btn_eval();
}
function setcolWidth(width, col) {
if (col ==3 ){
for(var i=0; i < obj.getRowCount() ; i++) {
if (width < 20){ width = 20;}
var colwidth = width-20;
obj.setCellText("<span STYLE='position: absolute; padding: 2px 0px 0px 1px; width="+colwidth+"px; overflow: hidden; text-overflow: ellipsis'>"+obj.getCellData(col,i)+"</span>",col,i);
}
}
}
function isRecordSelected() {
if (myData2.length == null || myData2.length == 0){
return false;
} else {
var aSelected = obj.getSelectedRows();
if (aSelected.length<1){
return false;
} else {
return true;
}
}
}
function btn_eval() {
var e = window.document.getElementsByName('dynbtn');
for(var i=0;i < e.length;i++){
if(isRecordSelected()) {
e[i].className = "minibuttonOn";
} else {
e[i].className = "minibuttonOff";
}
}
}
function validate_OK() {
//rtnVal = new Array();
var prodCode = "";
var state = "";
//DISABLE OK BUTTON IF NOW RECORDS ARE SELECTED
if (!isRecordSelected()){
return;
}
//GET SELECTED DATA
var aSelectedRows = obj.getSelectedRows();
for (i=0 ; i<aSelectedRows.length;i++) {
prodCode = myData2[aSelectedRows[i]][0];
state = myData2[aSelectedRows[i]][4];
}
//SET RETURN VALUE
if (state=="A") {
rtnVal[0] ="Y";
rtnVal[2] = "Active";
}else{
rtnVal[0] ="P";
rtnVal[2] = "Pended";
}
rtnVal[1] = prodCode;
//RETURN TO SIEBEL
self.close();
}
function validate_Cancel() {
//rtnVal = new Array();
var bConfirm = true;
/*if (isRecordSelected()) {
bConfirm = confirm("You have selected a producer code.\n\rClicking the Cancel button will not update the producer Siebel record.\r\n\r\nDo you want to continue?");
}*/
//if (bConfirm) {
//SET RETURN VALUE
rtnVal[0] ="N";
rtnVal[1] ="";
rtnVal[2] ="Close Button";
//RETURN TO SIEBEL
self.close();
//}
}
function validate_Notify() {
//rtnVal = new Array();
var bConfirm = true;
var confirmMsg = "You are about to notify Agency with the following information:\r\n";
confirmMsg = confirmMsg + "\tName:\t\t\t"+name+"\r\n";
confirmMsg = confirmMsg + "\tSSN/Tax ID:\t\t" + taxId +"\r\n";
confirmMsg = confirmMsg + "\tWholesale Indicator:\t" + wholesaleFlag +"\r\n";
confirmMsg = confirmMsg + "\tPolicy Number:\t\t" + PolNo +"\r\n";
confirmMsg = confirmMsg + "\tInsured Name:\t\t" + InsuredName +"\r\n";
confirmMsg = confirmMsg + "\tType of Business:\t\t" + productType +"\r\n";
confirmMsg = confirmMsg + "\tState of Solicitation:\t" + SolState +"\r\n";
confirmMsg = confirmMsg + "\tApplication Date:\t\t" + AppDate +"\r\n\r\n";
confirmMsg = confirmMsg + "Do you want to continue?";
if (bConfirm) {
bConfirm = confirm(confirmMsg);
}
if (bConfirm) {
//SET RETURN VALUE
rtnVal[0] ="R";
rtnVal[1] ="";
rtnVal[2] ="";
//RETURN TO SIEBEL
self.close();
}
}
function updategrid2Count(preTopRow,value) {
//reset updategridIns row count label
var topRow, btmRow , selectedRows, selectedRow, selectOffset, newRow, x;
if (myData2.length == null || myData2.length == 0) {
grid2Count.setControlText("No Records");
} else {
topRow = Math.round((obj.getScrollTop()/18)+1);
btmRow = topRow + 4;
if (topRow < 1 || topRow > myData2.length || btmRow < 1 || btmRow > myData2.length ){
return;
}
if (btmRow > myData2.length) {
btmRow = myData2.length ;
}
grid2Count.setControlText(topRow + " - " + btmRow +" of " + (myData2.length));
}
topRow = topRow -1;
btmRow = btmRow -1;
selectedRows = obj.getSelectedRows();
//if (selectedRows.length>0 ){
if (selectedRows.length>0 ){
selectedRow = parseInt(selectedRows[0]);
// must deal with sorted rows
/**/
a = new Array();
a=obj.getRowIndices();
var i;
if (a == null || a =="" ){
selectOffset = selectedRow-preTopRow;
newRow = topRow+selectOffset;
//alert("PRE:"+topRow+"TOP:"+topRow+"SEL:"+selectedRow+"NEW:"+newRow);
} else {
for (x = 0; x < a.length; x++) {
if (a[x] == selectedRow){
break;
}
}
selectOffset = x-(preTopRow); //alert(x);
//newRow = a[(topRow+selectOffset>a.length-1?a.length-1:topRow+selectOffset)];
var nrIdx = topRow+selectOffset;
//if (nrIdx>a.length -1) {nrIdx = a.length -1;}
if (nrIdx>a.length -1) {nrIdx = x; }
//if (nrIdx<0) {nrIdx = 0;}
if (nrIdx<0) {nrIdx = x;}
newRow = a[nrIdx];
}
//setTimeout(function(){ obj.setSelectedRows([newRow]) ,0})
//setTimeout(function(){ obj.setCurrentRow(newRow) ,0})
obj.setSelectedRows([newRow]);
obj.setCurrentRow(newRow) ;
}
}
function descOpen(mytext) {
var myURL = "./textView.html?"+mytext;
var winview = window.showModalDialog(myURL, "winview ", "dialogWidth:444px; dialogHeight:303px; location:no;directories:no;resizable:yes;status:no;copyhistory:no; scrollbars:no ");
}
////////////////////////////////////////////////////////////////////////
// ActiveWidgets Grid Control script/////
////////////////////////////////////////////////////////////////////////
var currentRow = 0;
// new cell template class
var MyTemplate = AW.Templates.Text.subclass();
MyTemplate.create = function(){
var obj = this.prototype;
// hides/shows indicator depending on cell/indicator poperty
obj.setClass("indicator", function(){
return this.getControlProperty("indicator") ? "visible" : "hidden";
});
// indicator span element
var indicator = new AW.HTML.SPAN;
indicator.setClass("item", "indicator");
indicator.setEvent("onclick", function(){
this.raiseEvent("onCellIndicatorClicked");
});
obj.setContent("box/indicator", indicator);
}
</script>
<style>
body,
td,
tr {font-family: Arial,Helvetica,Sans-Serif; font-size: 8pt; height:12pt; border:0}
table {width:100%}
input {overflow:hidden; text-overflow: ellipsis; font-family: Arial,Helvetica,Sans-Serif; font-size: 8pt; height:14pt; background:#DEDEDE }
body {background-color:#F0F0F0 }
radio {background:#F0F0F0 ! important }
.querytable,
.querytable TD,
.querytable TH { background-color:#6666CC; color:white}
.darktable,
.darktable TD,
.darktable TH { background-color:#CECECE; }
.header {font-family: Arial,Helvetica,Sans-Serif; font-size:8pt; font-weight:bold; height:24pt; background:#F0F0F0; border-style:none; overflow:hidden; }
.error {font-family: Arial,Helvetica,Sans-Serif; font-size:8pt; font-weight:bold; color:red; height: 142px; width:100%; background:#F0F0FO; overflow:; }
/*----------------------------*/
/*HTML Mini-Button Definitions*/
/*----------------------------*/
.minibutton {}
.minibuttonOn { font-size: 8pt; color: black; text-decoration:none; }
.minibuttonOn A,
.minibuttonOn A:link,
.minibuttonOn A:visited,
.minibuttonOn A:hover
{padding:0 5 0 5; color:#000000; border-width:1; border-style:solid; border-color:#666666; background-color:#DEDEDE; text-decoration:none; height:16;}
.minibuttonOn A:hover
{border-color:#000000;background-color:#ffffff;}
.minibuttonOff {text-decoration:none; font-size:8pt;}
.minibuttonOff A,
.minibuttonOff A:link,
.minibuttonOff A:visited,
.minibuttonOff A:hover
{padding:0 5 0 5; color:#9D9DA1; border-width:1; border-style:solid; border-color:#C4C3BF; background-color:#F1F1ED; text-decoration:none; height:16; font-size:8pt; }
.aw-row-selector {text-align: right; font-family : Arial, Helvetica, Verdana, sans-serif;font-size:11px; font-weight: bold; }
#bad .aw-templates-header { font-size:11px;font-family:Arial,Helvetica,Verdana,sans-serif; font-weight:;bold:; color: black; background :#0AC8C8;}
.aw-templates-header { font-size:11px;font-family:Arial,Helvetica,Verdana,sans-serif; font-weight:;bold:; color: black; background :#F0F0F0;}
.aw-grid-column { border-right: 1px solid C0C0C0;}
.aw-grid-header {border-right: 1px solid C0C0C0; font-family : Arial, Helvetica, Verdana, sans-serif;font-size:11px; font-weight: bold; background : #F0F0F0;}
#grid2bad .aw-grid-header {border-right: 1px solid C0C0C0; font-family : Arial, Helvetica, Verdana, sans-serif; font-size:11px; font-weight: bold; }
.aw-grid-row {border-bottom: 1px solid C0C0C0;}
#grid2 {height: 122px; width:100%; margin: 0px; border:; font: menu; }
#grid2cary {height: 178px; width:100%; margin: 0px; border:; font: menu; }
.aw-column-0 {width: 50px; threedlightshadow} /*Producer Code*/
.aw-column-1 {width: 220px; } /*ORG*/
.aw-column-2 {width: 220px; } /*Parent*/
.aw-column-3 {text-overflow:clip!important; width: 130px; } /*Remarks*/
.aw-rows-selected { color: black; background: #EFEF99;}
.aw-grid-cell {border-right: 1px solid C0C0C0; font-family : Arial, Helvetica, Verdana, sans-serif;font-size:11px; font-weight:}
#mygrid2Count {top: 0; height:11px; width:70px; text-align:left; color: white; font-size:11px; font-family:Arial,Helvetica,Verdana,sans-serif;}
.aw-item-indicator {
display: none; /* hidden by default */
position: absolute;
overflow: hidden;
right: 2px;
top: 4px;
width: 10px;
height: 10px;
background-image:url(./admfiles/images/fulltextsm.gif);
cursor: pointer;
}
.aw-indicator-visible .aw-item-indicator {
display: block; /* visible */
}
</style>
</HEAD>
<BODY onload=init()>
<form name='myForm'><TABLE class=querytable Border=0 CELLPADDING=0 CELLSPACING=0 BORDER=0>
<!-- <TR><TD><img src='./images/spacer.gif'height=1 width=20></TD><TD colspan=3 width=500>The following are the producer code(s) retrieved from Agency for:</TD> </TR> -->
<TR><TD><img src='./images/spacer.gif'height=1 width=20></TD><TD colspan=1><nobr><img src='./images/spacer.gif' height=1 width=21 border=0><B>Name: </B><INPUT TYPE=textarea size=64,10 READONLY=true value='' id=textName name=textName></nobr></TD><TD><nobr><img src='./images/spacer.gif' height=1 width=3 border=0><B>SSN/Tax ID: </B><INPUT TYPE=textarea size=9 READONLY=true value='' id=textTax name=textTax> </nobr></TD> </TR>
<TR><TD><img src='./images/spacer.gif'height=11 width=20></TD><TD ><B> </B></TD> </TR>
<TR><TD><img src='./images/spacer.gif'height=1 width=20></TD><TD><nobr><B> Business: </B><INPUT TYPE=textarea size=3 READONLY=true value='' id=textType name=textType> </nobr></TD><TD><nobr><img src='./images/spacer.gif' height=1 width=1 border=0><B>Wholesale: </B><INPUT TYPE=textarea READONLY=true size=1 value='' id=textWholesale name=textWholesale> </nobr></TD><TD ><nobr><img src="./admfiles/images/bar.gif" align=absmiddle><script>
var grid2Count = new AW.UI.Label;
grid2Count.setId("mygrid2Count"); // necessary for CSS rules
grid2Count.setControlText("No Records");
document.write(grid2Count);
</script></nobr><TD></TR>
</TABLE>
<div id=Msg style='width:100%; padding:0 0 0 20; border: 0px solid red;' onmouseover="btn_eval()">
<TABLE id='gridBorder' WIDTH=100% CELLPADDING=0 CELLSPACING=0 style='border:2px solid #CCCCCC'>
<TR><TD>
<INPUT TYPE=textarea class=error READONLY=true value='' id=textMsg name=textMsg>
</TD></TR>
</TABLE>
</div >
<div id=Grid style='width:100%; padding:0 0 0 0; border: 0px solid red;' onmouseover="btn_eval()">
<TABLE id='gridBorder' WIDTH=100% CELLPADDING=0 CELLSPACING=0 style='border:2px solid #CCCCCC'>
<TR><TD>
<SCRIPT LANGUAGE='JavaScript'>
var myColumns = ['Code','Org','Parent','Remarks' ];
//var myColumns2 = ['Code','','','' ];
var obj = new AW.UI.Grid;
//var obj = new AW.Grid.Extended; //buggy
obj.setId('grid2');
obj.setCellData(myData2);
//obj.setHeaderCount(2);
obj.setHeaderText(myColumns);
//obj.setHeaderText(myColumns2, 1);
obj.setRowCount(myData2.length);
obj.setColumnCount(4);
obj.setSelectorVisible(true);
obj.setSelectorResizable(false);
obj.setVirtualMode(false);
//set headers width/height
obj.setSelectorWidth(14);
obj.setHeaderHeight(29);
//obj.setHeaderHeight(40);
//set row selection
obj.setSelectionMode('single-row');
// new cell property hides/shows indicator sign
obj.defineCellProperty("indicator", false);
// show for cell co-3
obj.setCellIndicator(true,3);
// our new template for col-3
obj.setCellTemplate(new MyTemplate, 3);
obj.onCellIndicatorClicked = function(event, col, row){
var mytext = myData2[row][col];
descOpen(mytext);
};
//SET NO ROWS SELECTED
obj.setCurrentRow();
obj.setSelectedRows([]);
//write grid html to the page
document.write(obj);
document.all.Grid.style.display = '';
document.all.Msg.style.display = '';
obj.onHeaderClicked = function(event, index){
setTimeout(function(){ updategrid2Count(Math.round(obj.getScrollTop()/18),0),0})
};
/*obj.onSelectedRowsChanged = function() {
setTimeout(function(){ obj2.setSelectedRows([obj.getSelectedRows()]) ,0})
}; */
var lastTopPos;
//Trigger to recalculate row x of x
obj.onScrollTopChanging = function(value){
lastTopPos =Math.round(obj.getScrollTop()/18);
};
obj.onScrollTopChanged = function(value){
updategrid2Count(lastTopPos,value);
};
// code to display arrow selector
obj.onCurrentRowChanged = function(value) {
var lastRow = currentRow;
currentRow = value;
// move the current row indicator
this.setSelectorText("", lastRow);
this.getSelectorTemplate(lastRow).refresh();
this.setSelectorText(">", currentRow);
//this.setSelectorText("<img src='./admfiles/images/selectArrow.gif'>", currentRow);
this.getSelectorTemplate(value).refresh();
};
obj.onColumnWidthChanged = function(width, column){
setcolWidth(width, column);
};
</script>
</TD></TR>
</TABLE>
</div >
<TABLE class=darktable WIDTH=100% border='1'onmouseover="btn_eval()">
<TR><TD HEIGHT=20 ALIGN=RIGHT >
<div>
<nobr><span id='dynbtn' class='minibuttonOff'><a href='JavaScript:void(0)' onclick='validate_OK(); return false;' tabindex=0 >OK</a></span>
<span class='minibuttonOn'><a href='JavaScript:void(0)' onclick='validate_Notify(); return false;' tabindex=0 >Notify Agency</a></span>
<span class='minibuttonOn'><a href='JavaScript:void(0)' onclick='validate_Cancel(); return false;' tabindex=0 >Cancel</a></span>
<!--<span class='minibuttonOn'><a href='JavaScript:void(0)' onclick='viewSource(); return false;' tabindex=0 >Source</a></span> --></nobr>
</div >
</TD></TR>
<TR><TD>
</TD></TR>
</TABLE>
</form>
</BODY>
</HTML>
Colin P.
Monday, October 23, 2006
*Bump*
Any Ideas.
I think it maybe a timing thing.
If scroll slowly the 'dance' does not happen.
I tried putting in timeouts but that only made things worse.
Any help would be appreciated
Colin P.
Tuesday, October 24, 2006
Colin,
you have to make sure that the row which you select after the scroll is fully visible. Otherwise the grid will scroll again in order to move the current row into the visible area. This triggers onScrollTopChanged event and you may get into 'dancing scrollbar' or even infinite loop depending on how the rounding works.
Alex (ActiveWidgets)
Tuesday, October 24, 2006
Alex,
Thank you for your response.
I have observed the behaviour you have mentioned above.
When scrolling the row I am trying to select may not be 'FULLY' visible and in that case I see a minor 'dance' or jump in the scroll bar as the selected row scrolls into view.
I and the users find this minor jump acceptable.
The behaviour I am trying to avoid is when rows 4 -9 are visible and I am trying to scroll to 5-10 I can see the scrollbar jump right to the top (1-5) this is also reflected in my counter it will jump to 1-5 of 10.
Again this is only if I have the first or last row selected and I am grabbing the scroll bar (with the mouse) and scrolling quickly.
It does not happen on 'slow' scrolls or when using the arrow buttons.
A guess in theory with the speed of the scroll and the time to do the calculation that the selected row may be well out of range.
Is there a way to detemine that scrolling is complete ( the user has released the scrollbar and do my calculation and reselect then?
I think I saw another post on "scrollbar losing focus" with no answer.
P.S. Sorry about the Canadian spelling of behaviour.
Colin P.
Tuesday, October 24, 2006
Alex,
I can reproduce the behaviour on the sample provided with the download. It is just a simpler example of the problem.
See below.
I am still wondering if there a way to determinE when the scrollbar has lost focus? (ie. the user has released the scrollbar)
If there is I could do my logic on that event.
OR
Is there a metod to call to return a range of "visible" rows?
Then I could rework my logic!
<html>
<head>
<title>ActiveWidgets Grid :: Examples</title>
<style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>
<!-- ActiveWidgets stylesheet and scripts -->
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet" type="text/css" ></link>
<script src="../../runtime/lib/aw.js"></script>
<!-- grid format -->
<style>
.aw-grid-control {height: 100%; width: 100%; margin: 0px; border: none; font: menu;}
.aw-row-selector {text-align: center}
.aw-column-0 {width: 80px;}
.aw-column-1 {width: 200px;}
.aw-column-2 {text-align: right;}
.aw-column-3 {text-align: right;}
.aw-column-4 {text-align: right;}
.aw-grid-cell {border-right: 1px solid threedlightshadow;}
.aw-grid-row {border-bottom: 1px solid threedlightshadow;}
</style>
<!-- grid data -->
<script>
var myData = [
["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],
["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],
["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],
["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"],
["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],
["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"],
["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"],
["INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"],
["ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"],
["PSFT", "PeopleSoft, Inc.", "8,246.467", "1,941.167", "8180"],
["SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"],
["BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"],
["SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254"],
["CHKP", "Check Point Software Tech", "4,396.853", "424.769", "1203"],
["MERQ", "Mercury Interactive Corp.", "4,325.488", "444.063", "1822"],
["DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"],
["CTXS", "Citrix Systems, Inc.", "3,946.485", "554.222", "1670"],
["KNM", "Konami Corporation (ADR)", "3,710.784", ".000", "4313"]
];
var myColumns = [ "Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"];
</script>
</head>
<body>
<script>
// create ActiveWidgets Grid javascript object
var obj = new AW.UI.Grid;
// define data formats
var str = new AW.Formats.String;
var num = new AW.Formats.Number;
obj.setCellFormat([str, str, num, num, num]);
// provide cells and headers text
obj.setCellText(myData);
obj.setHeaderText(myColumns);
// set number of rows/columns
obj.setRowCount(20);
obj.setColumnCount(5);
// enable row selectors
obj.setSelectorVisible(true);
obj.setSelectorText(function(i){return this.getRowPosition(i)+1});
// set headers width/height
obj.setSelectorWidth(28);
obj.setHeaderHeight(20);
// set row selection
obj.setSelectionMode("single-row");
obj.setVirtualMode(false);
// set click action handler
obj.onCellClicked = function(event, col, row){window.status = this.getCellText(col, row)};
obj.setControlSize(500, 131); // width, height
// write grid html to the page
document.write(obj);
var lastTopPos;
//TRIGGER FOR COUNTER REFRESH - VERTICAL SCROLL
obj.onScrollTopChanging = function(value){
lastTopPos =Math.round(obj.getScrollTop()/18);
};
obj.onScrollTopChanged = function(value){
updategrid2Count(lastTopPos,value);
};
// END OF COUNTER REFRESH TRIGGER
function updategrid2Count(preTopRow,value) {
//REFRESH grid2Count LABEL
var rowsToAdd = 4;
var topRow, btmRow , selectedRows, selectedRow, selectOffset, newRow, x;
if (myData.length == null || myData.length == 0) {
// This would update a label not needed to show issue
grid2Count.setControlText("No Records");
} else {
topRow = Math.round((obj.getScrollTop()/18)+1);
btmRow = topRow + rowsToAdd;
if (topRow < 1 ){
topRow = 1
}
if (topRow > myData.length ){
topRow = myData.length
}
if (btmRow < 1){
btmRow = 1
}
if (btmRow > myData.length) {
btmRow = myData.length ;
}
// This would update a label not needed to show issue
// grid2Count.setControlText(topRow + " - " + btmRow +" of " + (myData.length));
}
topRow = topRow -1;
btmRow = btmRow -1;
selectedRows = obj.getSelectedRows();
if (selectedRows.length>0 ){
selectedRow = parseInt(selectedRows[0]);
// MUST DEAL WITH SORTED ROWS
a = new Array();
a=obj.getRowIndices();
var i;
if (a == null || a =="" ){
selectOffset = selectedRow-preTopRow;
newRow = topRow+selectOffset;
//alert("PRE:"+topRow+"TOP:"+topRow+"SEL:"+selectedRow+"NEW:"+newRow);
} else {
for (x = 0; x < a.length; x++) {
if (a[x] == selectedRow){
break;
}
}
selectOffset = x-(preTopRow); //alert(x);
//newRow = a[(topRow+selectOffset>a.length-1?a.length-1:topRow+selectOffset)];
var nrIdx = topRow+selectOffset;
//if (nrIdx>a.length -1) {nrIdx = a.length -1;}
if (nrIdx>a.length -1) {nrIdx = x; }
//if (nrIdx<0) {nrIdx = 0;}
if (nrIdx<0) {nrIdx = x;}
newRow = a[nrIdx];
}
obj.setSelectedRows([newRow]);
obj.setCurrentRow(newRow) ;
}
}
</script>
</body>
</html>
Colin P.
Tuesday, October 24, 2006
This may not be the perfect solution, but you can try this:
var timer = null;
myGrid.onScrollTopChanged = function(){
if (timer) {
clearTimeout(timer);
}
timer = setTimeout("theCode()", 250);
};
function theCode() {
alert(myGrid.getScrollTop());
// your code
}
It waits for 250 ms each time onScrollTopChanged is called.
If it is called again before 250 ms, it stops the previous timer and starts it again to wait another 250 ms.
theCode() is called after the user stops scrolling - or pauses longer than 250 ms.
This code has saved my day many times, but there might be a better solution.
If anyone knows of one, please do post.
Ankur
Ankur Motreja
Tuesday, October 24, 2006
Thanks Ankur
Your Idea looked promising - I like the stopping of the previous timer.
But, I said previously, I have tried timers before but they seem to make it worse. If I set the pause to 0 on this example it is still worse than no pause (I guess just the time to evaluate the timeout statement).
Unless there is a fundamental flaw in my logic or approach I may have to live with the 'dance'.
Any other thoughts?? Anyone??
Colin P.
Wednesday, October 25, 2006
This topic is archived.
Back to support forum
Forum search
