What if you have a datagrid that is only going to have a few rows of data, but the rows have variable height and you want to show all of your rows without a vertical scrollbar?

Here is what:

The app:

<!– DataGrid control example. –>
<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" width="550" xmlns="*">

    <mx:script>

        <!–[CDATA[
            import mx.controls.Alert;
            import mx.collections.ArrayCollection;

            private function createDG():void{
                var myc:MyComp=new MyComp();
                myc.gridData=employees;
                pnl.addChild(myc);
            }

            [Bindable]–>            private var employees:ArrayCollection = new ArrayCollection([
                {name:"Christina Coenraets", phone:"555-219-2270", email:"ccoenraets@fictitious.com" , active: "true"},
                {name:"Joanne Wall", phone:"555-219-2012", email:"jwall@fictitious.com" , active: "true"},
                {name:"Maurice Smith", phone:"555-219-2012", email:"maurice@fictitious.com" , active: "false"},
                {name:"Mary Jones", phone:"555-219-2000", email:"mjones@fictitious.com", active: "true"}

            ]);
        ]]>

    </mx:script>

    <mx:button label="Create DG" click="createDG()">
    <mx:panel id="pnl" title="DataGrid Control Example" height="100%" width="100%">
        paddingTop="10" paddingLeft="10" paddingRight="10">

    </mx:panel>
</mx:button>
</mx:application>

The component extending datagrid functionality:

<mx:vbox xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:script>
        <!–[CDATA[
            import mx.collections.ArrayCollection;

            [Bindable]–>           public var text:String = "";   

            [Bindable]
            public var gridData:ArrayCollection;

            public function handleCreationComplete(e:Event):void
            {
                trace("finished");
                //+2 for 1 pixel border at top and bottom
                dg.height=dg.measureHeightOfItems(0,gridData.length)+dg.headerHeight+2;
            }
        ]]>
    </mx:script>
    <mx:datagrid id="dg">
        editable="true" variableRowHeight="true" width="460"
        dataProvider="{gridData}" creationComplete="handleCreationComplete(event)">
            <mx:columns>
                <mx:datagridcolumn datafield="name" headertext="Name">
                <mx:datagridcolumn datafield="phone" headertext="Phone">
                <mx:datagridcolumn datafield="email" headertext="Email">
            </mx:datagridcolumn>
        </mx:datagridcolumn>
</mx:datagridcolumn>
</mx:columns></mx:datagrid></mx:vbox>

Browse the source of this example.
Download a zipfile containing the source to this sample.

This movie requires Flash Player 9




3 Comments »