Fit Flex datagrid for data
I have lines of text data that can range from 0 to 100 and all need to be visible on the screen in one go. The default behavior is fine for a grid as long as the rows are * rowHeight> gridHeight.
Basically I need a hook at the element height or line height to calculate it based on the height of the grid. I set paddingTop and paddingBottom to zero, but there is still a significant amount of white space between the lines.
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 is larger than the cell if I set the row height to about 10.
Thanks inferis for helping me a lot. This is my final mesh component. It's not self-sufficient due to a few calls, but if it helps someone else to get them 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>
You might want to look at the DataGrid.variableRowHeight property, because when this is set to false (the default), all rows will have the same height as the largest itemRenderer. You can also examine 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, but you can just set the DataGrid.rowHeight property (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 gets rounded, you'll need a scrollbar)
The only problem with this approach, as I think you've noticed, is that the itemRenderer may not display correctly on a line that is too small. I think you could solve this by changing the font in the renderer based on its height.
source to share