:: 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>
</