Multiple views of data per dataprovider

Apr 6, 2009

Multiple views of data per dataprovider

Categories: actionscript

Written By: sebi

Have you ever have troubles with filtering or sorting an ArrayCollection into two different controls? I wanted to keep the central data source for the different views, it has many advantages. If a new item appears in your original ArrayCollection, it will added to all views, for example.

If you show the same ArrayCollection in two different DataGrids, as you sort one of them, the other will be sorted too, as they share the same data provider. But if you create different views, you can show different part of the same data, kept in sync with the rest of the application.

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication 
	xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="horizontal"
	applicationComplete="init()">
	<mx:Script>
		<![CDATA[
			import mx.collections.ListCollectionView;
			import mx.collections.ArrayCollection;
 
			protected function init():void
			{
				for( var i:int = 0; i < 21; i ++ )
				{
					ac.addItem( { data:i, label: "item " + i.toString() } )
				}
			}
 
			protected function addItem():void
			{
				var nextIndex:int = ac.length
				ac.addItem( { data:nextIndex, label: "item " + nextIndex.toString() } )
			}
 
			protected function filterText( item:Object ):Boolean
			{
				return item.label.indexOf( filterTextInput.text ) > -1
			}
 
		]]>
	</mx:Script>
	<mx:ArrayCollection id="ac" />
	<mx:ListCollectionView id="lcv1" list="{ac}" filterFunction="{filterText}" />
	<mx:ListCollectionView id="lcv2" list="{ac}" />
	<mx:VBox>
		<mx:HBox>
			<mx:DataGrid dataProvider="{lcv1}" />
			<mx:DataGrid dataProvider="{lcv2}" />			
		</mx:HBox>	
		<mx:HBox>
			<mx:TextInput id="filterTextInput" change="lcv1.refresh()" />
			<mx:Button click="addItem()" label="Add" />
		</mx:HBox>		
	</mx:VBox>
</mx:WindowedApplication>

credits:

Re: Multiple “views” of data per dataprovider? @ nabble.com

http://troygilbert.com/