Note: This article is about programming tip for Adobe Flex 😉

ItemRenderer is a great feature to render List or DataGroup items. All items wil be rendered and if you want to remove an item from list, then you have to delete it. But what if you don’t want to remove the item from the list but you don’t want it to be displayed?

I couldn’t find any direct way to do this. I tried to Google this but found nothing related so I decided to make some experiments. After several times failing, I found out that you can ‘hide’ an item on DataGroup/List from being rendered by using ItemRendererFunction and an empty Item Renderer (renderer with height=0).

Click more if you want to read the details on how I did it. As usual, you can see the demo and download the source code below 😉

Prepare two different item renderers

In addition to the normal itemRenderer (the one which renders your data), prepare one empty item renderer which will be used to render the hidden items. An example of empty Item renderer HiddenItemRenderer :

<?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/halo"
	height="0">
</s:ItemRenderer>

itemRendererFunction

Create an itemrenderer function and set it to the attribute itemRendererFunction on DataGroup/List. To hide an item, ItemRendererFunction should return the empty item renderer (an item renderer with nothing inside) while to show the item, the function should return the normal item renderer. Example:

protected function HideOddRendererFunction(item:Object):IFactory
{
	var thenumber:int = item as int;
	var classFactory:ClassFactory;
	if ((thenumber % 2) == 0)
	{
		// show even number
		classFactory = new ClassFactory(NormalItemRenderer);
	}
	else
	{
		// hide even number
		classFactory = new ClassFactory(HiddenItemRenderer);
		//Note: you can also do it like this: classFactory = new ClassFactory(ItemRenderer);
	}

	return classFactory;
}

Then you’re done!

Warning

This method has some issues:

• Unfortunately, if your list allows multiple selection, user still can select the ‘hidden’ item if they use Shift-Click. You can’t prevent this 🙁
• The ‘hidden’ Item Renderer will cause problem on module wheel scroll on List. Mouse wheel will got stuck on the ‘hidden’ item.
• Setting the ‘hidden’ item renderer height to 1 will solve the mouse wheel problem but it means the user might be able to hilight and select the item

Feel free to comment or let me know if you know better solutions 😉

DEMO

SOURCE CODE