3.2.0
Forum Demo Guide API Store

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
April 9,
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-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>
sysadm
April 9,
The same unappreciated behaviour occurs with IE7, too.

Thank you for any hints & ideas!
sysadm
April 9,
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)
April 9,
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
April 11,

This topic is archived.

See also:

This example shows how to Drag and Drop Rows in a v2.0 Grid to change the row order Rob Francis (59)
Search Grid Column For Match Joe (45)
Grid in Grid - Inner grid lacks scroolbars Diego Vilar (13)
2.0 - I need a Grid inside a Grid Rob Francis (17)
Refresh Grid joe (27)
Grid Cell Not Displaying White Spaces Jez (True Track Software) (24)
Undesired sort-behaviour in grid 2.5.3 with IE catdxm (10)
Correct way to update table model in Extended Grid Curt K. (19)
Example - saving editable grid data to the server Alex (ActiveWidgets) (18)
How do you add an image to the first column in a grid? L. Aragon (17)

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