Resizing a Flex DataGrid control using the rowCount property

The following example shows how you can resize a DataGrid control in Flex using the rowCount 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!

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/01/resizing-a-flex-datagrid-control-using-the-rowcount-property/ -->
<mx:Application 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>

View source is enabled in the following example.

For an example of resizing the List control using the rowCount property, see “Resizing a Flex List control using the rowCount property”.

Tagged as: rowCount