Start Building Professional
Web Apps Today

Some dynamic rows randomly not loading in grid

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




<rows pos="0" total_count="99961">
−
<row>
<cell>01/16/09 14:54:30</cell>
<cell><b>199734</b></cell>
<cell>9205705</cell>
<cell>15.6</cell>
<cell>OK</cell>
<cell>/images/icons/24-checkout-green.png^OK</cell>
<cell>/images/icons/24-payment-green.png^OK</cell>
<cell>NS</cell>
<cell>MB</cell>
<cell>CA</cell>
<cell>username</cell>
<cell>firstname</cell>
<cell>lastname</cell>
<cell>email</cell>
<cell/>
<cell>city</cell>
<cell>state</cell>
</row>
−
<row>
<cell>01/16/09 14:53:35</cell>
<cell><b>199732</b></cell>
<cell>9205704</cell>
<cell>12.99</cell>
<cell>OK</cell>
<cell>/images/icons/24-checkout-green.png^OK</cell>
<cell>/images/icons/24-payment-green.png^OK</cell>
<cell>NS</cell>
<cell>MB</cell>
<cell>CA</cell>
<cell>username</cell>
<cell>firstname</cell>
<cell>lastname</cell>
<cell>email</cell>
<cell/>
<cell>city</cell>
<cell>state</cell>
</row>
−
<row>
<cell>01/16/09 14:53:01</cell>
<cell><b>199040</b></cell>
<cell>9205703</cell>
<cell>11.35</cell>
<cell>OK</cell>
<cell>/images/icons/24-checkout-green.png^OK</cell>
<cell>/images/icons/24-payment-green.png^OK</cell>
<cell>NS</cell>
<cell>MM</cell>
<cell>CA</cell>
<cell>username</cell>
<cell>firstname</cell>
<cell>lastname</cell>
<cell>email</cell>
<cell/>
<cell>city</cell>
<cell>state</cell>
</row>










<center>
<div id="gridbox" width="100%" height="400px" style="background-color:white;overflow:hidden"></div></center>

<div style="display:none">
<div id="div_invoice_id"><input id="filter_invoice_id" size="6" style="font-size:9px;border:1px solid gray;" onclick="(arguments[0]||window.event).cancelBubble=true;" onchange="applyFilter()"></div>
<div id="div_site_order_id"><input id="filter_site_order_id" size="6" style="font-size:9px;border:1px solid gray;" onclick="(arguments[0]||window.event).cancelBubble=true;" onchange="applyFilter()"></div>
<div id="div_order_total"><input id="filter_order_status_code" size="5" style="font-size:9px;border:1px solid gray;" onclick="(arguments[0]||window.event).cancelBubble=true;" onchange="applyFilter()"></div>
<div id="div_order_status_code"><input id="filter_order_status_code" size="2" style="font-size:9px;border:1px solid gray;" onclick="(arguments[0]||window.event).cancelBubble=true;" onchange="applyFilter()"></div>
<div id="div_checkout_status_code"><input id="filter_checkout_status_code" size="2" style="font-size:9px;border:1px solid gray;" onclick="(arguments[0]||window.event).cancelBubble=true;" onchange="applyFilter()"></div>
<div id="div_payment_status_code"><input id="filter_payment_status_code" size="2" style="font-size:9px;border:1px solid gray;" onclick="(arguments[0]||window.event).cancelBubble=true;" onchange="applyFilter()"></div>
<div id="div_shipping_status_code"><input id="filter_shipping_status_code" size="2" style="font-size:9px;border:1px solid gray;" onclick="(arguments[0]||window.event).cancelBubble=true;" onchange="applyFilter()"></div>
<div id="div_brand_code"><input id="filter_brand_code" size="2" style="font-size:9px;border:1px solid gray;" onclick="(arguments[0]||window.event).cancelBubble=true;" onchange="applyFilter()"></div>
<div id="div_site_code"><input id="filter_site_code" size="2" style="font-size:9px;border:1px solid gray;" onclick="(arguments[0]||window.event).cancelBubble=true;" onchange="applyFilter()"></div>
<div id="div_site_username"><input id="filter_site_username" size="10" style="font-size:9px;border:1px solid gray;" onclick="(arguments[0]||window.event).cancelBubble=true;" onchange="applyFilter()"></div>
<div id="div_shipping_first_name"><input id="filter_shipping_first_name" size="9" style="font-size:9px;border:1px solid gray;" onclick="(arguments[0]||window.event).cancelBubble=true;" onchange="applyFilter()"></div>
<div id="div_shipping_last_name"><input id="filter_shipping_last_name" size="9" style="font-size:9px;border:1px solid gray;" onclick="(arguments[0]||window.event).cancelBubble=true;" onkeyup="applyFilter()"></div>
<div id="div_shipping_email"><input id="filter_shipping_email" size="17" style="font-size:9px;border:1px solid gray;" onclick="(arguments[0]||window.event).cancelBubble=true;" onchange="applyFilter()"></div>
<div id="div_shipping_day_phone"><input id="filter_shipping_day_phone" size="9" style="font-size:9px;border:1px solid gray;" onclick="(arguments[0]||window.event).cancelBubble=true;" onchange="applyFilter()"></div>
<div id="div_shipping_city"><input id="filter_shipping_city" size="8" style="font-size:9px;border:1px solid gray;" onclick="(arguments[0]||window.event).cancelBubble=true;" onchange="applyFilter()"></div>
<div id="div_shipping_state"><input id="filter_shipping_state" size="2" style="font-size:9px;border:1px solid gray;" onclick="(arguments[0]||window.event).cancelBubble=true;" onchange="applyFilter()"></div>
</div>

