I’m using the grid component to dynamically load data from a 100,000 record MySql database using XML and FireFox.
It works great! Thanks for the great component!
However, when I repeatedly scroll the grid too fast, or repeatedly click the area in the vertical scroll bar below the slider to jump to the next pages too quickly, some of the rows never load. I can slowly scroll back and forth and wait, but they never load.
The Grid is acting as if it thinks those rows have already been loaded and are being displayed, but they are not.
This problem started after adding an image column to the XML data ang Grid:
xml.cell “/images/icons/24-payment-green.png^ok”
and updating the Grid setColType from “ro” to “img”
If there is no image in the Grid, I do not have this problem. When there is an image in the Grid, I have a problem.
If I change the setColType from “img” back to “ro” the problem goes away. So, the problem is definitely related to the image.
Also, if I have an image in the Grid and I scroll slowly making sure to give the Grid plenty of time to fully load any new dynamic rows before scrolling to the next page I have no problem. But in real life, users don’t scroll that slowly.
So the problem is with the image and scrolling too fast. Grid thinks it’s loaded rows that it has not loaded.
Am I loading the image wrong?
Does Grid support PNG images?
Is there a way to make the Grid load the missing rows?
Sample XML data and Grid code is included below.
Thank you in advance for your help,
-Sterling
−
01/16/09 14:54:30
199734
9205705
15.6
OK
/images/icons/24-checkout-green.png^OK
/images/icons/24-payment-green.png^OK
NS
MB
CA
username
firstname
lastname
email
city
state
−
01/16/09 14:53:35
199732
9205704
12.99
OK
/images/icons/24-checkout-green.png^OK
/images/icons/24-payment-green.png^OK
NS
MB
CA
username
firstname
lastname
email
city
state
−
01/16/09 14:53:01
199040
9205703
11.35
OK
/images/icons/24-checkout-green.png^OK
/images/icons/24-payment-green.png^OK
NS
MM
CA
username
firstname
lastname
email
city
state
.grid_hover {
background-color:#000000;
color:#FFFFFF;
font-size:20px;
}
.odd_row{
background-color:#FFFFFF;
}
.even_row{
background-color:#BBDDFF;
}
div.gridbox_clear table.hdr td {
font-size:9px;
vertical-align:bottom;
text-align:center;
}
div.gridbox_clear table.hdr td div.hdrcell{
padding-left:0px;
padding-bottom:0px;
}