Thursday, May 06, 2010

Dynamically Hide Cells in Flex DataGrid

Goal: Control visibility of controls in Flex DataGrid

Problem:
Control of cells' visibility in Flex DataGrid turns out to be pretty tricky. If you simply use inline item renderer and bind it's visibility attribute to a data provider, it won't work.

Why:
Fortunately, Flex is open source. So, we can dig a little deeper into why it does not work.
  1. Look at SDK 3.2.0: DataGridBase.as, line 1073 will show that Flex SDK will actually set the renderer to visible after set "data" property of the control.
  2. Also, the SDK may decide to hide the cell when it sees fit in various situations;
So, it is not desirable to control visibility directly. You are fighting with the SDK.

Solution(s):
Solution 1: Use a container as item renderer, and embed your control inside the container.
Pros: Quick and easy to implement. An added benefit is that you can control cell layout;
Cons: As all the Flex text book will stress: using too many containers is very BAD for performance! How bad? A 20X20 DataGrid may take at least 5 seconds to render!

Solution 2: Create custom control based on the control you want to use in the cell. And manage a new "forceHide" attribute, which will cooperate with the original "visible" attribute to decide a control's visibility. Please see the sample code below. Some details are missing, but you get the idea.

...
protected var _forceHide:Boolean = false;
/**
* visible by set method
*/
protected var _setVisible:Boolean = false;
/**
* If set, this control will not be visible. It will overwrite visible property.
* DataGrid tend to manipulate visible directly, we can only use
* this extra field to force hide control even if DataGrid decides
* that it can be shown.
*/
public function set forceHide(value:Boolean):void {
_forceHide = value;
setVisible(_setVisible);
invalidateProperties();
}
override public function setVisible(value:Boolean, noEvent:Boolean=false):void {
//save desired settings
_setVisible = value;
//forceHide can mask out change request
super.setVisible((!_forceHide) && value, noEvent);
}
...

Other Thoughts:
How about "CallLater"? It turns out to be a bad idea. As stated before, Flex SDK may want to hide some controls. If your "CallLater" set a control's visible to true, when Flex SDK think it is invisible, you may see some ghost controls hanging around.

No comments: