Fit Flex datagrid to data

Question

I have rows of text data that can vary between 0 and 100, and all need to be visible on the screen at one time. The default behavior is fine for the grid until the rows * rowHeight > gridHeight.

Basically I need a hook into the item height, or row height to calculate it based on the height of the grid. I've set paddingTop and paddingBottom to zero, but there is still a considerable amount of white space in between rows.

My datagrid component...

<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="OnCreationComplete()"
paddingTop="0"
paddingBottom="0"
>

<mx:Script>
 <![CDATA[

 private function OnCreationComplete():void
 {
  //setRowHeight(10);
 }

    override protected function setRowHeight(v:Number):void
    {
  super.setRowHeight(v);
    }

 ]]>
</mx:Script>

</mx:DataGrid>

setRowHeight() helps, but the itemRender for the cell bigger than the cell, if I set the row height to something like 10.

Answer 1

You might want to look at the DataGrid.variableRowHeight property as, when this is set to false (the default) all rows will be the same height as the largest itemRenderer. You could also look into writing your own itemRenderer for each DataColumn.

If all you really want to do is set the row height based on the number of items in the dataProvider though, you could just set the DataGrid.rowHeight property like this (assuming your grid has a fixed height, say 100%) :

myDataGrid.dataProvider = myArray;
myGrid.rowHeight = Math.floor((myGrid.height - myGrid.headerHeight)/myArray.length);

(I'm taking the floor here because if you end up with a fractional value that rounds up, you'll need a scroll bar)

The only problem with this approach, as I think you've noticed, is that the itemRenderer might not display properly in a row that's too small. I guess you could solve this by changing the font within the renderer based on its height.

Answer 2

Thank you inferis, that helped me a lot. This is my final grid component. It's not really self contained because of a few call-outs, but if it helps someone else get theirs to work, great!

<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml"
paddingTop="-3"
paddingBottom="-3"
resize="OnResize(event)"
>

<mx:Script>
 <![CDATA[
  import mx.containers.Panel;
 import mx.core.Application;
 import mx.events.ResizeEvent;

 protected function OnResize(event:ResizeEvent):void
 {
  this.invalidateDisplayList();
 }

/**
 *  @private
 *  Sizes and positions the column headers, columns, and items based on the
 *  size of the DataGrid.
 */
override protected function updateDisplayList(unscaledWidth:Number,
                                              unscaledHeight:Number):void
{
    if( this.collection.length > 0 ) // so don't divide by zero
    {
     var appHeight:Number = Application.application.height;
     var appMinusMenuHeight:Number = appHeight - Application.application.hboxPrintBar.height;
     var boxHeight:Number = Application.application.vboxViewAll.height;
     if( boxHeight > 0 )
     {
      var gridHeight:Number = (appMinusMenuHeight - this.headerHeight) * 0.93;
      var calcHeight:Number = gridHeight / this.collection.length;
      var calcHeightFloor:Number = Math.floor( calcHeight );
      setRowHeight( calcHeightFloor );
      //var p:Panel = this.parent as Panel;
      //p.title = calcHeightFloor.toString();
      if( calcHeightFloor <= 10 )
       this.setStyle("fontSize",calcHeightFloor);
     }
    }
    super.updateDisplayList(unscaledWidth,unscaledHeight);
}

 ]]>
</mx:Script>

</mx:DataGrid>