Dynamisch width of tileList Itemrenderer

Hi
I´ve got my own ItemRenderer for a list.
itemrenderer.mxml:
<mx:Canvas width="100%" height="36" minWidth="200"...>
<mx:Image y="0" source="icons/button.png"
maintainAspectRatio="false" left="0" right="0"/>
</mx:Canvas>
When i use this itemRenderer in a List the image is scaled to
the current width of the list, as expected.
But when i use this itemrenderer in a tilelist it
doesn´t scale to the largest possible size, instead it always
stays at the minWidth (200 px).
What i want is, that, when the tilelist positions the buttons
in (e.g.) two rows that the button is scaled to 50% of the width of
the tilelist. And when the tilelist positions the buttons in 3 rows
that the width of the button is scaled to 33% of the
tileList-width, and so on.
Does anyone have an idea how this can be done?
thanks!
muzi

I understand what's happening under the hood - and it makes
sense to conserve resources and improve performance. But shouldn't
a creationComplete event be fired even if the item is recycled? I'm
sure I'm not the only developer that thought
well I'll just use the creationComplete event, like i do in my
actual applications or popups.
I'm not saying that overriding the 'set data' method doesn't
work great, I'm just saying there should be some consistency - even
if items are being recycled.
But enough ranting! :D i just posted this so that others
might stumble upon it -

Similar Messages

How access Image in TileList ItemRenderer?

Hi!
I need draw net above some images in TileList, something like this:
I extended class Image and wrote function which draw net. I use this class in TileList ItemRenderer. But how I can access required item Image and call draw function?
Thanks!

Your code is missing. But in the click event of the renderer you should be able to do this:
If you have assigned an id to the renderer component (may need to wrap in canvas or other container)
click="myRenderer.text"
or
click="data.myProperty"
If you do post your code we can give a better answer.
If this post answers your question or helps, please mark it as such. Thanks!
http://www.stardustsystems.com
Adobe Flex Development and Support Services

Panel styling missing in TileList itemRenderer

I have created tile list with an inline ItemRendered component with a Panel component inside to display results. The panel styling disappears for some reason in a TileList, but not in a DataGrid. How do I force the panel styling to stick, or remove whatever parent style that's forcing the Panel component to lose its borders, drop shadows etc. I looked at the styling, but can't figure out where the conflict is... Code below if you want to test (both DataGrid and TileList, XML just beneath):
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:net="flash.net.*" creationComplete="getPortData.send()">
<mx:HTTPService id="getPortData" url="port.xml" />
 <mx:DataGrid dataProvider="{getPortData.lastResult.portfolio.project}" width="100%" height="250" variableRowHeight="true" >
 <mx:columns>
 <mx:DataGridColumn>
 <mx:itemRenderer>
 <mx:Component>
 <mx:Panel title="{data.title}">
 <mx:VBox>
 <mx:Image source="images/port_thumbnails/{data.thumbimage}" height="100"/>
 <mx:Label text="{data.title}" />
 </mx:VBox>
 </mx:Panel>
 </mx:Component>
 </mx:itemRenderer>
 </mx:DataGridColumn>
 <mx:DataGridColumn dataField="thumbimage" />
 <mx:DataGridColumn headerText="Column 1" dataField="title"/>
 </mx:columns>
 </mx:DataGrid>
 <mx:TileList dataProvider="{getPortData.lastResult.portfolio.project}" width="100%" variableRowHeight="true" columnWidth="300" >
 <mx:itemRenderer>
 <mx:Component>
 <mx:Panel title="{data.title}">
 <mx:VBox>
 <mx:Image source="images/port_thumbnails/{data.thumbimage}" height="100"/>
 <mx:Label text="{data.title}" />
 </mx:VBox>
 </mx:Panel>
 </mx:Component>
 </mx:itemRenderer>
 </mx:TileList>
