Creating Freeze pane in Flex Advanced Grid

When we have to show huge chunks of data, we tend to go with Grid structures. But even with grid structures, scrolling creates problems as all the columns are scrolled. This problem can be overcome with Freeze Panes.Most of us are familiar with the facility of Freeze Panes in excel. Sometimes business owners too demand for this kind of default implementation for Grids.

The basic design for Freeze pane is as follows:

HBox is the main background component where you split it into Freeze pane and Data pane.

VBox_Freez contains Grid which contains Columns to be Freezed and VBox_Data contains Grid for columns which can be scrolled.

Scroll_Pane is a combination of Canvas and HBox.

To implement Freeze pane, you split your data into two grids. It is okay even if you use same Dataprovider for this task.

Create a Horizontal Scrollpane:

Now bind scrolling events to Data Canvas and set scrolling positions based on Scrollpane’s scrolling position:

protected function hbox1_creationCompleteHandler(event:FlexEvent):void
{
	if(cnvHScroll.horizontalScrollBar !== null) {
		ScrollBar(cnvHScroll.horizontalScrollBar).addEventListener(ScrollEvent.SCROLL,hbox1_scrollHandler);
	}
}

protected function hbox1_scrollHandler(event:ScrollEvent):void
{
	if(cnvCompo.horizontalScrollBar !== null && cnvHScroll.horizontalScrollBar !== null) {
		if(ScrollBar(cnvCompo.horizontalScrollBar).scrollPosition !== ScrollBar(cnvHScroll.horizontalScrollBar).scrollPosition) {
			ScrollBar(cnvCompo.horizontalScrollBar).scrollPosition = ScrollBar(cnvHScroll.horizontalScrollBar).scrollPosition;
			cnvCompo.horizontalScrollBar.dispatchEvent(event);
		}
	}
}

A vertical freeze pane can also be created in the same way.

Do let me know if you found the article useful. Kindly share your thoughts in the comments below.