Avatar of robbersrow
robbersrow asked on

In Flex, how can I have variable/different row heights for the <mx:TileList> container?

I am dynamically populating a TileList with data from a database.  There are multiple rows in the TileList, but each row needs to be a different height depending on the data that is populated, and the row height needs to adjust dynamically to that data.  Is it possible to do this?  I tried setting the "variableRowHeight" property on the TileList, but apparently that does not apply to the TileList control (or at least it does not seem to work).
<mx:TileList width="100%" height="100%" fontFamily="Times New Roman" color="#000000" fontSize="14" borderStyle="none" 
		allowMultipleSelection="false" enabled="true" alternatingItemColors="[#D0E2F6, #EEEEEE]"
		columnCount="1" rowCount="{_model.products.length}" variableRowHeight="true"
		dataProvider="{_model.products}">
		<mx:itemRenderer>
            <mx:Component>
	                <mx:VBox backgroundAlpha="0.0" borderStyle="none" backgroundColor="#ffffff">
	                	<mx:Script>
	                        <![CDATA[
	                        	import com.komelon.model.KomelonModelLocator;
	                        
	                        	[Bindable]
		    					private var _model:KomelonModelLocator = KomelonModelLocator.getInstance();
	                        ]]>
	                    </mx:Script>
	                    <mx:Canvas borderStyle="outset" borderColor="#cccccc" x="5" y="5" borderThickness="2">
					    	<mx:Image source="{data.image}" maxWidth="176"/>
					    </mx:Canvas>
					    <mx:Canvas borderStyle="outset" borderColor="#cccccc" x="100" y="5" borderThickness="2">
					    	<mx:Image source="{data.image_usage}" maxWidth="176"/>
					    </mx:Canvas>
					    <mx:Canvas borderStyle="outset" borderColor="#cccccc" x="200" y="5" borderThickness="2">
					    	<mx:Image source="{data.image_clamshell}" maxWidth="176"/>
					    </mx:Canvas>
					    <mx:Canvas borderStyle="outset" borderColor="#cccccc" x="300" y="5" borderThickness="2">
					    	<mx:Image source="{data.image_table}" maxWidth="176"/>
					    </mx:Canvas>
						<mx:Label text="{data.title}" color="#000000" width="400" textAlign="left" height="30" fontFamily="Times New Roman" fontSize="20" id="title" x="195" y="0"/>
						<mx:Label text="{data.model_number}" color="#333333" width="400" textAlign="left" height="18" id="date" fontFamily="Times New Roman" fontSize="12" x="195" y="27" />
						<mx:List dataProvider="{data.description}"/>
					</mx:VBox>
            </mx:Component>
		</mx:itemRenderer>
	</mx:TileList>

Open in new window

Apache FlexWeb Applications

Avatar of undefined
Last Comment
robbersrow

8/22/2022 - Mon
Siva Prasanna Kumar

did u mean

<mx:Label text="{data.model_number}" color="#333333" width="400" textAlign="left" height="18" id="date" fontFamily="Times New Roman" fontSize="12" x="195" y="27" />

label like this filled with data is not adjusting its height automatically?

or you mean the whole Vbox?
ASKER
robbersrow

I mean the VBox.  But I should further clarify that.  The VBox does seem to adjust its size based on the content, however it does so by adding a scrollbar.  The reason it adds the scrollbar is because the TileList rowHeight is set to a certain height, and the VBox height cannot cause that TileList rowHeight to expand.  Overall, it seems the problem is that the TileList only accepts one "rowHeight" which is applied to all of its rows, no matter how much the content overflows in a particular row.  And when the content does overflow, a scrollbar seems to get added to that row, instead of actually expanding the height of the row.  Ideally, I would like to figure out how to dynamically expand the height of the row according to the conent within it.  This would mean that all the rows within the TileList could be different heights, and I am not sure if this is possible?
taus01


A TileList does not have real rows, it is basically one row and the columCount property defines how many items are displayed in a 'virtual' row. The rowHeight is calculated when the TileList is initialized based on the items in the dataProvider and then all rows are the as high as the biggest item. You should not have any scrollbars.

Maybe i don't really understand what you are trying to do. Could you confirm that the scrollbars are there even after initialization or do they only appear if you change one of the items (eg. make it bigger).

If you dynamically change the items size you might need to call the .invalidateDisplayList() and/or .invalidateSize() to force a redraw and re-measure of the TileList.

ST
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
ASKER
robbersrow

taus01, thanks for your help.  The scrollbars are there even after initialization.  Each "virtual row" is in fact a large VBox containing my content, and generated by an <mx:itemRenderer> (see code below).  To avoid the scrollbars, I have set the "rowHeight" property to be 800, which is larger than any of my content would fill, but at the same time it leaves quite a bit of whitespace in many "virtual rows" where the content is not as much.  I would ideally like each "virtual row" to contract/expand to fit the content I am populating in it.  If this is not possible with the TileList, are there any other similar controls that I could use to accomplish my goal?  The uniform "rowHeight" just leaves too much whitespace for some of my content, while being ok for other content.
<mx:TileList>
  <mx:itemRenderer>
    <mx:Component>
      "Variable height VBox with content here"
    </mx:Component>
  </mx:itemRenderer>
</mx:TileList>

Open in new window

ASKER CERTIFIED SOLUTION
taus01

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
robbersrow

This worked, and fit all my rows to the proper height.  However, this results in a scrollbar for the List, as I am unable to compute exactly what I should set the height to.  Do you know how to make the List (what used to be the TileList, in my code) expand to its full height, so that there is no need for a scrollbar?
ASKER
robbersrow

Thanks for your help.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
taus01

Just set the height in the mxmml tag of the list control to: height="100%" or a fixed number depending on your UI.

ST
ASKER
robbersrow

Thank you, that worked for the list expanding, but now my VBox (which wraps the List) seems to be a constant height, and does not expand/contract for the List height.  I tried a statement like the following on the VBox, but it did not change the VBox height:

vBoxListWrapper.height = list.height + 5;

Any ideas off hand?