Column Freezing feature in WebGrid.NET Enterprise 5.0

Columns freezing is one of the most frequently requested feature in these few years since initial version of WebGrid. Column freezing in web-based Grid is also one of the most difficult to be implemented feature, and in fact almost impossible due to the nature of HTML table. For years we have been asked with “is it possible to have column freezing feature in WebGrid”? Today I will give some shed of light for the answer.

If you “googling” for freezing column technique in html, you will find several different techniques to do column locking. Two of the most popular techniques are:

1. Using CSS “expression” style to force the column’s and cell’s left and top position so they are not scrolled. This technique however requires many “hacky tricks” to the element structure, and unfortunately can be used in IE only. Note that “expression” is IE’s proprietary style.
2. Breaking the main table into two sub tables inside one DIV container. I have seen several html-based Grid that used this technique. This approach workes well in some basic scenarios, but unfortunately has to break many features and DOM API. For instance, if you used to loop the cells using: for (var i=0; i<row.cells.length; i++) — now you can’t do this anymore because technically the frozen columns are in one table that appear in the left side, while the other columns are in the other table that appear in the right side.

Although above solutions can be applied to “ad hoc table implemention”, both of them did not lead to a reliable, rock solid, robust and cross-browser column freezing implementation that work well with DOM API as well as other existing features.

I am excited to say that we have finally been successful in inventing a new technique that work well with DOM API and full support for Mozilla browsers. This new technique which is named LiveFreeze would be the most significant new feature in WebGrid.NET Enterprise 5.0 (out of hundreds of new features) – and is the first original implementation that able to simulate Microsoft Excel’s popular column freezing behavior.

To give you a better picture, let’s take a look at the following screenshot that I take from one of the sample included in 2007 R1.

In the above screenshot, notice on the first four columns (marked within the red box). These four columns are the active frozen columns, and will remain visible in the Grid’s view regardless of horizontal scrolling.

The good thing is this column freezing feature will work perfectly in conjunction with other existing features, such as grouping, sorting, filtering, column moving and resizing, keyboard navigation and many more. There are about six powerful sub-features that related to column freezing. I will share about them in my future posts. Stay tuned!

All the best,

Jimmy.