</mx:Application>
XML:
<?xml version="1.0" ?>
- <portfolio>
- <project>
<thumbimage>bigsky_thumb.jpg</thumbimage>
<bigimage>big_sky.jpg</bigimage>
<title>Project 1 title</title>
</project>
- <project>
<thumbimage>conrad_thumb.jpg</thumbimage>
<bigimage>conrad_klein.jpg</bigimage>
<title>Project 2 title</title>
</project>
- <project>
<thumbimage>fire_thumb.jpg</thumbimage>
<bigimage>fire_central.jpg</bigimage>
<title>Project 3 title</title>
</project>
- <project>
<thumbimage>learncen_thumb.jpg</thumbimage>
<bigimage>learn_central.jpg</bigimage>
<title>Project 4 title</title>
</project>
- <project>
<thumbimage>molton_thumb.jpg</thumbimage>
<bigimage>molton_flooring.jpg</bigimage>
<title>Project 5 title</title>
</project>
- <project>
<thumbimage>nusash_thumb.jpg</thumbimage>
<bigimage>nusash.jpg</bigimage>
<title>Project 6 title</title>
</project>
- <project>
<thumbimage>pleasure_thumb.jpg</thumbimage>
<bigimage>pleasure_dishes.jpg</bigimage>
<title>Project 7 title</title>
</project>
- <project>
<thumbimage>tarheel_thumb.jpg</thumbimage>
<bigimage>tarheel_form.jpg</bigimage>
<title>Project 8 title</title>
</project>
- <project>
<thumbimage>ward_thumb.jpg</thumbimage>
<bigimage>ward_andrews.jpg</bigimage>
<title>Project 9 title</title>
</project>
</portfolio>

Try using a Canvas around the Panel

Tilelist itemRenderer Dynamic

Hi,
I'm creating a thumb photo gallery and I'm using a tilelist
component as the Gallery container as the itemrender I'm using a
mxml component created by me, so I need to change this itemrenderer
to other mxml component in runtime, i could be by a combobox, I
don't no how change it dynamic, in the script, if somebody can help
me, I'll be so thankful...

Yes, you can, but you need to use a "classFactory". I've not
done this myself, but have seen examples. I think you will find
examples via google.
Tracy

Setting datagrid column width according to itemrenderer.

Hi all,
This is my first question ever in any forum i have visited, so if you find anything stupid about my way of asking question then Pls ignore.
I have taken a datagrid and for one of the datagrid column I have an itemrendere which is an HBOX. THe Hbox contains 3 buttons Edit, Update, cancel. At first only Edit button is visible and on click of it, It is removed from the Hbox and 2 other buttons i.e. Update and Cancel are added in the Hbox. what i want is when i add these 2 buttons the size of the datagrid column should get adjusted accordingly.
I have serached a lot abt this but couldnt find a solution. Please help.
Happy new year to all.....

@Pramod :
(listdata.owner as datagrid) .validateNow();
// thats wat i did. but not working.
@John : TypicalItem may work but I am using Flex Builder 3 and i think it does not provide the typicalItem class in it.

How to Reference What Was Clicked in a TileList using an ItemRenderer

Hi,
I've got a Tilelist and I'm using an ItemRenderer, which is a Button.
I don't understand how to reference what was clicked. So, if the first tile (which is the first Obect) is clicked, how do I know that that particular one was clicked.
<mx:TileList
 id="myTL"
 dataProvider="{myAC}"
 width="400"
 height="400"
 columnCount="2"
 rowCount="2" />
<mx:ArrayCollection id="myAC">
 <mx:Array>
 <mx:Object id="first" label="1" />
 <mx:Object label="2" />
 <mx:Object label="3" />
 <mx:Object label="4" />
 </mx:Array>
</mx:ArrayCollection>
ItemRenderer:
<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml"
click="Alert.show( 'This was Clicked')">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
]]>
</mx:Script>
</mx:Button>
Thank you.
-Laxmidi

