6 Replies Latest reply on Feb 17, 2010 4:34 PM by Flex harUI

    dynamic datagrid rowHeight and itemRenderer problem

    |3uddy Level 1

      Hi guys,

       

      Long time listener; first time caller....

       

      I have had a look around the forums here and i can see there are a lot of similar issues to the one i'm currently having but not so many solutions. Not sure if i'll have any better luck with my question but here goes...

       

      My issue is to do with the row height of a datagrid row not matching up properly with the height of the custom iterm renderer used on a column.

      The item renderer consists of an HBox containing an image and a textArea. The image will not always be present and the text area can contain a couple of words or many lines of text.

       

      I have overridden the measure function of the item render in which i am manually setting the HBox's height and measuredHeight.

       

      Problem is that i have to find some way of triggering a redraw of the datagrid AFTER if have set the item renderers height, but i dont seem to be able to directly access the in-line renderer from the parent class.

       

      If anyone could throw any suggestions my way it would be greatly appreciated!

       

      thanks '

      Dave

        • 1. Re: dynamic datagrid rowHeight and itemRenderer problem
          archemedia Level 4

          I will have a go on this but please provide an example as simple as possible in which the problem is showing.

           

          Dany

          • 2. Re: dynamic datagrid rowHeight and itemRenderer problem
            |3uddy Level 1

            thanks for your reply, i'll have to post the example when i get back infront of the code...in 12 hours!

            • 3. Re: dynamic datagrid rowHeight and itemRenderer problem
              saisri2k2 Level 4

              Why not use custom events??

               

              or you can do the following

               

              in the data provider(if array collection) pass the 'CallBackFunction' i.e., handle of a function in the parent class to the item renderer. when ever the 'set data' of the renderer is called in the renderer make  the renderer call the parent's 'CallBackFunction'(wat eva logic you want here)

              1 person found this helpful
              • 4. Re: dynamic datagrid rowHeight and itemRenderer problem
                Flex harUI Adobe Employee

                You shouldn't need to force a redraw.  The renderer's measureHeight is only

                requested prior to a call to its updateDisplayList where it has to layout

                according to the given unscaledHeight (which may be greater than the

                requested measuredHeight).  As long as you didn't lock down the width/height

                of the children, the Hbox should respond as expected.

                • 5. Re: dynamic datagrid rowHeight and itemRenderer problem
                  |3uddy Level 1

                  Ok so here's the sample code...

                   

                  ****Renderer*****

                  <?xml version="1.0" encoding="utf-8"?>

                  <mx:HBox

                   

                   

                  horizontalAlign="

                  left"

                  verticalAlign="

                  middle"

                  horizontalGap="

                  0"

                  verticalGap="

                  0"

                  xmlns:mx="

                  http://www.adobe.com/2006/mxml"

                  horizontalScrollPolicy="

                  off"

                  verticalScrollPolicy="

                  off"

                  width="

                  100%"

                  height="

                  100%"

                  resize="measure()"

                  borderColor="

                  green"

                  borderStyle="

                  solid"

                   

                  >

                   

                   

                   

                  <mx:Metadata>

                  [

                  Event(name="gridRowHeightChange", type="flash.events.Event")]

                   

                  </mx:Metadata>

                   

                   

                   

                  <mx:Script>

                  <![CDATA[

                   

                   

                  import mx.events.ResizeEvent;

                   

                   

                  import flash.events.Event;

                   

                  [

                  Bindable] public var showLocalPartImage:Boolean = false;

                   

                  override public function set data(value:Object):void

                  {

                   

                   

                       super.data = value;

                   

                       lblPartNum.text = data.label;

                  }

                   

                  override protected function measure():void

                  {

                   

                   

                       super.measure();

                   

                   

                       if(lblPartNum.text != "" && lblPartNum.width > 0)

                       {

                            lblPartNum.validateNow();

                            lblPartNum.mx_internal::getTextField().autoSize = TextFieldAutoSize.LEFT;

                            lblPartNum.height =

                   

                            this.height = measuredHeight = lblPartNum.mx_internal::getTextField().height;

                   

                            dispatchEvent(

                  new Event("gridRowHeightChange"));

                       }

                   

                  }

                   

                  ]]>

                   

                  </mx:Script>

                   

                   

                   

                   

                  <mx:Image id="imgLocal" horizontalAlign="center" verticalAlign="middle" visible="false" width="{0}"/>

                   

                  <mx:TextArea id="lblPartNum" width="{this.width - imgLocal.width - 4}" height="100%" editable="false" verticalScrollPolicy="off" />

                   

                   

                  </mx:HBox>

                   

                  ****EndRenderer*****

                   

                   

                   

                  ****DataGrid****

                   

                   

                  public function measureGrid(event:Event):void

                  {

                   

                  shoppingCart.removeEventListener(DataGridEvent.COLUMN_STRETCH, measureGrid);

                  shoppingCart.invalidateList();

                   

                  shoppingCart.addEventListener(DataGridEvent.COLUMN_STRETCH, measureGrid);

                   

                  }

                   

                   

                   

                   

                   

                  <mx:DataGrid id="shoppingCart"

                  width="

                  100%" height="100%"

                  dataProvider="

                  {_order.orderItems}"

                  allowMultipleSelection="

                  true"

                  sortableColumns="

                  true"

                  variableRowHeight="

                  true"

                  doubleClickEnabled="

                  true"

                  doubleClick="selectPartHandler(event)"

                  paddingRight="

                  5"

                  editable="

                  false"

                   

                  >

                   

                   

                  <mx:columns>

                   

                  <mx:DataGridColumn width="22" minWidth="20" sortable="false" editable="false"/>

                   

                  <mx:DataGridColumn width="22" minWidth="20" sortable="false" editable="false"/>

                   

                   

                  <mx:DataGridColumn minWidth="240" width="270" dataTipField="description" dataField="description" headerText="Description"

                  editable="

                  false" wordWrap="true">

                   

                  <mx:itemRenderer>

                   

                  <mx:Component>

                   

                  <controls:DescriptionShoppingCartRenderer

                  showLocalPartImage="

                  {!(outerDocument.displayUnderline)}" gridRowHeightChange="{outerDocument.measureGrid(event)}">

                   

                  </controls:DescriptionShoppingCartRenderer>

                   

                  </mx:Component>

                   

                  </mx:itemRenderer>

                   

                  </mx:DataGridColumn>

                   

                  ****EndDataGrid****

                   

                   

                  Unfortunately the whole code is much too large to fit in here, but here are the main working parts.

                   

                  I hope this helps.

                   

                  What i am getting when running this is strange. When i run the first time and when i resize a column, the row height is incorrect, but then when i just click the 'column stretch' arrow (ie the space between the column headers) and dont actually resize at all, the row heights re-calculate and they fit perfectly.

                  This makes me think that i need to trigger this event manually AFTER the itemRenderer has been calculated.

                   

                  EDIT: forgot to add the measureGrid function

                  • 6. Re: dynamic datagrid rowHeight and itemRenderer problem
                    Flex harUI Adobe Employee

                    The width of the hBox is not known at measure time so you can't base the

                    TextField off of width.  You have to use explicitWidth instead.

                    1 person found this helpful