In Flex, how do wrap Lists into columns? - apache-flex

How do you make a List control wrap around to a second column (or multiple columns)? Thanks, let me know if there is a solution for this with the List control or some other Flex control.
For example, if you have one list with 42 items in it, but I want to cap the height of a list to 20 items; then instead of having one list with 42 items all the way down, I would have that list of items look like the equivalent of 3 adjacent lists: the first with 20 items, the second with 20 items, and the third with 2 items (which represent the original list of 42 items).
This question seems similar but it is in ColdFusion:
Wrapping lists into columns

Using a TileList and changing the direction variable is the best solution I have come up with.

You could use a Repeater and a simple Label based itemRenderer for the list items and avoid using a list completely. If you wrap it all up inside a custom control you can provide the same API as List so your consumers will never tell the difference.

I think you're looking for a second row, as others have noted. Either setting the wordWrap to true or using a different item renderer are the best way to get it done, but using a custom item renderer will give you more control over how the object is displayed.

I suggest creating a custom Component that wraps a variable number of Lists. This custom component can have a property named "maxListHeight". It can also have a "dataProvider" property. This custom component will produce a set of horizontally aligned lists. The number of lists produced by the custom component will be: floor(dataProvider.length/maxListHeight)+1. Where all but the last list produced will have a listHeight of maxListHeight; the last list produced will have a listHeight of: dataProvider.length % maxListHeight.
This should work but managing the addition and removal of items to the masterList should require some extra work (if it is not appended/removed from the back). This would also require instantiating multiple lists instead of just one.

The default itemRenderer for a List control is TextInput that supports only single line text. Use TextArea instead.
<mx:List itemRenderer="mx.controls.TextArea"/>

Try setting the following two properties on List:
wordWrap=true
variableRowHeight=true

Related

Find Duplicates from tree list in Dev-Ex

I have a Dev-Ex Tree List which has two columns, List contains elements inside it, Now My question is if i want to add any new item in the list then logic should search existing items in the tree, if no match found then it should allow to add that item in the list,otherwise not.
can i make a method which keep on checking recursively new item with the other item in the list.
Such tasks are usually solved by using TreeList Iterator. I think that the How to Implement an Iterator for the XtraTreeList (FindNode Example) knowledge base article contains the code you are looking for.

Views - column display

Hello
I want to show nodes to the columns, depending on their term.
Is it possible via single view (term with depth arg)?
It will be rather complicated to achieve this result using a single view. On the other hand, you could easily set up Panels and a view pane that gets some arguments from the pane's column container. There you could set the different terms you want to show in that column.

list flex : how to get the index of first visible element?

I have a simple list in Flex that is populated every N seconds by a dataprovider. My goal is to avoid scrolling the list after the dataprovider has been changed.
So, before I populate the list, I save the selectedIndex, and once the dataProvider is filled, I call:
list.selectedIndex = index;
list.scrollToIndex(index);
Trouble is that this moves the selected item of the list to the top.
The solution would be to get the index of the first element displayed in the list: but I have no idea on how to get that. Any clue?
Perhaps something like: list.getIndexFirstVisibleElement()
You haven't mentioned if you're using Flex 4, but if you are you might want to look into ensureIndexIsVisible.
You can find an example here: http://blog.flexexamples.com/2010/05/12/scrolling-to-a-specific-index-in-a-spark-list-control-in-flex-4/.

Flex 4 How do I access a specific cell by index?

I would like to edit a cell by the row and column indexes so essentially do the following:
advDataGrid[2][3] = "Dogs"
so that I am setting the data grid row 2 and column 3 to Dogs. I cannot for the life of me figure out how to do this!
Side note: I need this because I am trying to allow the user to copy a section of an excel file to a section of an AdvancedDataGrid like Google Docs does. I am using this idea to do it: http://mannu.livejournal.com/348299.html
Thanks! Any help will be greatly appreciated!
In general you want to operate on the dataProvider rather than the presentation (AdvancedDataGrid). So in your case, I would get the item associated with the specified row from your dataProvider and modify whichever element is specified to "Dogs". So something like this: adg.dataProvider[row].someColumnData = "Dogs"
EDIT: "someColumnData" refers to whatever property you have set for the column to display. So when you defined your AdvancedDataGrid's columns, you set the 4th column to use the "someColumnData" property of the items in your dataProvider, and you want to change the value in the 4th column, then you'd set it as described above. Hope that clarifies things.
Flex components are data driven, so you should modify the data provider of the grid.
What if you want to edit specific individual cells, eg I want to to keep running totals of some cells in other cells, IE: as a user edits I update whole columns.
Surely their must be a way to walk the array and get Column4.row6 = something.

Flex dataGrid how to color empty rows?

My problem is that empty rows (if there are more rows that dataSource items then there are empty rows) look identical to rows binded to dataSource items which are empty (see the difference?).
The only way to know the difference is to hover over them with the mouse, and if they are empty there's no color change, otherwise there's the blue background of the selection..
I want to change the color or in some way hide empty rows, those that are not bound to a dataSource item.
How can I accomplish this?
You can format your DataGrid using ItemRenderer.
The itemRenderer is a display object that get the data from the data provider and display it in the grid.
Writing your own logic can help your specific data display in general. in this case, check for data on the ItemRenderer object creationComplete. it the data is null or empty - display a sign (or whatever).
See this link as reference:
http://blog.flexexamples.com/2007/08/20/formatting-a-flex-datagrid-control-using-a-custom-item-renderer/
Enjoy!
I'm not sure if this is exactly what you are looking for but I cut off my rows at the end of my dataprovider like this:
myGrid.rowCount = myDP.length();
This can of course be modified with some simple logic to have min, max, or if it's a data entry type of grid length()+1.

Resources