Start Building Professional
Web Apps Today

SmartRendering

I'm using the standard edition of the dhtmlxGrid (which is really amazing), but I'm running into a problem with the SmartRendering feature. The problem is if I scroll down that sometimes some rows end up not being displayed due to the grid controller sending an incorrect posStart value. Instead there are blank rows in between data. What happens is that I send the first 100 rows and they are displayed fine. If I move the scroll bar down to the bottom of the data that is cached and just beyond it then sometimes the grid controller sends posStart 110 (for example) instead of posStart 101. That new data is displayed starting at position 110 which leaves 10 blank rows. If I scroll up above position 100 far enough then it will ask for more data and may get the missing data.

If I move the scrollbar long distances down then it is more likely to display this problem (no rows are displayed but there is some data further down that is loaded but off the screen).

I have double checked that the number of totalrows I'm sending (in the first <rows> field) is correct. It is as if it thinks that the rows which are being viewed are below what is actually being viewed since it consistently sends a request for data that is below where I'm currently viewing. I tried hard-coding the number of total rows in the enableSmartRendering function but that didn't help. I also tried changing the height of the container but that didn't help either.

I tried different sets of data too (957 entries, 536 entries, 2585 entries) but they all had the same problem.

I've included parts of my code below in case it will help you diagnose the problem.

<div id="mygrid_container" style="width:600px;height:450px;"></div>
<script>
function doInitGrid() {
mygrid = new dhtmlXGridObject('mygrid_container');
mygrid.setImagePath("/imgs/");
mygrid.setHeader("Date,Value,Average,#cspan");
mygrid.setInitWidths("75,55,55,55");
mygrid.setColAlign("center,center,center,center");
mygrid.setColTypes("ro,ro,ro,ro");
mygrid.attachHeader("#rspan,#rspan,5,20");
mygrid.setSkin("light");
mygrid.enableLightMouseNavigation(true);
mygrid.init();
mygrid.enableSmartRendering(true);
mygrid.loadXML("/mypath/mydata?myval=test&myval2=test2");
}
</script>


----code to generate xml:---

rows = "<rows total_count='#{@totalcount}' pos='#{@posStart}'>\n"
values.each_with_index { |value, index|
rows << "<row id = '#{index+@posStart.to_i}'>\n" +
"<cell>#{value.date}</cell>\n" +
"<cell>#{value.close}</cell>\n" +
"<cell>-</cell>\n" +
"</row>\n"
}
rows << "</rows>"

------

Any suggestions would be greatly appreciated!

Steve

The smart rendering mode based on fixed row height. Component knows height of row for all predefined skins, so it able to calculate current in-grid position based on scroll state.
It possible that you are using some kind of custom styling - in such case you may have row height different from default one , as result it will cause incorrect in-grid position calculations and incorrect request to the server side code.

Please try to add next command
    mygrid.enableSmartRendering(true);
    mygrid.setAwaitedRowHeight(NN); //    mygrid.setAwaitedRowHeight(20);
where NN - height of row after your css customization

Thanks for the fast response! I don't see where I'm doing any custom styling, but I was able to use the setAwaitedRowHeight() feature to fix my problem by just trying out various values until it worked. I'm very impressed by your customer service and your dhtmlx modules.