<style>
.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;
}

</style>


<script>
mygrid = new dhtmlXGridObject('gridbox');

function applyFilter(){
var params

params = ''
if (document.getElementById('filter_invoice_id').value!='')
params += '&invoice_id=' +document.getElementById('filter_invoice_id').value
if (document.getElementById('filter_site_order_id').value!='')
params += '&site_order_id=' +document.getElementById('filter_site_order_id').value
if (document.getElementById('filter_order_status_code').value!='')
params += '&order_status_code=' +document.getElementById('filter_order_status_code').value
if (document.getElementById('filter_checkout_status_code').value!='')
params += '&checkout_status_code=' +document.getElementById('filter_checkout_status_code').value
if (document.getElementById('filter_payment_status_code').value!='')
params += '&payment_status_code=' +document.getElementById('filter_payment_status_code').value
if (document.getElementById('filter_shipping_status_code').value!='')
params += '&shipping_status_code=' +document.getElementById('filter_shipping_status_code').value
if (document.getElementById('filter_brand_code').value!='')
params += '&brand_code=' +document.getElementById('filter_brand_code').value
if (document.getElementById('filter_site_code').value!='')
params += '&site_code=' +document.getElementById('filter_site_code').value
if (document.getElementById('filter_site_username').value!='')
params = params + ('&site_username=' +document.getElementById("filter_site_username").value)
if (document.getElementById('filter_shipping_first_name').value!='')
params += '&shipping_first_name=' +document.getElementById('filter_shipping_first_name').value
if (document.getElementById('filter_shipping_last_name').value!='')
params += '&shipping_last_name=' +document.getElementById('filter_shipping_last_name').value
if (document.getElementById('filter_shipping_email').value!='')
params += '&shipping_email=' +document.getElementById('filter_shipping_email').value
if (document.getElementById('filter_shipping_day_phone').value!='')
params += '&shipping_day_phone=' +document.getElementById('filter_shipping_day_phone').value
if (document.getElementById('filter_shipping_city').value!='')
params += '&shipping_city=' +document.getElementById('filter_shipping_city').value
if (document.getElementById('filter_shipping_state').value!='')
params += '&shipping_state=' +document.getElementById('filter_shipping_state').value

mygrid.clearAll();
mygrid.loadXML("/orders/xml?x="+params, function(){window.setTimeout(function(){mygrid.setSizes();},1);});
}

function sortGridOnServer(column_index,gridObj,sort_order){
mygrid.clearAll();
mygrid.loadXML("/orders/xml?" + "column_index=" + column_index + "&sort_order=" + sort_order,function(){window.setTimeout(function(){mygrid.setSizes();},1);});
mygrid.setSortImgState(true,column_index,sort_order);
return false;
}

mygrid.attachEvent("onBeforeSorting",sortGridOnServer);

mygrid.setImagePath("/javascripts/dhtmlxgrid/codebase/imgs/");
mygrid.setHeader("\
Date,\
Invoice #<div id='hdr_invoice_id'></div>,\
Order ID<br><div id='hdr_site_order_id'></div>,\
Total<br><div id='hdr_order_total'></div>,\
Order<br><div id='hdr_order_status_code'></div>,\
Checkout<br><div id='hdr_checkout_status_code'></div>,\
Payment<br><div id='hdr_payment_status_code'></div>,\
Shipping<br><div id='hdr_shipping_status_code'></div>,\
Brand<br><div id='hdr_brand_code'></div>,\
Site<br><div id='hdr_site_code'></div>,\
Username<br><div id='hdr_site_username'></div>,\
First name<br><div id='hdr_shipping_first_name'></div>,\
Last name<br><div id='hdr_shipping_last_name'></div>,\
Email<br><div id='hdr_shipping_email'></div>,\
Day phone<br><div id='hdr_shipping_day_phone'></div>,\
City<br><div id='hdr_shipping_city'></div>,\
State<br><div id='hdr_shipping_state'></div>,\
");

