Macromedia Flex Macromedia Flex
Adding and Hiding GridRow's

Jul 03, 2007 - Adding and Hiding GridRow's
Using minimal ActionScript based on a Repeater

Just a simple example to play around with.

Typically in ActionScript if you wanted to dynamically add and remove GridRow's you would use the Grid's addChild() and removeChild() functions.

But say:

  • You wanted your GridRow's to be driven by a repeater
  • You didn't want to delete the row, just make it hidden (maybe you want to unhide it later, or it has input components that you still want to keep around to further evaluate at another time)
  • And you want this to be displayed in a popup window

Repeaters repeat over data, so the key is your DataProvider. Using a flag to track if a row is hidden or not would be one way to approach that.

The other aspect to that are the attributes of the GridRow that you need to manipulate; visible and enabled won't do you much - as they'll still cause the GridRow to occupy space, so we turn to the height property.

There's a bit of a catch on the GridRow's height - it'll generally work if you set it to 0, however a gap can form between the bottom of the TitleWindow and the last visible GridRow; this particularly will happen if the TitleWindow expands past the stage, and you remove GridRows to shrink it down again.


To prevent that from happening, you'll also need to manipulate the GridItems height as well.

Now when you add a row, you'll append a record onto your DataProvider, this will cause the Repeater to be notified that there's been a change to the data, and redraw itself which would cause the height of all those gridrows to be reset.

So you'll need a function that determines if that row needs to be displayed or not.

Putting it all together you have something like:

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="">
  import mx.managers.PopUpManager;
  import mx.collections.ArrayCollection;
  public var arPhones:ArrayCollection = new ArrayCollection([
  public function hidePhone(i:Number):void
   gridrow[i].height = 0;
   griditem[i].height = 0;
   arPhones[i].isHidden = true;
  public function addPhone():void
  public function calcRowHeight(isHidden:Boolean):Number
    var retVal:Number=25; //for the sake of simplicity
     retVal = 0;
    return retVal;

 <mx:Button label="Add Row" click="addPhone()"/>

 <mx:Grid id="phoneGrid" verticalGap="1">
  <mx:Repeater id="myRep" dataProvider="{arPhones}">
  <mx:GridRow id="gridrow" height="{calcRowHeight(myRep.currentItem.isHidden)}">
   <mx:GridItem id="griditem" height="{calcRowHeight(myRep.currentItem.isHidden)}">   
    <mx:TextInput id="frmCustomerPhone" text="{}"/>
      <mx:Button  id="hideBtn" label="Hide" click="hidePhone("/>

There's of course many ways in Flex to approach a problem, and this isn't the most ninja way to do it, but it's easy to understand.


File Details
Created On Jul, 03, 2007 by Tariq Ahmed
Last Modified On Jul, 03, 2007 by Tariq Ahmed
Group: Tips and Articles
Flex Versions: 2.0
Category: Navigation/Layout/States
Type: Tip
Difficulty: Intermediate