This topic contains the following sections:

• Introduction
• Main Concept
• Runtime freezing/unfreezing
• Absolute Scrolling
• LiveFreeze™ behaviors and other notes

Introduction

WebGrid is the industry's first WebGrid that successfully implements Microsoft Excel style column freezing feature. In this new version, WebGrid introduces LiveFreeze technology which enables users to "lively" perform column freezing and unfreezing in realtime without the need of postback or callback.

WebGrid's unique LiveFreeze architecture enables frozen columns to stay visible eventhough the horizontal scrollbar of the WebGrid is scrolled. Some of great results from LiveFreeze implementation are:

• High performance scrolling. The Grid is capable to handle fast scrolling by either dragging the scrollbar's thumb or click on the left and right arrow.
• Excel® scrolling behavior. When scrolled, hidden columns must be entirely hidden (instead of partially).
• Splitter indicator at column header and cell to let users easily determine the current state of frozen columns.
• Works with all existing WebGrid's functions and FlyPostBack (AJAX) actions such as Grouping, Sorting and Filtering. Try to perform sorting or grouping, notice that scroll position will stay and hidden columns will remain hidden.
• "Lively" perform freezing and unfreezing in realtime. No AJAX callback or postback is required.
• Works perfectly with keyboard navigation in cell select mode as well as in editing environment. The hidden column will be automatically visible and focused during editing, the scrollbar will also automatically reflect the current position of the edit cell.
• Column moving and resizing are supported for unfrozen columns. When moved or resized, scrollbar and current view will be automatically adjusted.
  
  

The following image shows a simple WebGrid with Column Freezing feature enabled. The OrderID and CustomerID column remains visible, while the horizontal scrollbar is set to the right most position.

Main Concept

LiveFreeze™ enables you to configure initial column freezing setting from server side property. There are two main properties that need to be set to activate this feature: AllowColumnFreezing property in LayoutSettings and ActiveFrozenColumns property in FreezePaneSettings.

The ActiveFrozenColumns property defines how many columns are frozen in initial page load. The default value is 0, which indicates there are no frozen columns that need to be configured. The value of ActiveFrozenColumns property determines the number of visible columns to be frozen in respective columns order. For instance, if you have a WebGrid with columns "FirstName, LastName, ContactTitle" and LastName's Visible is False and ActiveFrozenColumns set to 2, then the active frozen columns would be "FirstName" and "ContactTitle".

Runtime freezing/unfreezing

WebGrid's LiveFreeze™ feature allows users to perform freezing/unfreezing at runtime through column context menu. When the WebGrid detects an active frozen settings, the Unfreeze Pane command will be enabled. Likewise, the Freeze Pane command will be enabled if the WebGrid does not have an active frozen columns.

The runtime freezing feature can be easily enabled by setting ShowInContextMenu property in FreezePaneSettings object to True.

For example:

HTML	Copy Code
<ISWebGrid:WebGrid ID="WebGrid1" runat="server"> <LayoutSettings AllowColumnFreezing="Yes" AllowColumnMove="Yes"> <FreezePaneSettings ActiveFrozenColumns="2" MaxFrozenColumns="3" ShowInContextMenu="True" /> </LayoutSettings> </ISWebGrid:WebGrid>

The following image shows the result of the above sample in Mozilla Firefox 2.0 browser:

Absolute Scrolling

To better simulate Excel® scrolling behavior while freezing is active, WebGrid.NET Enterprise® 5.0 introduces Absolute Scrolling™ in conjunction with the LiveFreeze™ implementation.

With Absolute Scrolling enabled, WebGrid is able to automatically adjust the viewport to the next available column when user pressed on the left/right arrow of horizontal scrollbar. This behavior allows users to conveniently scroll through all the columns with less clicks.

LiveFreeze™ behaviors and other notes

The following is a list of helpful notes related to LiveFreeze™ behaviors when used with other WebGrid's features:

• Frozen columns are designed for flat-view and can be applied to RootTable only. Child tables are not applicable.
• Frozen columns are not moveable. This behavior is set automatically.
• Frozen columns will not appear in Select Columns automatically.
• Frozen columns cannot be grouped, unless HideColumnsWhenGrouped property is set to False.
• Frozen columns visibility are locked and cannot be set to hidden. If you would like to enable users to remove the column, unfreeze the column first to remove it from the Grid.
• Frozen columns cannot work together with ColumnSet layout, since ColumnSet layout does not have suitable display and purpose to be applicable for Column Freezing feature.
• Column Freezing feature should not be used with AutoFitColumns feature due to purpose's conflict. AutoFitColumns feature purpose is to prevent horizontal scrolling by auto-fitting all columns, while Column Freezing feature requires horizontal scrolling.
• Column Freezing feature is designed for flat-view Grid. However, you can still enable Hierarchical Grid to be used together with this feature.
• When Hierarchical is enabled along with Column Freezing feature, horizontal scrolling affects to RootTable view only. The child table will not be scrolled.
  

  Design Considerations: Enable AutoFitColumns at child table level so that the columns fit into the main Grid's viewport. Arrange the child table layout so they are always inside the Grid's boundary to keep all columns visible.

• For best performance, limit the RootTable rows to a reasonable maximum number of rows. Enable VirtualLoad paging if needed.
• If you are displaying large data (e.g. more than 1000 rows) in the WebGrid, it is recommended to set ShowSplitterLine to false for best performance.
• For best usability, set the MaxFrozenColumns to appropriate value where the frozen columns can be kept visible even in minimum window size.
• When the frozen pane's width exceeds the visible client area of the WebGrid, the horizontal scrolling will automatically fallback to default scrolling behavior. This means the frozen pane will no longer in effect until the frozen pane's boundary is visible back in the client's viewport. This automatic behavior ensures WebGrid to behave and display properly as users working with information.
• When column freezing is enabled, the horizontal scrollbar will always appear regardless of the WebGrid's width. This is designed for consistent user interface.
• When column freezing is enabled, you can still access the client side Columns object model as usual since LiveFreeze™ used a new developed algorithm that does not require changes in core DOM structure.
• Hidden columns that resulted from the scrolling process will be automatically persisted in FlyPostBack™ (AJAX) actions, except Refresh and RefreshAll action. The hidden columns will not be persisted in full postback event.
• Column freezing feature can be used together with the following features:
  • Column resize and moving (for non-frozen columns)
  • Grouping
  • Filtering
  • Sorting
  • GroupTotal
  • AllowAdd
  • AllowEditing
  • Keyboard Navigation
  • VirtualLoad™ Paging
  • CellSelect mode
  • EditOnClick mod
  • PreviewRow
• Extensively supported in Mozilla browsers. Optimized for latest browsers such as Internet Explorer 7.0+ and Mozilla FireFox 2.0+

See Also

© 2012 Intersoft Solutions Corp. All Rights Reserved.