3 Replies Latest reply on Aug 14, 2006 4:41 PM by papalarge

    Datagrid height

    papalarge
      I have a datagrid that I would like to get whatever height it needs in order for all of the data to display, without needing a scrollbar. If I leave the height alone and let it take it's default height, a scrollbar will appear somewhere around the eighth row. If I set the height to a specific percentage or fixed height, I risk too little data causing the datagrid to be too tall.

      Is there a way to let the data of a datagrid determine it's height?
        • 1. Re: Datagrid height
          papalarge Level 1
          Ok... so I found one way of doing it... by setting rowcount, which is the number of rows to be displayed.

          <datagrid dataprovider="{myData}" rowcount="{myData}.length + 1">

          I now have a new problem. I need variable row heights on this grid, and set variableRowHeight="true". When the row height is more than one line (using an itemrenderer), it messes with the rowcount property so that a scrollbar is added. If I wrap one line of text, it adds one row blank row at the end, for example.

          Any ideas?
          • 2. Re: Datagrid height
            papalarge Level 1
            It appears when you set the variablerowheight property to true in the datagrid, then rowcount is no longer always accurate. When I have wrapping text in one row, and the height increases above the default rowheight, I can no longer set rowcount to my data's length in order to set the height of the control to allow all content to be visible, without scrolling.

            Seems like there's gotta be a better method to have a datagrid with height equal to the sum of the height of its rows...
            • 3. Datagrid height
              papalarge Level 1
              got a little function to help out with this case, when you need to have variable row heights, and need all of the data to be displayed, and no more blank rows....

              public function resizeDataGrid(o:Object,DataProviderLength:int):void{
              var tempDG:DataGrid=DataGrid(o);
              tempDG.height=tempDG.measureHeightOfItems(-1,DataProviderLength+1);
              }

              then in you datagrid, do something like this...

              <mx:DataGrid id="myGrid" creationComplete="this.resizeDataGrid(event.target,myDataProvider.length);" variableRowHeight="true" verticalScrollPolicy="off">