Javascript Grid Performance

Web applications nowadays tend to get more and more complex and involve both very sophisticated appearance and large amounts of data. Data can involve thousands or even millions of records fetched from the datasource and available for display. Such a large quantity can severely hurt the performance and the responsiveness of the application.

The ShieldUI javascript grid control offers a few possible ways to meet this challange.

Paging

The first option is to use paging. This allows rendering only a subset of the available data and breaking it into portions, or pages. The pager element, rendered at the bottom of the control is fully customizable. It looks as demonstrated below:

Virtualization

In addition to the paging mechanism, the ShieldUI grid offers virtualization. The virtualization mechanism allows the visual appearance that all data is loaded into the control, by showing a vertical scroll bar. This gives the end user the ability to quickly navigate between record sets and manipulate all the data. Behind the scenes, the grid control only loads enough records to populate the records visible on the current scroll. In this manner, working with even one million records is not a problem. To see this feature in action, refer to this example, as well as this presentation, which virtualizes remote data.

Hierarchy

A hierarchical view allows rendering of sub-tables or views for each record. The nested sub-records are usually related to the master record. A sample layout looks like this:

A hierarchy can be further combined with paging for each grid and sub-grid, to optimize performance.