November 12th, 2007 by Kyle
Tags: atagrid, datagrid-row, Flex, variablerowheight
Posted in: Uncategorized
What if you have a datagrid that is only going to have a few rows of data, but the rows have variable height and you want to show all of your rows without a vertical scrollbar?
Here is what:
The app:
<!– DataGrid control example. –>
<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" width="550" xmlns="*">
<mx:script>
<!–[CDATA[
import mx.controls.Alert;
import mx.collections.ArrayCollection;
private function createDG():void{
var myc:MyComp=new MyComp();
myc.gridData=employees;
pnl.addChild(myc);
}
[Bindable]–> private var employees:ArrayCollection = new ArrayCollection([
{name:"Christina Coenraets", phone:"555-219-2270", email:"ccoenraets@fictitious.com" , active: "true"},
{name:"Joanne Wall", phone:"555-219-2012", email:"jwall@fictitious.com" , active: "true"},
{name:"Maurice Smith", phone:"555-219-2012", email:"maurice@fictitious.com" , active: "false"},
{name:"Mary Jones", phone:"555-219-2000", email:"mjones@fictitious.com", active: "true"}
]);
]]>
</mx:script>
<mx:button label="Create DG" click="createDG()">
<mx:panel id="pnl" title="DataGrid Control Example" height="100%" width="100%">
paddingTop="10" paddingLeft="10" paddingRight="10">
</mx:panel>
</mx:button>
</mx:application>
The component extending datagrid functionality:
<mx:vbox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:script>
<!–[CDATA[
import mx.collections.ArrayCollection;
[Bindable]–> public var text:String = "";
[Bindable]
public var gridData:ArrayCollection;
public function handleCreationComplete(e:Event):void
{
trace("finished");
//+2 for 1 pixel border at top and bottom
dg.height=dg.measureHeightOfItems(0,gridData.length)+dg.headerHeight+2;
}
]]>
</mx:script>
<mx:datagrid id="dg">
editable="true" variableRowHeight="true" width="460"
dataProvider="{gridData}" creationComplete="handleCreationComplete(event)">
<mx:columns>
<mx:datagridcolumn datafield="name" headertext="Name">
<mx:datagridcolumn datafield="phone" headertext="Phone">
<mx:datagridcolumn datafield="email" headertext="Email">
</mx:datagridcolumn>
</mx:datagridcolumn>
</mx:datagridcolumn>
</mx:columns></mx:datagrid></mx:vbox>
Browse the source of this example.
Download a zipfile containing the source to this sample.
Tweet
3 Comments »

February 14th, 2008 at 12:52 am
Instead of having the height get set on the creationComplete it works better to have it get set when the updateComplete event fires thus if the header or row size changes (from user interaction) you will get an accurate height redraw as well.
You could use the columnStretch event to set the height to accomodate what I’m suggesting the user could do, but any height values will not get updated until AFTER the columnStretch has fired. Thus using the updateComplete event will account for setting the initial height as well as any height changes (due to the dataprovider changing OR column stretching etc.)
Happy Flexing,
Zach
December 12th, 2008 at 7:43 pm
Thanks for this example, the measureHeightOfItems() function was just what I was looking for!
Another place to do the measuring would be inside of a custom DataGrid component, and override the measure() function, putting the code inside of there and setting the measuredHeight rather than height.
Thanks again,
Tom
May 21st, 2010 at 7:56 pm
thanks, solved my issue, i was trying to guess the height of the row instead which was not working! weird how there isn’t a property of datagrid that handles this.