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:
- Pagination is directly built into the grid to make it easy to implement more scalable grids into your application. Simply put, the performance improvements are huge.
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.