Resizing a Flex DataGrid control using the rowCount property

The following example shows how you can resize a DataGrid control in Flex using therowCount property. By setting the rowCount property, the DataGrid control is automatically resized so that only the specified number of rows are displayed.

In Flex 3 (post beta 2, you can grab nightly versions of the Flex 3 SDK from the Adobe Labs Flex 3 SDK page) the DataGrid control’s rowCount and lockedRowCount properties do not include the header whereas in earlier versions of Flex 3 and Flex 2 they did. For example, the old behavior was to display 3 rows and the data grid header if you set the row count to 4. The new behavior is to display 4 rows and the data grid header (for a total of 5 rows). Yay!

 

<?xml version="1.0" encoding="utf-8"?> <mx:Application name="DataGrid_rowCount_test_2" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white"> <mx:Array id="arr"> <mx:Object col1="1" col2="A" col3="a" /> <mx:Object col1="2" col2="B" col3="b" /> <mx:Object col1="3" col2="C" col3="c" /> <mx:Object col1="4" col2="D" col3="d" /> <mx:Object col1="5" col2="E" col3="e" /> <mx:Object col1="6" col2="F" col3="f" /> </mx:Array> <mx:ApplicationControlBar dock="true"> <mx:Form> <mx:FormItem label="rowCount:"> <mx:HSlider id="slider" minimum="0" maximum="{arr.length+1}" value="4" liveDragging="true" snapInterval="1" tickInterval="1" dataTipPrecision="0" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:DataGrid id="dataGrid" dataProvider="{arr}" rowCount="{slider.value}" /> </mx:Application>