2 Replies Latest reply on Jan 23, 2010 11:56 AM by Juanjo-kun

    Need for a Datagrid with variableRowHeight="true" and custom Item Renderer to display exact rows

    Juanjo-kun

      Hi again, developers:

       

      I'm in a search of a datagrid  with certain characteristics:

           - variableRowHeight = "true"

           - only one column

           - each row must have a custom item renderer with possibly different heights, and a fixed width

           - the datagrid must show always every item in the data provider with no vertical scroll bars, what means that the datagrid height must have always the exact height sum of all the item renderers it is displaying.

           - and no extra empty rows must appear in the last positions of the datagrid

       

      The last two requirements are something difficult to achieve... for some reason, empty rows appear at the last positions of the datagrid. I post what i've managed to get:

       

      <mx:Script>

           <![CDATA[

           private function resize():void
                  {
                      if (dg.dataProvider)
                      {
                          var h:Number = dg.measureHeightOfItems( -1, dg.dataProvider.length);
                          dg.height = h;
                      }
                  }

           ]]>

      </mx:Script>

       

      <mx:DataGrid id="dg" width="530" horizontalCenter="0" verticalScrollPolicy="off"
              dataProvider="{dp}"
              wordWrap="true" variableRowHeight="true" showHeaders="false" dataChange="resize()" height="{dg.measureHeightOfItems(-1,dg.dataProvider.length)}" click="Alert.show(dg.rowCount.toString());">
              <mx:columns>
                  <mx:DataGridColumn headerText="ID" width="50">
                      <mx:itemRenderer>
                          <mx:Component>
                              <mx:TextArea height="{Math.random()*100}" wordWrap="true" backgroundColor="{Math.random() * 16777216}" paddingTop="0" paddingBottom="0"/>
                          </mx:Component>
                      </mx:itemRenderer>
                  </mx:DataGridColumn>
              </mx:columns>
          </mx:DataGrid>