5 Replies Latest reply on May 19, 2008 9:56 PM by joseph_gener

    datagrid variable row height and setting a max row height

    joseph_gener
      i'm looking for a way to allow variable row height to true but set a max row height and if it exceeds this height, a scrollbar would be accessible.

      the current scenario is that enabling variable row height would show everything but sometimes the text is too long and it takes longer to breeze through the list. on the otherhand, disabling would show only one line.

      i've tried using itemrenderers but to dynamically set the width and/or height of a text or textarea is a problem. its just sticking to one size

      any ideas?
        • 1. Re: datagrid variable row height and setting a max row height
          AashayD
          I've got a similar issue but I figure I'd append this thread instead of start my own. I would like to know if it's possible to have rows in Datagrids be different heights depending on the content in them (I need to use a custom itemRenderer for formatting reasons). I've got variableRowHeight set to true but I'm having no luck.

          Setting the itemRenderer's object height (the object itself is a container with two textboxes in them, one at the top as a "header" and one at the bottom that has "content" which will have varying heights) causes scrollbars to appear PER row. Getting rid of the height property causes an issue similar to the OP's issue, where all the row heights are the same (occasionally the rows collapse and I cant see my data anymore).

          I've even tried writing a function to manually increase the itemRenderer's height based on the height of the content textbox, but no luck there either.

          Finally, setting constraints on the content textbox to fit to the bottom of the container seems to be logical, but if the container itself isnt changing height in the datagrid, this solves nothing.

          Anybody have any insight?
          • 2. Re: datagrid variable row height and setting a max row height
            Mitek17 Level 1
            I think you have to override set height() method in IR and there calculate maximum height allowed and if it is greater then some value - allow scroller. Otherwise - just resize the IR.

            Cheers,
            Dmitri.
            • 3. Re: datagrid variable row height and setting a max row height
              AashayD Level 1
              The question is, how do you calculate maximum height on the fly? The height has to be determined by the content that is being loaded, and there's no way to know how much content is being loaded in that particular IR ahead of time. Is there a property of the text height that I can latch onto?

              The end-goal is to remove scrolling entirely within each IR. It's kinda silly to have scrolling elements inside a scrolling datagrid :)
              • 4. Re: datagrid variable row height and setting a max row height
                Mitek17 Level 1
                Sorry, I don't understand your question - why do you need to know max height?

                Here is the example - this is my component which displays text. It tries to accommodate as much text as possible .if it reaches some limit -only then it start showing scrollbar. You need this if you use it as IR - as List becomes dysfunctional if item.height > list.height.



                package
                {
                import mx.controls.TextArea;
                public class ElasticTextArea extends TextArea
                {
                public function ElasticTextArea()
                {
                super();
                super.horizontalScrollPolicy = "off";
                super.verticalScrollPolicy = "off";
                super.editable = false;
                }

                override public function set text(val:String):void
                {
                super.verticalScrollPolicy = "off";
                textField.text = val;
                validateNow();

                //set height to the height of the text + 1 line
                height = textField.textHeight + textField.getLineMetrics(0).height;
                }

                override public function set height(value:Number):void
                {
                var l_iMeasureHeight:uint = textField.textHeight + textField.getLineMetrics(0).height;
                if (l_iMeasureHeight<= super.maxHeight)
                {
                super.height = l_iMeasureHeight;
                }
                else
                {
                super.height = super.maxHeight;
                super.verticalScrollPolicy = "on";
                }
                }

                override public function set maxHeight(value:Number):void
                {
                super.maxHeight = value;
                }

                override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                {
                height = textField.textHeight + textField.getLineMetrics(0).height;
                super.updateDisplayList(unscaledWidth, unscaledHeight);
                }
                }
                }

                PS. This thing is not suitable for printing - it is a whole different story with "Flex Printing Engine" (c) :)

                Cheers,
                Dmitri.
                • 5. Re: datagrid variable row height and setting a max row height
                  joseph_gener Level 1
                  i did this instead:

                  <mx:DataGridColumn id="notes" textAlign="left" headerText="Notes"
                  dataField="Notes" wordWrap="true" editable="false">
                  <mx:itemRenderer >
                  <mx:Component>
                  <mx:HBox maxHeight="75">
                  <mx:Text text="{data.Notes}" width="100%" />
                  </mx:HBox>
                  </mx:Component>
                  </mx:itemRenderer>
                  <mx:itemEditor>
                  <mx:Component>
                  <mx:TextArea text="{data.Notes}" width="100%"/>
                  </mx:Component>
                  </mx:itemEditor>
                  </mx:DataGridColumn>

                  but a new problem arose.
                  everytime i change the data in the arraycollection (i used pagination) the datagrid rows go back to a one-liner-row and until i edit it, thats when the datagrid refreshes it and resizes the rowheight.

                  i think it has something to do with the updateDisplayList(). but i'm not sure.

                  any ideas? help please...

                  thanks