4 Replies Latest reply on Sep 26, 2009 11:37 PM by Flex harUI

    DataGrid with variableRowHeight doesn't scroll correctly

    calebmei

      Hi there,

       

      In a datagrid, I want to increase the height of the datagrid item when click on a button on the datagrid.

       

      So I went ahead to create an itemRenderer using VBox(). And this VBox have an expand button to increase the height, or collapse the VBox. Everything is working great.

       

      However, when the item is expanded, the scroll is not working. Scrollbar is unable to move the expanded item along with the datagrid.

       

      Search on the forum suggest I have to override the measure() method and calculate the row count * height and set measureHeight. Tried and still not working.

       

      Any one have any idea?

       

      Cheers,

      Calebmei

       

       

      ItemRenderer:

       

      <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" height="100%" horizontalAlign="left"
          verticalAlign="top" doubleClickEnabled="true" horizontalScrollPolicy="off" verticalScrollPolicy="off" width="100%"
          creationComplete="init()">
            <mx:Script>
              <![CDATA[
                ...

                private var expanded:Boolean = false;

                private function onButtonClick():void  {

                   this.height = expanded ? 0 : 400;   // if expanded, collapse, o.w set height to 400.

                   expanded = !expanded;

                }
                 
              ]]>
          </mx:Script>
         
          <mx:HBox width="100%" horizontalGap="15">
              <mx:LinkButton label="{expanded ? '-' : '+'}" click="onButtonClick()"/>
              <mx:Text text="Expand or Collapse"/>
      </mx:VBox>

        • 1. Re: DataGrid with variableRowHeight doesn't scroll correctly
          Flex harUI Adobe Employee

          Renderers recycle when scrolled.  See my blog for details.  Therefore, the height of a renderer must be calculated from the data property or related properties.  You could store the expanded state of an item as a field of the items or somewhere else then set the height of the renderer accordingly.  You don't need to override measure() in this scenario.

           

          Alex Harui

          Flex SDK Developer

          Adobe Systems Inc.

          Blog: http://blogs.adobe.com/aharui

          • 2. Re: DataGrid with variableRowHeight doesn't scroll correctly
            calebmei Level 1

            Thank you Alex and thank you for all the great examples on your blogs. They are really helpful.

             

            So in the itemRenderer, I understand now that it got recycle when scroll. And I attempted to set the height of the rednerer.

             

            What is the property I should set? explicitHeight, measuredHeight, or just height? I tried all 3 and seems have not resolve the issue where the renderer jumps when scroll.

             

                      override public function set data( value:Object ):void
                        {
                            super.data = value;
                            if (value) {
                                _data = value;
                            }
                            if (expanded && _lastData != value && this.verticalScrollPosition == 0) {
                                this.explicitHeight = 400;
                                this.measuredHeight = 400;
                            }
                            _lastData = value;
                        }

             

             

            If I set the height to collapse, some how the vertical scroll bar will go away. Should I go ahead to customize such that,

            1. When scroll down, collapse the expand item, force vertical scroll bar to show, and scroll to index to hide the collaspe item,

            2. When scroll up, expand the collape item, force vertical scroll bar, and scroll to 1 index up

             

            Thanks in advance, hopefully can help me confirm if I am going down a correct path.

             

            Cheers,

            Calebmei

            • 3. Re: DataGrid with variableRowHeight doesn't scroll correctly
              Flex harUI Adobe Employee

              If you're actually measuring something, use measuredHeight, otherwise use explicitHeight.

               

              I still see an "expanded" property in your renderer that doesn't appear to be set based on the data property.  That might still give you trouble.

               

              Alex Harui

              Flex SDK Developer

              Adobe Systems Inc.

              Blog: http://blogs.adobe.com/aharui

              • 4. Re: DataGrid with variableRowHeight doesn't scroll correctly
                calebmei Level 1

                Thank you x10!!!

                 

                Got it working after remove the variable from the renderer into the data object itself! Turns out to be the "effect" was causing the issue. Thanks alot for all the help.