mygrid.setInitWidths("105,60,60,60,60,60,60,60,60,60,95,75,75,150,80,80,60");
mygrid.setColTypes("ro,ro,ro,ro,ro,img,img,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro")
mygrid.setColSorting("server,server,server,server,server,server,server,server,server,server,server,server,server,server,server,server,server");
mygrid.setColAlign("right,center,center,right,center,center,center,center,center,center,left,left,left,left,right,left,center");
mygrid.attachFooter("{#stat_count} orders,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan");
mygrid.setColumnColor(",#6699cc")
    
mygrid.enableRowsHover(true,'grid_hover')

mygrid.setSkin("clear");
mygrid.preventIECaching(true);
mygrid.init();
mygrid.enableAlterCss("even_row","odd_row");
mygrid.enableSmartRendering(true,100);
mygrid.loadXML("/orders/xml",function(){window.setTimeout(function(){mygrid.setSizes();},1);});

document.getElementById("hdr_invoice_id").appendChild(document.getElementById("div_invoice_id").childNodes[0]);
document.getElementById("hdr_site_order_id").appendChild(document.getElementById("div_site_order_id").childNodes[0]);
document.getElementById("hdr_order_total").appendChild(document.getElementById("div_order_total").childNodes[0]);
document.getElementById("hdr_order_status_code").appendChild(document.getElementById("div_order_status_code").childNodes[0]);
document.getElementById("hdr_checkout_status_code").appendChild(document.getElementById("div_checkout_status_code").childNodes[0]);
document.getElementById("hdr_payment_status_code").appendChild(document.getElementById("div_payment_status_code").childNodes[0]);
document.getElementById("hdr_shipping_status_code").appendChild(document.getElementById("div_shipping_status_code").childNodes[0]);
document.getElementById("hdr_brand_code").appendChild(document.getElementById("div_brand_code").childNodes[0]);
document.getElementById("hdr_site_code").appendChild(document.getElementById("div_site_code").childNodes[0]);
document.getElementById("hdr_site_username").appendChild(document.getElementById("div_site_username").childNodes[0]);
document.getElementById("hdr_shipping_first_name").appendChild(document.getElementById("div_shipping_first_name").childNodes[0]);
document.getElementById("hdr_shipping_last_name").appendChild(document.getElementById("div_shipping_last_name").childNodes[0]);
document.getElementById("hdr_shipping_email").appendChild(document.getElementById("div_shipping_email").childNodes[0]);
document.getElementById("hdr_shipping_day_phone").appendChild(document.getElementById("div_shipping_day_phone").childNodes[0]);
document.getElementById("hdr_shipping_city").appendChild(document.getElementById("div_shipping_city").childNodes[0]);
document.getElementById("hdr_shipping_state").appendChild(document.getElementById("div_shipping_state").childNodes[0]);

mygrid.setSizes();



</script>

>>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.
Most probably you have images, which height is bigger than default row height, as result height of row increased while grid uses default height in calculation - which lead to incorrect position calculation and white-space during scrolling. 

>>Does Grid support PNG images?
yes, it not a problem in common case

>>Is there a way to make the Grid load the missing rows?
You can use next command
         grid.setAwaitedRowHeight(height);

where height - real height of row in pixels

Thank you for your fast response. You really know your product!

The images were 24 pixels tall. I changed them down to 12 pixels and that helped.
I also set  mygrid.setAwaitedRowHeight(12)  and that helped even more, but I still have the problem. It's not as bad as before, but still does it every time.
Just the single action of scrolling to the middle or end of the Grid will cause the problem. Some of the rows don't show.

I tried  mygrid.setAwaitedRowHeight(14) to give the rows more pixels than the images, but that didn't make a difference.
Is there anything else I can try?

Thanks in advance,
-Sterling

 

The default height of row is about 20px ( differ for different skins ) , so if you have changed image size to  12-14 px you need not use setAwaitedRowHeight at all, grid will use default value and it will work correctly. 

>>Is there anything else I can try?
You can try to enable multiline mode ( grid.enableMultiline )
In multiline mode grid doesn't use fixed row height but auto-size them by content size and use same approach for position calculations during smart rendering.