3.2.0
Forum Demo Guide API Store

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> &nbsp;&nbsp;</nobr></TD> </TR>
        <TR><TD><img src='./images/spacer.gif'height=11 width=20></TD><TD ><B>&nbsp;</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> &nbsp;&nbsp;</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>&nbsp;&nbsp;</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>&nbsp;
        </TD></TR>
    </TABLE> 
    </form> 	
</BODY>
</HTML>
Colin P.
October 23,
*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.
October 24,
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)
October 24,
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.
October 24,
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.
October 24,
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
October 24,
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.
October 25,

This topic is archived.

See also:

No Scroll Bars after adding data Jim Hunter (12)
combo box scroll bar issue in Chrome -gil (11)
Double Click on Combo Scroll bar? mrhsh (9)
Scrolling in grid in Firefox causes the whole page to scroll to the top Maggie M (9)
Adobe AIR - Grid Scroll Bars Not Working Chris M. (8)
Help?!-Posting cell data to new window? max freeman (17)
Alex, We could use a little help Column Resizing Jim Shaffer (15)
Html help. (14)
Page scrolls to top when I scroll in grid - Firefox only Fionn (6)
How to change list items color on onmouseover and onmouseOut and adding scroll bar sufiya (6)

Back to support forum

Search

New Data Grid
Angular Data Grid
React Data Grid
Vue Data Grid
Svelte Data Grid

Version 2

Looking for AW 2.6 ?
The old site is here.

ActiveWidgets is a javascript library for creating user interfaces. It offers excellent performance for complex screens while staying simple, compact and easy to learn. Deployed by thousands of commercial customers in more than 70 countries worldwide.

Copyright © ActiveWidgets 2021
Getting Started
 
Sample Code API Reference Support Forum Prices & Licensing
 
Contact Us