3 Replies Latest reply on Apr 22, 2010 9:27 AM by David_F57

    Row  height issue while using an expandable itemrenderer in list

    flex2008 Level 3

      I have an itemrenderer in a list that can be expanded/collapsed based on user interaction.The problem happens when the last row is expanded.In this case,the height of the empty rows after the last one is also increased.I want these heights to stay normal

       

      This is the code snippet i am using:

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
           <mx:List x="77" y="86" width="150" height="500"  variableRowHeight="true" alternatingItemColors="[#FFFFFF,#CCCCCC]">
                <mx:dataProvider>
                     <mx:XMLList>
                          <item isExpanded = 'false'/>
                          <item isExpanded = 'false'/>
                          <item isExpanded = 'false'/>
                          <item isExpanded = 'false'/>
                          <item isExpanded = 'false'/>
                     </mx:XMLList>
                </mx:dataProvider>
                <mx:itemRenderer>
                     <mx:Component>
                          <mx:VBox horizontalScrollPolicy="off" verticalScrollPolicy="off"
                               currentState="{data.@isExpanded == 'false'?'':'expanded'}">
                               <mx:states>
                                    <mx:State name="expanded">
                                         <mx:SetProperty name="height" value = "50"/>
                                    </mx:State>
                               </mx:states>
                               <mx:Button label="{data.@isExpanded == 'false'?'Expand':'Collapse'}"
                                            click="data.@isExpanded == 'false'?data.@isExpanded = 'true':data.@isExpanded = 'false'"/>
                          </mx:VBox>
                     </mx:Component>
                </mx:itemRenderer>
           </mx:List>
      </mx:Application>
      
      
        • 2. Re: Row  height issue while using an expandable itemrenderer in list
          flex2008 Level 3

          In the updateDisplayList method in ListBase a private method reduceRows is being called.This method does some calculations and removes some items from the rowInfo.I think this results in the reduced number of rows(Dont know why this is happening in the last row).Since it is a private method i have no chance of changing the behaviour even if i extend List.Anyone knows what to do in this case?

          • 3. Re: Row  height issue while using an expandable itemrenderer in list
            David_F57 Level 5

            hi,

             

            I think the issue is that the list is painting the whole viewable area and becuase its alternating colors you then have an issue when the whole list height isn't populated, one solution, maybe not the preferable one is to do the alternating hi-liting in the renderer.

             

            David.

             

            the App

            =======

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

            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

            <mx:List id="lst" x="77" y="86" width="150" height="500"  variableRowHeight="true" itemRenderer="myrend">

            <mx:dataProvider>

            <mx:XMLList>

            <item isExpanded = 'false'/>

            <item isExpanded = 'false'/>

            <item isExpanded = 'false'/>

            <item isExpanded = 'false'/>

            <item isExpanded = 'false'/>

            </mx:XMLList>

            </mx:dataProvider>

            </mx:List>

            </mx:Application>

             

            the renderer

            =========

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

            <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"

            currentState="{data.@isExpanded == 'false'?'':'expanded'}" creationComplete="vbox1_creationCompleteHandler(event)">

            <mx:Script>

            <![CDATA[

            import mx.controls.List;

            import mx.events.FlexEvent;

             

            protected function vbox1_creationCompleteHandler(event:FlexEvent):void

            {

            var myParent:List = owner as List;

            var i:Number = myParent.dataProvider.getItemIndex(data);

            if (i > 0)

            {

            if (int(i/2) != i/2) this.setStyle("backgroundColor",0xAACCAA);

            }

            }

            ]]>

            </mx:Script>

            <mx:states>

            <mx:State name="expanded">

            <mx:SetProperty name="height" value = "50"/>

            </mx:State>

            </mx:states>

            <mx:Button label="{data.@isExpanded == 'false'?'Expand':'Collapse'}"

               click="data.@isExpanded == 'false'?data.@isExpanded = 'true':data.@isExpanded = 'false'"/>

            </mx:VBox>