Hi Laxmidi,
Using the itemClick event you can acheive this using the event Object. Check the sample code below:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.events.ListEvent;
import mx.controls.List;
import mx.controls.Alert;
import mx.events.ItemClickEvent;
private function onItemClick(event:ListEvent):void
var strAlert:String = "Item Row Index Clicked : " + event.rowIndex + "\n";strAlert +=
"Item Column Index Clicked : " + event.columnIndex + "\n";Alert.show(strAlert);
]]>
</mx:Script>
<mx:TileList id="myTL" dataProvider="{myAC}" itemClick="onItemClick(event)" width="400" height="400" columnCount="2" rowCount="2">
<mx:itemRenderer>
<mx:Component>
<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml" click="Alert.show( 'This was Clicked')">
<mx:Script>
<![CDATA[
import mx.controls.Alert;]]>
</mx:Script>
</mx:Button>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
<mx:ArrayCollection id="myAC">
<mx:Array>
<mx:Object id="first" label="1" />
<mx:Object label="2" />
<mx:Object label="3" />
<mx:Object label="4" />
</mx:Array>
</mx:ArrayCollection>
</mx:Application>
You can also try this by writing the Click event on the Button in the TileList itemRenderer as well where you can access easily the data of the itemClicked easily using the data Object.
Thanks,
Bhasker

Individual itemRenderer for each item in TileList

I currently have a tilelist with 6 items in it. I would like each item to be renderered slightly different. I know I can set the itemRenderer attribute of TileList but is it possible to set a different itemRenderer for each individual Object in the TileList?
My code currently looks like this:
<mx:TileList itemRenderer="myContainer1">
 <Object />
 <Object />
 <Object />
 <Object />
 <Object />
 <Object />
</mx:TileList>

Yes you can assign different components per row,
use <ViewStack..
 <HBox1 />
 <HBox2 />
 <HBox3 /> & so on..
selectedIndex for ViewStack you can specify as per requirement like you can maintain internally rowIndex 0 to n & this you can assign to ViewStack
selectedIndex={data.rowIndex}

Problem in tilelist with dataprovider.

