01
Nov
07

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”.


7 Responses to “Resizing a Flex DataGrid control using the rowCount property”


  1. 1 peterd Nov 1st, 2007 at 9:20 pm

    The previous example was compiled using the Flex 3 SDK (Version 3.0 build 186046).

  2. 2 Patrick Kellogg Nov 6th, 2007 at 9:42 am

    Do you have any idea why rowCount of zero shows 7 rows? I assume that is a bug. Thanks.

  3. 3 ÐâŖк6 Nov 22nd, 2007 at 12:01 pm

    Got the exactly same error, but instead of zero rows I had five, and when I added another one, it became 11 0_0.

  4. 4 leonhard minutillo Apr 18th, 2008 at 1:17 pm

    hello -

    is there any way of resizing the stage, that is to say, the dimensions of the embed tag, dynamically?

    Leonhard; berlin

  5. 5 Tim Oct 13th, 2008 at 5:23 pm

    There seems to be a bug with showHeaders=false.
    When the rowCount is 5 and there are 5 items, it shows 6 rows when it should only show 5.

  6. 6 peterd Oct 13th, 2008 at 6:58 pm

    Tim,

    I believe it is a known issue, http://bugs.adobe.com/jira/browse/SDK-14463

    Peter

  7. 7 DavidD Oct 30th, 2008 at 4:56 am

    If you have a main datagrid on a page with a percent height to take the maximum vertical place available.
    And you would like to paginate to avoid scrollbars,…
    Is there a way to get the actual rowcount displayed ? goal is to set the page size of my pagination system dynamically, cause it can be dependent of the resolution and browser settings of the user.

    thank you.

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".




November 2007
M T W T F S S
« Oct   Dec »
 1234
567891011
12131415161718
19202122232425
2627282930  

Badge Farm

  • Powered by Redoable 1.2
  • Cornify
  • Feeds burnt by Feedburner
  • Feed