Problem
I have a List control in a mobile Flex application that uses a custom item renderer. How can I disable a specific item in the List so that the user cannot select it?
Solution
Use the data property inside your custom item renderer code to inspect the current set of data displayed by the renderer and choose to enable or disable the renderer.
Detailed explanation
Item renderers that implement the mx.core.IDataRenderer interface provide getters and setters for the data property. By overriding the set data(value:Object):void method you can easily check the data passed to the concrete item renderer instance and decide if you need to disable or enable the item renderer.
Here is an example MXML application file that displays a List control with some products. The ProductRenderer MXML file takes care of displaying the items in the list. Inside the set data(value:Object):void method the current item's availability property is checked and the renderer gets enabled or disabled.
It's important to use the set data(value:Object):void method instead of using e.g. the creationComplete Event of the item renderer. This is because item renderers get recycled during their lvecycle so they will get passed new data items passed to them by the List they belong to (e.g. during scrolling and every time the dataProvider changes)
Main Application MXML file
<?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"
creationComplete="creationCompleteHandler(event)"
>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
[Bindable]
private var list:ArrayCollection;
private function creationCompleteHandler(event:FlexEvent):void
{
// just some data for the list
list = new ArrayCollection();
list.addItem({name: "Nerdball", price: 4.2, availability: 5});
list.addItem({name: "Geek-O-Mat", price: 12.99, availability: 0});
list.addItem({name: "Coder's Mug", price: 3.8, availability: 4});
list.addItem({name: "Flex Wax", price: 6.75, availability: 7});
list.addItem({name: "Spark components", price: 42, availability: 1337});
list.addItem({name: "Unhandled IOErrors", price: 0.99, availability: 0});
list.addItem({name: "undefined values", price: 0.99, availability: 3});
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout paddingLeft="4" paddingTop="4" gap="4"/>
</s:layout>
<s:Label text="Today's Recommendations:" fontWeight="bold" fontSize="12"/>
<s:List itemRenderer="ProductRenderer"
width="300" height="200"
dataProvider="{list}"
/>
</s:Application>
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true"
height="40"
>
<fx:Script>
<![CDATA[
// set data gets called whenever the item renderer gets
// new data to display (e.g. when the data changed)
override public function set data(value:Object):void
{
super.data = value;
if (value)
{
// e.g. check if a certain property in data has a certain value
// in this example, we choose to disable the item renderer if
// the current data's availability property is 0
if (value.availability == 0)
{
// disable the item renderer, hide the
// button and display a "sorry" text
this.enabled = false;
btnAddToCart.visible = false;
lblInfo.text = "Sorry, out of stock!";
}
else
{
// make the renderer endabled again, show the
// butto and display the price
this.enabled = true;
btnAddToCart.visible = true;
lblInfo.text = "Price: " + data.price;
}
}
}
]]>
</fx:Script>
<s:Label text="{data.name}" fontWeight="bold" left="2" top="4"/>
<s:Label id="lblInfo" left="4" bottom="4"/>
<s:Button id="btnAddToCart" label="Add to cart" right="2" top="2" bottom="2"/>
<s:Line bottom="0" left="2" right="2">
<s:stroke>
<s:SolidColorStroke color="0xcecece"/>
</s:stroke>
</s:Line>
</s:ItemRenderer>
+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
