In the recently published 2009.3 release of Web.UI for AJAX, one of the major enhancements to the ever-popular Grid control (now officially named DataGrid) is optimized client-side rendering and the addition of a new "ultra-light" rendering mode. This post will clarify the details of these improvements.

Background

Thanks to the generally very well performing client-side rendering mechanism in DataGrid and other Web.UI controls, as well as the use of paging or deferred scrolling, rendering performance on the client has never been an issue for the overwhelming majority of users. In a few cases, however, there was a requirement to render entire record sets in the same page, and rely on browser scrolling. Of course, as the number of visible records grew into the hundreds (and thousands), the client-side rendering time took increasingly more time and we were asked to consider optimizations to make this scenario more viable.

We decided to take two different (and complementary) strategies. For one, we would do our best to optimize default client-rendering as much as we could without affecting any client-side functionality. In addition to that, we would introduce an alternative rendering mode which, when selected, would sacrifice some features (as few as possible, of course) in favour of further optimized rendering. In this way everyone would benefit, and those few customers for whom fast rendering was paramount would have the additional choice of forcing an appropriately focused behaviour of the control.

Optimized default rendering

Most of the improvements in DataGrid's client-side rendering were achieved by moving event handlers from cells to rows, decreasing their number by an order of magnitude. This change decreased both the time it takes to generate the markup, as well as the complexity of the resulting markup in the browser. No functionality needed to be altered to support this change, and full backwards-compatibility was the prime consideration in its implementation. In our tests, the changes resulted in a decrease in rendering time of around 30% for typical situations.

RenderingMode property

This new property of DataGrid can be used to switch the rendering mode from 'Default' to 'UltraLight'. The latter mode provides further markup optimizations, but breaks the barrier of backward compatibility and full feature support. In 2009.3, the added benefit is further reduced markup; more specifically, the lack of a nested DIV level in cells. The feature sacrificed for this mode is the forcing of column widths in those cases where their content would tend to stretch them. In those cases, the columns would indeed stretch, dropping features like text ellipsis (...) and reliable column sizing and resizing.

The 'UltraLight' rendering mode is only recommended for relatively extreme situations, where an extremely light-weight DataGrid is required, for rendering relatively plain content which is substantial in size. In our internal tests, we have found an overall decrease in rendering time of around 40% for typical cases using this method, over the previous (pre-2009.3) default.

Conclusion

The DataGrid rendering enhancements and the addition of a new rendering mode are two complementary strategies for improving client-side performance. We hope that they improve the experience of developers and users, whatever the application requirements may be.