Flex List auto height - apache-flex

Is it possible for a Flex List to adjust its height automatically for the number of rows it's displaying? The problem I'm having is that the List renders taller than the number rows. The number of rows is dynamic so I'd like the List to automatically adjust its height based on its content. I've tried setting height="100%" which doesn't help.

It appears that List defaults to fixed row height. Setting variableRowHeight to true fixed it.
variableRowHeight="true"

If your items all render at the same height, you could bind the height of your list to the number of rows * the item renderer height.
Alternatively, if you are using Flex 4, you can create new skin for your List based on the existing List skin, but remove the Scroller that wraps the DataGroup and make the height of the DataGroup 100%.
Hope that helps.

Related

Flex 4.6 Mobile - Scrolling to the last added item in a dataGrid with variableRowHeight

I'm trying to set the scroll vertical position of a spark dataGrid to show the items as I add them to the grid. I know you can set the scroll position like this:
dataGrid.scroller.viewport.verticalScrollPosition = itemPosition*rowHeight;
The problem is that the dataGrid have variableRowHeight, as each row word wraps their name labels, and I don't know how to get each row height. I though of getting the itemRenderer associated with every item as I add it to the grid, and keep the total row height value in a variable, but don't know how to achieve that.
Is there any way to set the scroll position of a dataGrid with variableRowHeight to show the last added item?
After you set your dataprovider, you could do something like
dg.validateNow();
dg.verticalScrollPosition=dg.grid.contentHeight+dg.grid.height;

An item renderer with autosize

For example, I've created 2 horizontal lists with different heights: 50px and 100px.
I'd like to use 1 item renderer to display both.
The item renderer has to create square items, so it has to produce 50x50 items for the first list and 100x100 items for the second one.
How should I set up the item renderer to get the result?
It is always the parents responsibility to size it's children. In this case, the list is the parent and the itemRenderer is the child. The best you can do is offer suggestions in the way of measuredWidth and measuredHeight.
So, you could override the measure method of your itemRenderer component to set the values (50x50 or 100x100) based on some criteria. But, what would that criteria be?? We don't know because it wasn't provided inyour question. In an ideal world, it cannot be the height or width of the List; because the itemRenderer should know nothing about the list.
Ignoring the itemRenderer for a moment...
In an MX List, you can use the rowHeight property.
In a Spark List, you can set the rowHeight property on the List's layout.
You may be able to use a typicalItem on the List class instance.
I think these approaches are more likely to give you the results you want than doing something in the itemRenderer.

Sizing Flex DataGridColumns(Dynamic number)

I have a DataGrid that has between 4-10 columns. I want the columns to be of width '50'. I have already set the width attribute in MXML. I am using "colName.hide = true" to hide various columns depending on whether I have data. I find that my columns expand when I have less columns. Is there a way to set the max width of a column or force it to keep the same width?
Why not just resize the width of the datagrid itself to 50 * amtOfCols when columns are hidden and shown?
You have to leave one column with undefined width - it will stretch when parent (grid) will be resized.
Or, you should recalculate and apply width of the greed dynamically

Auto-sizing the height of a TileList

Is there a way to have the TileList component to auto-size to its contents? I have tried setting it 100%, but it seems that won't help. I don't want to hard-code the height because the content will be vary, and I don't want scrollbars to show up. Please help.
This is how I ended up solving this issue:
First I set the values for rowHeight and maxColumn properties. Then I did a little function that fires on the updateComplete event of the TileList to calculate the height of the tileList by doing a rowHeight * number of rows.
That worked.
Try creating an event handler when the tilelist changes, calculate the height based on the children then resize the child list based on that value.

Change the height of a list item when it's in edit mode

I have custom list item renderers and editors for a List control. I need for the editor to have a greater height then the renderer, i.e., the row should expand(in height) when it goes into edit mode. However, even when the list's variableRowHeight is set to true, it doesn't do what I want: the height seems to be based on the height of the renderer only, not the editor. Is there any way to do what I want?
Have you tried setting the height of each of the renderers on the row that the editItemRenderer is on.
If my memory serves me correctly the varible row height takes its height from the first column cells (this may be wrong?)
If you have varibleRowHeight then when you go to edit a cell make sure all cells in the row are the same height and you may also have to invalidate the size and display.
If you have already solved this post your answer as it would be interesting to see what different approaches you may have taken.

Resources