How to Turbo-Charge Your Grids
gpapayia 110000S454 Comments (25) Visits (8037)
Update: A blog entry on a newly designed Grid widget has been created. The new Grid widget takes many of the speed improvements from PagingGrid, adds them to the existing Grid API, and adds other useful features, such as sorting, selection, and scrollbar.
We recently wanted to figure out how our RUI Grid would perform for grids that were really large. By large I'm talking in the order of 2,000 to 3,000 cells. Now, as a rule when developing a web application, you really should consider using pagination when dealing with large grids. A pagination grid shows a subset of rows (usually 10 at a time) and offers navigation buttons to allow the user to cycle through the remaining rows. This kind of grid scales much better, especially in a complex web application.
Let's assume we wanted to generate a fairly large grid. How would the standard RUI Grid perform? What the following graph illustrates, is that not all browsers are created equal.
To help improve the Grid's performance, we designed a new kind of RUI grid called PagingGrid. This grid has 2 major advantages over it's predecessor:
The following chart shows the same test as above, just using the new PagingGrid.
The approach to avoid DOM accesses where possible leads to a 25x performance improvement:
The new PagingGrid is a huge step forward from our previous Grid.
The Archive file containing the widget and the required CSS/js is attached below. You can add the widget to your workspace by importing the archive contents into any existing Rich UI project. This works on both EGL CE and RBD.
The widget comes with a selector and sorter, each using the InfoBus. This allows users to synchronize grids, or clear selections. It has a style sheet with decent default colors. The pagination buttons can be styled, but also can be completely customized.