Virtual Mode

I am disappointed in the rendering speed. I have a grid with 3,000 rows and 25 columns (typical size for our application). The rest of the page (minus the grid) loads in about ten seconds. From this, I figure that my Oracle query has returned and my javascript array for the data has been built. It takes another 90 seconds for the grid to appear! I have read that I should turn on virtual mode, but in my searches found it difficult to locate the actual code. I eventually found grid.setVirtualMode(true) and insterted this into my code, but the performance did not change.

Don't know if it makes a difference, but we make extensive use of HREFs inside the data, rather than the onCellClicked and onCellMouseOver methods (as our security is dependent on fields within rows).

We are using version 2.5.3

Can anyone offer any assistance? Thank you!

Looks like something is wrong - normally the grid should render in less than half a second regardless of the number of records. See, for example, this online demo (50000 rows) -

http://www.activewidgets.com/general.demos/virtual-mode.html

or sample code in

\examples\grid behavior - scrolling\virtual.htm


The virtual mode is on by default. You don't need grid.setVirtualMode(true) call unless you turned it off somewhere else.

I don't have any guesses what might be wrong in your case. I would suggest for a start replacing reference to your data array with

grid.setCellText(function(col, row){return col + "-" + row});
grid.setColumnCount(25);
grid.setRowCount(3000);

and see it it makes any difference.

Alex,

Thanks. I believe (after trying your method of populating the grid) that the majority of the 90 seconds are spent building my array. I am using ColdFusion, and the number of function calls (and other manipulation) required to set my fields and escape any embedded quotes are killing me.

You at least got me looking in the right direction, thank you.

Alex,

I tried some tests with small and large sample data and I believe that large amounts of data per line (not just a large number of lines) slows the load of the grid to a crawl.

I tried replacing my actual data with just a single "a" per cell. This loaded my grid (3,103 lines, 25 columns) in 1 second. However, when I changed it to 200 "a" per cell it took 4.5 minutes.

I am populating my grid from a javascript array that I build dynamically with an Oracle recordset via ColdFusion. Is there a faster methodology for loading? I do not think your example of 50,000 rows uses an array as I do, or I would be able to see it by viewing the source for the page. I have not tried the CSV or XML models - would they load faster than the javascript array?

I have spent the better part of a month rewriting many of our application's report screens using the grid and I would hate to throw away that time and money because a typical report takes 90 seconds or more to load.

In our old display we used to show just a certain number of records per screen (letting the user set the number they want to see). We can use that within your grid structure, but that would require users to use your scroll, plus our next and previous page links, which would be cumbersome.

Thanks for any help/advice/insight you can offer.

- Brian

I thought about this on my long drive home. I think the fact that the javascript array contains so many characters and is embedded in the resulting HTML may be the problem. I thikn just the fact that the browser has to render so many lines with so many characters is what is slowing it down.

I am going to try the CSV model and see if that is better.

I guess I had too much going on today to think clearly on this one topic.

I tried loading a CSV file with 5,400 rows, 25 cells, each with 100 characters. The whole page loads in about 3 seconds, the grid in about 2 seconds.

Of course all that data embedded in the HTML (in the javascript array) would adversly affect the load time. DUH! Lesson learned.