Refresh tileList on DataChange

I happened to come across an issue with tileLists that use a custom itemRenderer.

The problem is that when I change the data provider, the items in the tileList do not redraw appropriately.

After some time spent in digging into this, I found out that for some reason the dataChange event in the itemrenderer is not triggered automatically when the data provider changes.

Note:DataChange event is triggered internally for dataGrids which are bound to a dataProvider, so we wont even notice it,but that is not the case for a tileList.

The event is triggered only when we call tileList.invalidateList().

So here is what I did. Call tileList.invalidateList() every time I change the dataProvider and handle the dataChange event in the itemRenderer and reset the UIControl's properties whatever it may be.

Here is what the view does.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
private var dataP:ArrayCollection = new ArrayCollection(
[{isMarried:true, isAnimal:true,name:"Montgomery"},
{isMarried:false, isAnimal:true,name:"Juneau"},
{isMarried:true, isAnimal:false,name:"Little Rock"},
{isMarried:true,isAnimal:true,name:"Ricky Martin"}]);

private function changeFirstElement():void {
dataP.getItemAt(0).name = "changed";
tileList.invalidateList();
}

]]>
</mx:Script>

<mx:TileList itemRenderer="testItemRenderer" dataProvider="{dataP}"
id="tileList"/>
<mx:Button label="change first element" click="changeFirstElement();"/>
</mx:Application>


And here is what the itemRenderere does.

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" dataChange="handleDataChange()"
creationComplete="handleCreationComplete()">
<mx:Script>
<![CDATA[
[Bindable]
private var theName:String=new String();

private function handleCreationComplete():void {
if (data != null && data.hasOwnProperty("name")) {
theName =data.name;
}
}
private function handleDataChange():void {
if (data != null && data.hasOwnProperty("name")) {
if (theLabel) {
theName = data.name;
}
}
}
]]>
</mx:Script>
<mx:Label text="{theName}" id="theLabel"/>
</mx:Canvas>


Hope it helps!