<img alt="" src="https://secure.leadforensics.com/150446.png " style="display:none;">

Creating Freeze pane in Flex Advanced Grid

Aditi Bidre Feb 26, 2015

Technology

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:

Freeze pane diagram

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:

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.

e-Zest is a leading digital innovation partner for enterprises and technology companies that utilizes emerging technologies for creating engaging customers experiences. Being a customer-focused and technology-driven company, it always helps clients in crafting holistic business value for their software development efforts. It offers software development and consulting services for cloud computing, enterprise mobility, big data and analytics, user experience and digital commerce.