:: Forum >> Version 2 >>
Scroll Bar BUG found in Grid
Hi all,
I have just found a bug in Grid's Scroll component. It looks above code working correct accept Scroll realted bug of the grid.
If you were try the code you see that problem arises after
alert( strVars ); line, which is at the end of ExpandRow() method.
Scroll bar goes top when we clicked on below rows..
<html>
<head>
<script src="../../source/lib/aw.js"></script>
<link href="../../source/styles/xp/aw.css" rel="stylesheet"></link>
</head>
<body>
This example shows a grid inserted within a grid. It also illustrates how to expand a row when the plus is clicked. Note that the inserted grid (grid2) is used repeatedly so only 1 row can be expanded at a time. You also could replace grid2 with another AW object such as radio buttons or checkboxes. <b>There are a few bugs in the scrollbar code. The inserted grid seems to inherit scrollbar properties from the main grid.</b>
<style>
#Mygrid { font: menu ; margin: 3px 3px 3px 3px; }
#Mygrid .aw-item-text { vertical-align: top; }
#Mygrid .aw-alternate-even { BACKGROUND: #f0fff0 }
#Mygrid .aw-alternate-odd { BACKGROUND: #ffffafa }
#Mygrid .aw-mouseover-row { BACKGROUND: #b0e0e6; }
#Mygrid .aw-rows-selected { BACKGROUND: #008b8b }
#Mygrid .aw-column-0 {width: 20px; border-right: 1px dotted #ccc}
#Mygrid2 {width: 100px;}
#Mygrid2 .aw-column-0 {width: 100px; border-right: 1px dotted #ccc}
</style>
<script>
var myData = [
["+","2/1/2006", "Tom Smith", "Message 1"],
["+","2/1/2006", "Mary Smith", "Message 2"],
["+","2/1/2006", "Ed Barns", "Message 3"],
["+","2/1/2006", "Lisa Jones", "Message 4"],
["+","2/1/2006", "Henry Young", "Message 5"],
["+","2/1/2006", "Billy Edwards", "Message 6"],
["+","2/1/2006", "Emily Sanders", "Message 7"],
["+","2/1/2006", "Bert Norris", "Message 8"],
["+","2/1/2006", "John Doe", "Message 9"],
["+","2/1/2006", "Tom Smith", "Message 10"],
["+","2/1/2006", "Tom Smith", "Message 11"],
["+","2/1/2006", "Mary Smith", "Message 12"],
["+","2/1/2006", "Ed Barns", "Message 13"],
["+","2/1/2006", "Lisa Jones", "Message 14"],
["+","2/1/2006", "Henry Young", "Message 15"],
["+","2/1/2006", "Billy Edwards", "Message 16"],
["+","2/1/2006", "Emily Sanders", "Message 17"],
["+","2/1/2006", "Bert Norris", "Message 18"],
["+","2/1/2006", "John Doe", "Message 19"]
];
var myData2 = [
["2/1/2006", "Rob Francis", "Reply 0"],
["2/1/2006", "Ogur", "Reply 1"],
["2/1/2006", "Rob Francis", "Reply 2"],
["2/1/2006", "Rob Francis", "Reply 3"]
["2/1/2006", "Ahmet", "Reply 4"],
["2/1/2006", "Faruk", "Reply 5"],
["2/1/2006", "Nacaroglu", "Reply 6"],
];
var myColumns = [ "", "Date", "From", "Subject"];
var myColumns2 = ["Date", "From", "Subject"];
</script>
</head>
<body>
<script>
AW.Grid.Controllers.Overflow._adjustScrollBars = AW.Grid.Controllers.Overflow.adjustScrollBars;
AW.Grid.Controllers.Overflow.adjustScrollBars = function()
{
//alert( this.getId() + " --> adjust scrollbars called.." );
this._overflowController._adjustScrollBars.call(this);
// I just hate this freaking long sentence ;)
function getById(id)
{
return document.getElementById(id);
}
var id = this.getId();
var overflow = "hidden";
var overflowX = "hidden";
var overflowY = "hidden";
var marginRight = "0px";
var paddingBottom = "0px";
var spacerWidth;
var spacerHeight;
var contentHeight;
var contentWidth;
// if not rendered yet
if (!this.element())
{
return;
}
switch (this.getScrollBars())
{
case "none":
spacerWidth = "0px";
spacerHeight = "0px";
contentHeight = "100%";
contentWidth = "100%";
break;
case "both":
overflow = "scroll";
overflowX = "scroll";
overflowY = "scroll";
marginRight = "20px";
paddingBottom = "20px";
break;
case "vertical":
overflowY = "scroll";
marginRight = "20px";
spacerWidth = "0px";
contentHeight = "100%";
break;
case "horizontal":
overflowX = "scroll";
paddingBottom = "20px";
spacerHeight = "0px";
contentWidth = "100%";
break;
}
getById(id + "-scroll").runtimeStyle.paddingBottom = paddingBottom;
getById(id + "-scroll-box").runtimeStyle.overflow = overflow;
getById(id + "-scroll-box").runtimeStyle.overflowX = overflowX;
getById(id + "-scroll-box").runtimeStyle.overflowY = overflowY;
getById(id + "-scroll-content").runtimeStyle.marginRight = marginRight;
if (contentWidth)
{
getById(id + "-scroll-content").runtimeStyle.width = contentWidth;
}
if (contentHeight)
{
getById(id + "-scroll-content").runtimeStyle.height = contentHeight;
}
if (spacerWidth)
{
getById(id + "-scroll-box-spacer").runtimeStyle.width = spacerWidth;
}
if (spacerHeight)
{
getById(id + "-scroll-box-spacer").runtimeStyle.height = spacerHeight;
}
}; //adjustScrollBars
var obj = new AW.UI.Grid;
obj.setId('Mygrid');
obj.setCellText(myData);
obj.setHeaderText(myColumns);
obj.setRowCount(19);
obj.setColumnCount(4);
obj.setSelectorVisible(false);
obj.setSelectorWidth(28);
obj.setHeaderHeight(20);
obj.setCellEditable(false); // disable editing
obj.setSelectionMode("single-row");
obj.setControlSize(500, 300); // width, height
obj.setVirtualMode(false);
///////////// V A R S ////////////////
var actualRow ;
var lastRow ;
var lastCol;
var expandedrow=false;
var defRowH = obj.getRowHeight(0); //get default row height size
var custRowH = 110; // define your custom row height
var diffRowH = custRowH - defRowH // calculates difference
//**************************************//
var i=-1;
//**************************************//
obj.onCellClicked = function(event, column, row)
{
//alert( this.getId() + " --> On clicked called...");
window.status = "Cell " + column + "." + row + " clicked"
if (column==0)
{
//alert(" Here is column 0 ")
actualRow = row;
var grid2= new AW.UI.Grid;
grid2.setId('Mygrid2'+row);
grid2.setStyle('width', '100%');
grid2.setStyle('HEIGHT', custRowH-31 );
grid2.setStyle('BACKGROUND', 'lightyellow' );
grid2.setStyle('COLOR', 'BLUE' );
grid2.setStyle('FONT', 'MENU' );
grid2.setCellText(myData2);
grid2.setHeaderText(myColumns2);
grid2.setRowCount(myData2.length);
grid2.setColumnCount(3);
grid2.setSelectorVisible(true);
grid2.setSelectorWidth(28);
grid2.setHeaderHeight(20);
grid2.setRowHeight(20);
grid2.setCellEditable(true); // disable editing
grid2.setSelectionMode("single-cell");
grid2.setControlSize(400, 80); // width, height
obj.getRowTemplate(row).setContent('whatdoesthisdo', '<div style="position: absolute; left: 25; top: 20; width: 400; z-index: 1000000">'+grid2+'</div>');
//obj.getRowTemplate(row).refresh();
if ( expandedrow==true)
{
if (lastRow!=row)
{
//obj.getRowTemplate(lastRow).setContent('whatdoesthisdo', '');
//obj.getRowTemplate(lastRow).refresh();
}
}
//this.refresh();
ExpandRow( );
lastRow=row;
//obj.setCurrentRow( actualrow);
//obj.setSelectedRows([actualrow]);
//obj.raiseEvent("editCurrentCell");
//obj.raiseEvent("adjustScrollHeight");
alert( obj.getCurrentRow() );
}
} // En of onCellDoubleClicked handler..
//*************************************************//
/// Function to expand collapse row
//*************************************************//
function ExpandRow( )
{
var actualrowHeight = obj.getRowTemplate(actualRow).getStyle("height");
expandedrow=true;
var scrollfirst = obj.getScrollTop();
var scrollheight = obj.getScrollHeight();
//alert( "actualrowHeight: " + actualrowHeight + " \n lastRow: " + lastRow + "\n defRowH: " + defRowH );
if( lastRow > 0 )
{
//alert(" lastRow is true.. ");
if( actualrowHeight == defRowH || actualrowHeight == undefined )
{
obj.getRowTemplate(actualRow).setStyle("height", custRowH);
obj.setCellText("-",0,actualRow);
scrollheight = scrollheight + diffRowH;
}
else
{
obj.getRowTemplate(actualRow).setStyle("height", defRowH );
obj.setCellText("+",0,actualRow);
scrollheight = scrollheight - diffRowH;
}
}
else //first click in the grid
{
obj.getRowTemplate(actualRow).setStyle("height", custRowH);
obj.setCellText("-",0,actualRow);
scrollheight = scrollheight + diffRowH;
}
obj.getRowTemplate(actualRow).refresh();
obj.setScrollTop(scrollfirst);
obj.setScrollHeight( scrollheight );
//alert( "Scroll Height: " + scrollheight );
var strVars = "" ;
strVars += "actualrowHeight: " + actualrowHeight + " \n ";
strVars += " diffRowH: " + diffRowH + "\n";
strVars += "scrollFirst: " + scrollfirst + " \n ";
strVars += "scrollheight: " + scrollheight + " \n ";
strVars += "controlHeight: " + obj.getStyle("height") + "\n";
strVars += "actualrow : " + actualRow + "\n";
alert( strVars );
}
//*********************************//
document.write(obj);
</script>
<script>
function newWin(){
win= window.open('','_blank');
var results =document.documentElement.innerHTML;
var match = "<";
var re = new RegExp("<", "g");
var newresults = results.replace(re, "<");
win.document.write(newresults );
}
</script>
<input type="button" value="tikla" onclick="newWin()">
<br>
<input type="button" value="Model" onclick="MyTestFunc()">
<DIV id="deneme"></DIV>
</body>
</html>
Brad
Tuesday, May 9, 2006
This topic is archived.
Back to support forum
Forum search
