:: Forum >> Version 2 >>

Strange "onmouseoverheader-after-sortchange" behaviour in grid 2.5.1 with IE6

After migrating from 2.0.2 to 2.5.1 I have a new, undesired behaviour with Internet Explorer 6.0:

When changing the sort order by clicking on the respective header column, the grid content is changed accordingly. But as soon as I move the mouse pointer afterwards, the browser jumps automatically to approx. middle position of the grid.

This behaviour didn't occur with 2.0.2 at all and doesn't occur with FireFox.

Please verify the following source code:

<code>

<HTML>
<HEAD>
</HEAD>
<BODY>
<CENTER>

<SCRIPT src="aw.js"></SCRIPT>
<LINK href="aw.css" rel=stylesheet></LINK>

<STYLE>
#grid1 .aw-column-0 { WIDTH: 650px; TEXT-ALIGN: left }
#grid1 .aw-column-1 { WIDTH: 100px; TEXT-ALIGN: right }
#grid1 .aw-column-2 { WIDTH: 100px; TEXT-ALIGN: right }
#grid1 .aw-column-3 { WIDTH: 140px; TEXT-ALIGN: right }
</STYLE>

<SCRIPT>
function myColor(util)
{
utilX = parseInt(util*2.55)
utilnegX = 255 - utilX
red = utilX.toString(16)
if ( utilX <= 15 ) red = "0" + red
green = utilnegX.toString(16)
if ( utilnegX <= 15 ) green = "0" + green
return "#" + red + green + "00"
}

var myCells2=[
["test",2,1,50.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
["test",1,1,100.00],
]

var obj=new AW.UI.Grid
var columns = [ "Name" , "Number" , "In-Use" , "Utilization" ]
var mystring = new AW.Formats.String
var myint = new AW.Formats.Number
var myfloat = new AW.Formats.Number
myfloat.setTextFormat("###.## %")

obj.clearRowModel()
obj.setRowCount(100)
obj.setControlSize(1000,1900)
obj.setCellData(myCells2)
obj.setHeaderText(columns)
obj.setScrollBars('none');
obj.setId("grid1")
obj.setColumnCount(4)
obj.setCellFormat([mystring,myint,myint,myfloat])
obj.setVirtualMode(false)
obj.setSelectionMode("single-row")
obj.sort(3,"descending")
obj.getScrollTemplate().setEvent("onmousewheel","")

for ( x = 0 ; x < obj.getRowCount() ; x++ )
{
obj.getCellTemplate(3,x).setStyle("color",myColor(obj.getCellData(3,x)))
obj.setCellText(obj.getCellText(0,x).replace(/ /g, "&nbsp;"),0,x)
}

document.write(obj)

</SCRIPT>

</CENTER>
</BODY>
</HTML>

</code>

Thank you in advance for your ideas.
sysadm
Wednesday, April 9, 2008
sorry, here is the respective code again:

<HTML>
<
HEAD>
</
HEAD>
<
BODY>
<
CENTER>

<
SCRIPT src="aw.js"></script>
<
LINK href="aw.css" rel=stylesheet></LINK>

<
STYLE>
#grid1 .aw-column-WIDTH650pxTEXT-ALIGNleft }
#grid1 .aw-column-WIDTH100pxTEXT-ALIGNright }
#grid1 .aw-column-WIDTH100pxTEXT-ALIGNright }
#grid1 .aw-column-WIDTH140pxTEXT-ALIGNright }
</
STYLE>

<
SCRIPT>
function 
myColor(util)
{
utilX parseInt(util*2.55)
utilnegX 255 utilX
red 
utilX.toString(16)
if ( 
utilX <= 15 red "0" red
green 
utilnegX.toString(16)
if ( 
utilnegX <= 15 green "0" green
return "#" red green "00"
}

var 
myCells2=[ 
[
"test",2,1,50.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
[
"test",1,1,100.00],
]

var 
obj=new AW.UI.Grid
var columns = [ "Name" "Number" "In-Use" "Utilization" ]
var 
mystring = new AW.Formats.String
var myint = new AW.Formats.Number
var myfloat = new AW.Formats.Number
myfloat
.setTextFormat("###.## %")

obj.clearRowModel()
obj.setRowCount(100)
obj.setControlSize(1000,1900)
obj.setCellData(myCells2)
obj.setHeaderText(columns)
obj.setScrollBars('none');
obj.setId("grid1")
obj.setColumnCount(4)
obj.setCellFormat([mystring,myint,myint,myfloat])
obj.setVirtualMode(false)
obj.setSelectionMode("single-row")
obj.sort(3,"descending")
obj.getScrollTemplate().setEvent("onmousewheel","")

for ( 
obj.getRowCount() ; x++ )
{
obj.getCellTemplate(3,x).setStyle("color",myColor(obj.getCellData(3,x)))
obj.setCellText(obj.getCellText(0,x).replace(/ /g"&nbsp;"),0,x)
}

document.write(obj)

</
script>

</
CENTER>
</
BODY>
</
HTML>

 
sysadm
Wednesday, April 9, 2008
The same unappreciated behaviour occurs with IE7, too.

Thank you for any hints & ideas!
sysadm
Wednesday, April 9, 2008
Try adding this code -

obj.onHeaderClicked = function(){
    
this.setTimeout(function(){
        
this.focus();
    });
}
 
It does not solve it 100%, but at least this is some improvement.
Alex (ActiveWidgets)
Wednesday, April 9, 2008
Hi Alex,

thanks for your response. I've checked your code and it does improve the behaviour. But, I wonder whether you are intending to fix that "focus jump" completely in a version to come? If not, I might have to stick to version 2.0.2, which I'm very happy with btw.

Well, your product is awesome, anyway!
sysadm
Friday, April 11, 2008



This topic is archived.

Back to support forum

Forum search