how to increase the panel height in flex dynamically?

Question

I have a panel inside which I have a datagrid and a button. The functionality is that when I click the button, an row gets added to the data grid. I have described the pane height and width in %. But as the number of rows in the data grid increase, due to fixed panel height, a scroll bar appears in the data grid.

But I want the panel height to increase dynamically as I increase the data grid rows. Some one help me. This is my flex code:

<mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.rpc.events.ResultEvent;
        import mx.collections.XMLListCollection;


        [Bindable]

         private var initDG:ArrayCollection = new ArrayCollection([
            {Select:true},

        ]); 

         private function addTaskRow(event:MouseEvent):void
        {
            taskDataGrid.dataProvider.addItem(
                {

                }
            );
        }

    ]]>
</mx:Script>

<mx:Panel x="20" y="250" width="75%" height="20%" layout="absolute" id="taskPanel" title="Review Task Details" >
<mx:VBox width="100%" height="100%" >

 <mx:DataGrid id="taskDataGrid" dataProvider="{initDG}"  variableRowHeight="true" editable="true" height="85%" width="100%">
   <mx:columns>
    <mx:DataGridColumn dataField="Select" 
            editable="true" 
            rendererIsEditor="true" 
            itemRenderer="mx.controls.CheckBox" 
            editorDataField="selected"/>

            <mx:DataGridColumn dataField="TaskName"
            width="220"
            editable="true" 
            rendererIsEditor="true" 
            itemRenderer="components.taskComponent"/>

            <mx:DataGridColumn dataField="TaskId"
            itemRenderer="mx.controls.TextInput" />

            <mx:DataGridColumn dataField="TaskType"
                itemRenderer="mx.controls.TextInput"/>

             <mx:DataGridColumn dataField="ProjectWon"
                itemRenderer="mx.controls.TextInput"/>

            <mx:DataGridColumn dataField="ItemCode"
                itemRenderer="mx.controls.TextInput"/>

            <mx:DataGridColumn dataField="ItemVersion"
                itemRenderer="mx.controls.TextInput"/>


   </mx:columns>
 </mx:DataGrid>

 <mx:Button id="addTask" label="Add Task" click="addTaskRow(event)"/>

</mx:VBox>
</mx:Panel>

Answer 1

this might be dirty but, how about setting the height of the panel in mxml to {taskDataGrid.height + 30} or something similar..

Just a suggestion :)

Answer 2

What happens when you change panel's height from 20% to 100% and data grid's height from 85% to 100%?

Answer 3

Here is a pixel perfect version for you:

 <fx:Script>
 <![CDATA[
     import mx.collections.ArrayCollection;
     import mx.rpc.events.ResultEvent;
     import mx.collections.XMLListCollection;


     [Bindable]

      private var initDG:ArrayCollection = new ArrayCollection([
         {Select:true},

     ]); 

      private function addTaskRow(event:MouseEvent):void
     {
         taskDataGrid.dataProvider.addItem(
             {

             }
         );

         taskDataGrid.height += 23;
     }

 ]]>

     <mx:DataGrid id="taskDataGrid" dataProvider="{initDG}"  variableRowHeight="true" editable="true" 
      width="100%"  paddingBottom="0" paddingTop="1" height="47">
         <mx:columns>
             <mx:DataGridColumn dataField="Select"
           editable="true" 
           rendererIsEditor="true" 
           itemRenderer="mx.controls.CheckBox" 
           editorDataField="selected"/>

          <mx:DataGridColumn dataField="TaskId"
          itemRenderer="mx.controls.TextInput" />

          <mx:DataGridColumn dataField="TaskType"
              itemRenderer="mx.controls.TextInput"/>

           <mx:DataGridColumn dataField="ProjectWon"
              itemRenderer="mx.controls.TextInput"/>

          <mx:DataGridColumn dataField="ItemCode"
              itemRenderer="mx.controls.TextInput"/>

          <mx:DataGridColumn dataField="ItemVersion"
              itemRenderer="mx.controls.TextInput"/>


              </mx:columns>
     </mx:DataGrid>

     <mx:Button id="addTask" label="Add Task" click="addTaskRow(event)"/>

The main thing I did differently was to remove the VBox that you had wrapping the DataGrid. I also turned off the scroll policy of the Panel. The rest was mainly tweaking. Hope this helps.

Check out a working version here. For lots of other good UI and code examples, go here

Cheers, Caspar