I have a problem in tilelist. with the dataprovider a get the
message error
ArgumentError: Error #2025: The supplied DisplayObject must
be a child of the caller.
at flash.display::DisplayObjectContainer/removeChild()
if i delete the images from the last added to the first one i
have no prob but if i want to delete from the middle i get the
message error th sode that i use is
<mx:TileList id="tileList"
dataProvider="{imgData}"
columnCount="4"
columnWidth="222"
rowCount="2"
rowHeight="194"
themeColor="haloSilver"
verticalScrollPolicy="on"
x="0" y="415" width="100%">
<mx:itemRenderer>
<mx:Component>
<mx:VBox horizontalAlign="center"
verticalAlign="middle" width="222" height="194"
verticalScrollPolicy="off" horizontalScrollPolicy="off" >
<mx:Image id="img" width="165" height="126"
maintainAspectRatio="true" source="{data.asset}" />
<mx:Label id="txt" text="{data.title}"/>
<mx:Button id="del" label="Delete"
click="outerDocument.deleteSnapShot(event)"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
the function to add the image is :
public function addImgToTile(bm:Bitmap):void{
var bm1:BitmapData = Bitmap(bm1_source.content).bitmapData;
var bitmap:Bitmap = new Bitmap(bm1);
var vo:MyVOBm = new
MyVOBm(bitmap,formatTime(inStream.time));
imgData.addItem(vo);
And the function to delete the image is:
public function deleteSnapShot(ev:Event):void{
imgData.removeItemAt(tileList.selectedIndex);
tx for your help

tx Amy for your help here i give you the code that generate
the image from streaming video
<mx:Canvas id="videoHBox" horizontalScrollPolicy="off"
verticalScrollPolicy="off" backgroundColor="#000000" width="456"
height="284" y="37">
</mx:Canvas>
<mx:Button x="464" y="188" label="In" width="48"
id="btnIn" click="addStart(inStream.time);" enabled="true"
visible="true" useHandCursor="true" buttonMode="true" toolTip="Add
Start Image (shotcut Home)"/>
<mx:Button id="Btn_add_action" x="464" y="221" label="Add
Screenshot" click="addImgToTile(bm1)" useHandCursor="true"
buttonMode="true" toolTip="Add Clip (shotcut insert)"/>
<mx:TileList id="tileList"
dataProvider="{imgData}"
columnCount="4"
columnWidth="222"
rowCount="2"
rowHeight="194"
themeColor="haloSilver"
verticalScrollPolicy="on"
x="0" y="415" width="100%">
<mx:itemRenderer>
<mx:Component>
<mx:VBox horizontalAlign="center"
verticalAlign="middle" width="222" height="194"
verticalScrollPolicy="off" horizontalScrollPolicy="off" >
<mx:Image id="img" width="165" height="126"
maintainAspectRatio="true" source="{data.asset}" />
<mx:Label id="txt" text="{data.title}"/>
<mx:Button id="del" label="Delete"
click="outerDocument.deleteSnapShot(event)"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
variable:
private var videoHolder:UIComponent = new UIComponent();
[Bindable] public var imgData:ArrayCollection = new
ArrayCollection();
init :
nc = new NetConnection();
nc.addEventListener(NetStatusEvent.NET_STATUS, netStatus);
nc.addEventListener(SecurityErrorEvent.SECURITY_ERROR,
netSecurityError);
nc.connect(Srv_Name);
videoHolder.setActualSize(Playing_Video_width,
Playing_Video_height);
Playing_Video = new Video(Playing_Video_width,
Playing_Video_height);
videoHolder.addChild(Playing_Video);
Playing_Video.x = 0;
Playing_Video.y = 0;
videoHBox.width = Playing_Video.width;
videoHBox.height = Playing_Video.height;
videoHBox.addChild(videoHolder);
functions:
public function addStart(timecode:Number):void{
var bm:Bitmap = copyBitmap(videoHBox as
UIComponent,timecode,"start");
bm1 = bm;
img_start_time.text = formatTime(timecode);
start_time = timecode;
public function addImgToTile(bm:Bitmap):void{
var bm1:BitmapData = Bitmap(bm1_source.content).bitmapData;
var bitmap:Bitmap = new Bitmap(bm1);
var vo:MyVOBm = new
MyVOBm(bitmap,formatTime(inStream.time));
imgData.addItem(vo);
private function
copyBitmap(source:UIComponent,timecode:Number,origin:String=''):Bitmap
try{
var bmd:BitmapData = new BitmapData( source.width,
source.height );
bmd.draw(source);
corectImg = false;
catch (err:Error){
this.setFocus();
inStream.seek(timecode);
if (origin == "start") setTimeout(addStart,750,timecode);
return new Bitmap(bmd);
public function deleteSnapShot(ev:Event):void{
imgData.list.removeItemAt(tileList.selectedIndex);
and the MyVOBm class is :
package components
import flash.display.Bitmap;
[Bindable]
public class MyVOBm
private var _asset:Bitmap;
private var _title:String;
public function MyVOBm(asset:Bitmap, title:String)
this.title=title;
this.asset=asset;
public function set title(title:String):void{
_title=title;
public function get title():String{
return _title;
public function set asset(asset:Bitmap):void{
_asset=asset;
public function get asset():Bitmap{
return _asset;

TileList Moving Items Up/Down

I cannot figure out how to move items in a TileList with
ActionScript. In the sample, when you run it, the moves work if the
item where the selected item will be moved is being displayed, then
it works as expected, but if you scroll down, and then move an item
up to a spot that is not currently displayed, then the item is not
selected, and sometimes the first item is deleted even though the 2
involved items are not near the first item.
<?xml version="1.0"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
creationComplete = "initData();" >
<mx:Script>
<![CDATA[
import mx.controls.Button;
import mx.collections.*;
private var listArray:Array = new Array;
[Bindable]
public var TileListdp:ArrayCollection;
private function initData():void {
var oItem:Object;
for (var i:int = 0; i < 20; i++) {
oItem = new Object;
oItem.label = "Label" + i;
oItem.data = i;
listArray.push(oItem);
TileListdp = new ArrayCollection(listArray);
private function onUpClick(event:Event):void {
var iCurSelect:int = tlList.selectedIndex;
if (iCurSelect != -1 && iCurSelect != 0) {
var oItem:Object = TileListdp[iCurSelect];
TileListdp.addItemAt(oItem, iCurSelect - 1);
TileListdp.removeItemAt(iCurSelect + 1);
tlList.callLater(setSelection, [iCurSelect - 1]);
private function onDownClick(event:Event):void {
var iCurSelect:int = tlList.selectedIndex;
if (iCurSelect != -1 && iCurSelect !=
TileListdp.length) {
var oItem:Object = TileListdp[iCurSelect];
TileListdp.removeItemAt(iCurSelect);
TileListdp.addItemAt(oItem, iCurSelect + 1);
tlList.callLater(setSelection, [iCurSelect + 1]);
private function setSelection(iSelect:int):void {
tlList.selectedIndex = iSelect;
tlList.scrollToIndex(iSelect);
]]>
</mx:Script>
<mx:TileList
id="tlList"
dataProvider="{TileListdp}"
maxColumns="2"
height="200"
width="200" >
<mx:itemRenderer>
<mx:Component>
<mx:VBox width="100%" height="100%">
<mx:Label width="100" text="{data.label}"/>
<mx:Label width="100" text="{data.data}"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
<mx:Button label="Move Up" click="onUpClick(event)" />
<mx:Button label="Move Down" click="onDownClick(event)"
/>
</mx:Application>

I cannot figure out how to move items in a TileList with
ActionScript. In the sample, when you run it, the moves work if the
item where the selected item will be moved is being displayed, then
it works as expected, but if you scroll down, and then move an item
up to a spot that is not currently displayed, then the item is not
selected, and sometimes the first item is deleted even though the 2
involved items are not near the first item.
<?xml version="1.0"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
creationComplete = "initData();" >
<mx:Script>
<![CDATA[
import mx.controls.Button;
import mx.collections.*;
private var listArray:Array = new Array;
[Bindable]
public var TileListdp:ArrayCollection;
private function initData():void {
var oItem:Object;
for (var i:int = 0; i < 20; i++) {
oItem = new Object;
oItem.label = "Label" + i;
oItem.data = i;
listArray.push(oItem);
TileListdp = new ArrayCollection(listArray);
private function onUpClick(event:Event):void {
var iCurSelect:int = tlList.selectedIndex;
if (iCurSelect != -1 && iCurSelect != 0) {
var oItem:Object = TileListdp[iCurSelect];
TileListdp.addItemAt(oItem, iCurSelect - 1);
TileListdp.removeItemAt(iCurSelect + 1);
tlList.callLater(setSelection, [iCurSelect - 1]);
private function onDownClick(event:Event):void {
var iCurSelect:int = tlList.selectedIndex;
if (iCurSelect != -1 && iCurSelect !=
TileListdp.length) {
var oItem:Object = TileListdp[iCurSelect];
TileListdp.removeItemAt(iCurSelect);
TileListdp.addItemAt(oItem, iCurSelect + 1);
tlList.callLater(setSelection, [iCurSelect + 1]);
private function setSelection(iSelect:int):void {
tlList.selectedIndex = iSelect;
tlList.scrollToIndex(iSelect);
]]>
</mx:Script>
<mx:TileList
id="tlList"
dataProvider="{TileListdp}"
maxColumns="2"
height="200"
width="200" >
<mx:itemRenderer>
<mx:Component>
<mx:VBox width="100%" height="100%">
<mx:Label width="100" text="{data.label}"/>
<mx:Label width="100" text="{data.data}"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
<mx:Button label="Move Up" click="onUpClick(event)" />
<mx:Button label="Move Down" click="onDownClick(event)"
/>
</mx:Application>

Pusing 2 complex components to one tileList

Hi
In a nutshell – I need a way to push 2 separate components
needing 2 separate item renderers into one tileList – letting
me set the width of the tileList to 100%.
I am wanting to use a tileList containing 2 separate
components and move the contents of the tileList onto a new line /
row when it reaches the browser / application width limit.
For example if a tileList consists of many
“circle” components (“circle.as”), and the
width of the tileList can only fit 10 of these components per row,
then the tileList should force / place the remainder amount of
components onto a new line – which it can!
E.g. if there are 15 circle components within the tileList,
the first level row should contain 10 circle components and the
bottom row should contain the 5 remaining etc….
This works fine simply by giving the width of the tileList a
percentage width of 100%
However, if you need to add more than one type of compoenet
to a tileList how can you keep this functionality of pushing
components onto a new row / level of a tileList???
This is my current problem!
E.g. lets now introduce a square component called
“Sqaure.as” and I want to add this square component to
the same tileList that my circle component is added to.
Additionally, my components are complex therefore needing
there own distinct item rendered!!! – Can I still add them to
the same component using two speerate item renderers???
Due to the fact that I neend 2 separate item renderers for my
components (circle and square) I decided to (as a work around) use
2 separate tileLists to display my components, and then push these
2 tileLists together aligning them horizontally so they look like
they are on the same row etc….
This works, however, I now loose the functionality of pushing
the components to a new row within the Tilelist(s) as I have to
manually work the needed widths of each tileList depending on the
amount of compontens within the tileLists - therefore this is not a
dynamic / percentage width.
Basically in a nutshell – I need a way to push 2 separate
components needing 2 separate item renderers into one tileList
– letting me set the width of the tileList to 100% and
allowing the functionality I desire.
if anyone could help me out on this one - it would be much
appreciated
Thanks,
Jon.

I suggets combining the two dataProviders. Then you have two
options. One, use a TileList and create an itemRenderer that
displays one of the two components, depending on the dataProvider
item. Two, use a Tile container and a Repeater, and create a custom
component that switches between the components, again depending on
the data in the dp item.
In either case, the item component would be very similar, but
Repeater does not have the as stringent requirements for its
components as a TileList + itemRenderer.
Tracy

TileList - Items have a Border even if I set the Border borderStyle="solid" borderThickness="0""

Hi,
I have a TileList
Here is a Snippet of code
 tileList = new TileList();
 tileList.percentWidth = 100;
 tileList.percentHeight = 100;
 tileList.id = "picsList";
 tileList.dataProvider = parentDocument.partListColl;
 tileList.itemRenderer = createItemRenderer();
 tileList.dragEnabled = true;
 tileList.dragMoveEnabled = false;
The ItemRenderer is:
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
 horizontalAlign="center"
 verticalAlign="middle" width="200" height="200" backgroundColor="0xFF0000" borderColor="0x00FF00" borderStyle="solid" borderThickness="0">
 <mx:Image id="image" width="100" height="100" source="assets/{data.Image}" visible="false"/>
 <mx:Label text="{data.Name}" width="100" textAlign="center" visible="false" />
</mx:Panel>
I still see a black border on all the items in the Tilelist.
I'm not sure where this is coming from. I would like to remove this border. Any help welcome.
I notice that if i create a Object Array with the same Image and Label. Then i dont have this issue of the border.
Regards

I gave width and height as zero,for the item renderer(line no.29).In that case too I got the scroll perfectly and the item renderer content too got fit automatically to the screen size.So i guess is it that there needs to be a set height and width for the item renderer (to be precise,for any of the parents of scroller)initially?
@Shongrunden
I got the issue fixed by setting width and height for itemrenderer.But wanted to know the reason behind it working correctly.

Image source in itemrenderer

imglist = arraycollection which contains names of images
which are coming from database
myimg = array of images
all images are stored in newfolder
how to use tilelist itemrenderer for images

Hi Jed,
Thanks for responding
That is the exact path assigned to the Source of the Image
control. However, it isn't exactly a trace of the Image.Source
property.
The code in question is attached
The alert shows the path I originally posted and shows that
the fileImgThumb.exists returns False.
As I mentioned, this works perfectly in Windows. There is
some code elsewhere in the app that creates the thumbnail. That
does work on the Mac as the thumbnail image is created and saved
where expected.
I am not sure what I might be doing wrong.
Thanks for your help,
Sid

ComboBox inside an ItemRenderer keeps going back to initial selectedIndex

Hi,
 Thanks for taking a minute to help me solve this problem. I have the following component, what I want to do, is to save the selectedIndex on the data.selectedIndice variable. I have no trouble with that. The variable saves the correct new selected Index number, but the problem is that, for instance, if the initial selectedIndex was 0, and the user selects the third item of the ComboBox, the ComboBox will go back to selecting the 0 index (the new one was 3) even though that the seleccion.selectedIndex shows that 3 is selected (that's why data.selectedIndice saves 3)
<mx:HorizontalList
 bottom="0"
 backgroundAlpha="0.0"
 id="catalogoOpciones"
 columnCount="3"
 height="80"
 hideEffect="{esconderse}"
 horizontalScrollPolicy="on"
 selectable="false"
 showEffect="{mostrarse}"
 width="100%">
 <mx:itemRenderer>
 <mx:Component>
 <mx:VBox height="100%" verticalGap="0" horizontalAlign="center" creationComplete="init()">
 <mx:Label id="titulo" text="{data.nombre}" textAlign="center" styleName="nombreOpcionDetallePlato" />
 <mx:ComboBox id="seleccion" dataProvider="{data.opciones}" labelField="label" labelFunction="funcionLabelComboBox" styleName="comboOpcionDetallePlato" change="changeHandler(event)" />
 <mx:Script>
 <![CDATA[
 import menucomponents.clases.OpcionesEvent;
 import mx.events.ListEvent;
 import mx.controls.Alert;
 public function init():void {
 public function changeHandler(event:ListEvent):void {
 Alert.show(seleccion.selectedIndex.toString); //this shows the correct new index selected data.selectedIndice = seleccion.selectedIndex; //at the beginning data.selectedIndice was 0, and when I change the selectedIdex, data.selectedIndice saves 1 } correct value, but the ComboBox shows on the screen that the selected item is the first one (index 0) and not the second one (index 1) AS IT'S SUPPOSED TO
 public function funcionLabelComboBox(item:Object):String {
 return item.label + ", $" + item.precio;
 ]]>
 </mx:Script>
 </mx:VBox>
 </mx:Component>
 </mx:itemRenderer>
 </mx:HorizontalList>
Thanks for the help
Sebastián Toro O

selectedIndice is public. What's funny is that if I don't use the selectedIndex="{data.selectedIndice}" and I comment the line:
data.selectedIndice = seleccion.selectedIndex
Then the CombBox works just fine. It doesn't go back to the initial selectedIndex. I´m going to solve this using Events and an external Array (Array.length = ComboBox.dataProvider.length) to save the selectedIndex, it's a very un-elegant solution but i think it's going to work. Also I might add, that if I send an Event and catch it outside the List, and try to modify the data.selectedIndice, from the particular ComboBox that I changed, the ComboBox still changes automatically it's selectedIndex.
Thanks for your help.
If some day you think how to solve this, I would really appreciate if you post it here.
Sebastián Toro O.

Flex spark dataGrid gridColumn itemrenderer binding bug

I hava a TextInput within mx DataGrid gridColumn itemrenderer and binding its text to {data.f1} ,
when I set DataGrid dataProvider column (0,0) to "value1" by actionsript code,
it will update "value1" to TextInput field.
But if I change to spark DataGrid, TextInput Text won't be changed.
Please see below two samples, when user click "set var" button, it set dataProvider column (0,0) to "value1",
sample1 is in mx comopent, it works fine and will update "value1" to TextInput Text.
sample2 is in spark component, it did not work.
anyone can help for spark component ?
many thanks.
*** sample1 (mx componet): ***
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="955" minHeight="600"
layout="absolute">
<mx:Button x="235" y="52" label="set var" click="setVar()"/>
<mx:DataGrid id="grid_1" dataProvider="{ia_row}" x="25" y="52">
<mx:columns>
 <mx:DataGridColumn dataField="f1" headerText="Column 1">
 <mx:itemRenderer>
 <fx:Component>
 <mx:TextInput text="{data.f1}" width="95%"/>
 </fx:Component>
 </mx:itemRenderer>
 </mx:DataGridColumn>
 <mx:DataGridColumn dataField="f2" headerText="Column 2"></mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
<fx:Script>
<![CDATA[
 import mx.collections.ArrayCollection;
 import mx.events.FlexEvent;
 [Bindable]
 private var ia_row:ArrayCollection = new ArrayCollection([
 {f1:"a1", f2:"b1"},
 {f1:"a2", f2:"b2"}
 private function setVar():void{
 var t_row:Object = ia_row.getItemAt(0);
 t_row.f1 = "value1";
 ia_row.setItemAt(t_row, 0);
]]>
</fx:Script>
</mx:Application>
*** sample2 (spark componet): ***
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="955" minHeight="600"
>
<s:Button x="267" y="94" label="set var" click="setVar()"/>
<s:DataGrid id="grid_1" x="55" y="94" width="204" height="139" dataProvider="{ia_row}">
<s:columns>
 <s:ArrayList>
 <s:GridColumn dataField="f1" headerText="Column 1" width="120">
 <s:itemRenderer>
 <fx:Component>
 <s:GridItemRenderer>
 <s:TextInput text="{data.f1}" width="95%"/>
 </s:GridItemRenderer>
 </fx:Component>
 </s:itemRenderer>
 </s:GridColumn>
 <s:GridColumn dataField="f2" headerText="Column 2"></s:GridColumn>
 </s:ArrayList>
</s:columns>
</s:DataGrid>
<fx:Script>
<![CDATA[
 import mx.collections.ArrayCollection;
 import mx.events.FlexEvent;
 [Bindable]
 private var ia_row:ArrayCollection = new ArrayCollection([
 {f1:"a1", f2:"b1"},
 {f1:"a2", f2:"b2"}
 private function setVar():void{
 var t_row:Object = ia_row.getItemAt(0);
 t_row.f1 = "value1";
 ia_row.setItemAt(t_row, 0);
]]>
</fx:Script>
</s:Application>

sir, I think it does not send CHANGE event to dataGrid, so my suggestion is following:
private function setVar():void{
 var t_row:Object = ia_row.getItemAt(0);
 Alert.show(t_row.f1);
 t_row.f1 = "value1";
 ia_row.setItemAt(t_row, 0);
 ia_row.refresh();//it is used to dispatch Event if dataprovider was changed.

ItemRenderer overides the DataGrid styles

Hi,
I have a CSS file where I have defined the styles for DataGrid like following:
DataGrid
 selection-color: #243E4F;
 text-selected-color: #FFFFFF;
 alternating-item-colors: #DCE3E8, #FFFFFF;
I have a Datagrid in my mxml component page. I use an ItemRenderer for the html text in one of my datagrid column.
<mx:DataGridColumn dataField="AccountName" headerText="Name" width="122">
 <mx:itemRenderer>
 <mx:Component>
 <mx:Text selectable="true" htmlText="{data.AccountName}" width="100%"/>
 </mx:Component>
 </mx:itemRenderer>
</mx:DataGridColumn>
But now when I select any of the DataGridColumn 'AccountName', the font color (ie. text-selected-color ) in this cell turns black.
Please help me to resolve this issue?
Thanks in advance,
Micheal

Hi,
Thank you for your quick response.
My DataGrid is inside a HBox.
//my component mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" >
 <mx:Script>
 <![CDATA[
 import mx.controls.Alert;
 import mx.collections.ArrayCollection;
 [Bindable]
 public var cashData:ArrayCollection = new ArrayCollection();
 private function formatBalance(item:Object, column:DataGridColumn):String
 return item.Balance.currencyCode+''+item.Balance.amount;
 ]]>
 </mx:Script>
 
 <mx:DataGrid width="100%" height="100%" id="gridID" dataProvider="{cashData}" showHeaders="false" verticalGridLines="true">
 <mx:columns>
 <mx:DataGridColumn dataField="AccountName" headerText="Name" width="122">
 <mx:itemRenderer>
 <mx:Component>
 <mx:Text selectable="true" htmlText="{data.AccountName}" width="100%"/>
 </mx:Component>
 </mx:itemRenderer>
 </mx:DataGridColumn>
 <mx:DataGridColumn dataField="Balance" headerText="Balance" labelFunction="formatBalance" width="122" textAlign="right"/>
 </mx:columns>
 </mx:DataGrid>
</mx:VBox>
Actually I set the dataprovider from PureMVC mediator. You can see that column 'AccountName' is an 'htmltext'. This value will be a link not a editable text.
ie. <a href= "someurl.do?x=20106650&y=10232371">details</a> Intranet Card
Thanks,
Michael

Dynamisch width of tileList Itemrenderer

Similar Messages

Maybe you are looking for