739 Saint Louis St » Blog Archive » Dynamic Datagrid Height

Dynamic Datagrid Height

November 12th, 2007 by Kyle
Posted in: Flex

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:

<?xmlversion="1.0"?>

<!– 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:Application>

The component extending datagrid functionality:

<?xmlversion="1.0" encoding="utf-8"?>

<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:columns>

        </mx:DataGrid>  

</mx:VBox>