2 Replies Latest reply on Jul 27, 2006 8:41 AM by ritzcoder1

    forcing datagrid to expand to full height in a form

    ritzcoder1
      Hi. I am trying to use a datagrid inside a form. When I place the datagrid inside the form, it defaults to some height. I saw something about this in the manual:
      quote:


      By default, Flex sizes the Form layout children vertically to their default height. Flex then
      determines the default width of each child, and stretches the child’s width to the next highest
      quarter of the child area—that is, to one-quarter, one-half, three-quarters, or full width of the
      child area.



      I would like the datagrid to stretch from its current position all the way to the bottom of the screen (even if it does not have enough data in it). Note that the datagrid is the last item on the form. If there is a lot data there, a vertical scrollbar is added instead of stretching. Is there a way to do this? I have tried placing it in a box but it did not help. Everything is set to 100% width and 100% height. Thanks for any help. I have posted some sample code below:

      Thanks for any help.

      quote:


      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="vertical">
      <mx:Script>
      <![CDATA[
      [Bindable]
      public var initDG:Array = [
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
      {Artist:'Pavement', Album:'Brighten the Corners', Price:11.99}

      ];
      ]]>
      </mx:Script>
      <mx:Panel width="100%" height="100%" layout="absolute">
      <mx:Form x="0" y="0" width="100%" height="100%">
      <mx:FormHeading label="Test Form Here"/>
      <mx:FormItem label="Label" width="100%" height="100%">
      <mx:DataGrid dataProvider="{initDG}" width="100%" height="100%">
      <mx:columns>
      <mx:DataGridColumn dataField="Artist"/>
      <mx:DataGridColumn dataField="Album"/>
      <mx:DataGridColumn dataField="Price"/>
      </mx:columns>
      </mx:DataGrid>
      </mx:FormItem>
      </mx:Form>
      </mx:Panel>

      </mx:Application>



        • 1. Re: forcing datagrid to expand to full height in a form
          peterent Level 2
          There is no way to do this that I know of. You must give the DataGrid an explicit height. Unfortunately, calculating the height based on the height of the form just leads to an infinite measurement state.

          What I'd recommend is to not use a Form at all and instead use absolute positioning, something like this.

          <mx:Panel width="100%" height="100%" layout="absolute" >
          <mx:FormHeading label="Test Form Here" left="119" top="34"/>
          <mx:Label text="Some Label:" left="10" top="63" textAlign="right" width="101"/>
          <mx:DataGrid left="119" top="62" right="5" bottom="5">
          <mx:columns>
          <mx:DataGridColumn dataField="Artist"/>
          <mx:DataGridColumn dataField="Album"/>
          <mx:DataGridColumn dataField="Price"/>
          </mx:columns>
          </mx:DataGrid>
          </mx:Panel>

          By keeping all of the Labels at the same left and width values along with textAlign="right" you can achieve the look of a form.
          • 2. Re: forcing datagrid to expand to full height in a form
            ritzcoder1 Level 1
            Hi. Thanks for your response. As you suggested I removed the form and and manually setup the items in a vbox with some padding thrown in. Everything works fine now and the datagrid stretches properly.