?
Solved

Using Lists to filter a datagrid - and another list

Posted on 2009-04-01
10
Medium Priority
?
875 Views
Last Modified: 2012-05-06
Hi,

I'm just starting to experiment with Flex, and I think it's going to hold many uses for me.

I want to have two lists act as filters on a datagrid, with the added complication of having the selections from the lists also filter each other.  (So, for instance, a selection from the first list filters both the datagrid and the available options in the second list).

I've created xml datasets which are called in using the HTTPservice tag and display fine, now I need to work out how to make the selections do what I want.  Also, the lists are have multiple select turned on.

Is data binding the correct method to do this?  I think I might need to import the events.OptionSelectEvent class and use that?  

I guess i'm just trying to make sure i'm going down the right roads here, so rather than actual code which I love working out, can anyone confirm what's the best method to achieve this?
0
Comment
Question by:RSA_KM_TEAM
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 2
10 Comments
 
LVL 37

Accepted Solution

by:
zzynx earned 1000 total points
ID: 24050271
I made a small standalone app that demonstrates how I would make it work for the list selection influencing the data shown in the datagrid.
Select one or more items in the list and see how the datagrid changes accordingly.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				layout="vertical"
				verticalAlign="middle"
				backgroundColor="white">
 
	<mx:Script>
	<![CDATA[
		import mx.controls.Alert;
		import mx.collections.ArrayCollection;
 
		private var _allData:ArrayCollection = new ArrayCollection([
			"Jack's Item", "Jill's Item", "John's Item", "Peter's Item", "Sophia's Item", "Anonymous Item"
		]);
		[Bindable]
		private var _data:ArrayCollection = new ArrayCollection();
 
		[Bindable]
		public var array:ArrayCollection = new ArrayCollection([
			'Jack', 'Jill', 'John', 'Peter', 'Sophia'
		]);
 
		private function init():void {
			myList.dataProvider = array;
		}
		
		private function onListChange():void {
			var selected:Array = myList.selectedItems;
			_data.removeAll();
			
			for each (var user:String in selected) {
				for each (var item:String in _allData) {
					if (item.search(user)!=-1)
						_data.addItem(item);
				}
			}
		}
 
	]]>
	</mx:Script>
 
	<mx:List id="myList" initialize="init();" change="onListChange()" allowMultipleSelection="true"/>
	<mx:DataGrid id="myDg" dataProvider="{_data}" >
		<mx:columns>
			<mx:DataGridColumn dataField="toString" headerText="Item"/>
		</mx:columns>
	</mx:DataGrid>
	
</mx:Application>

Open in new window

0
 

Author Comment

by:RSA_KM_TEAM
ID: 24050785
Hey thanks for coming back on this.  

I've been working on this most of the day, and I've got to the point where I have two list controls, both of which can filter a datagrid below.   (I've ignored multiple selections for now - my colleague swears it would never be needed!).

Now, the bit I can't get to work is to have the values passed from BOTH lists filter the datagrid.  I'm using return item.myVariable = selectedItem essentially, following  a myDatagrid.filterFunction call and then refresh.

I've been searching high and low but I can't seem to understand how to achieve this - any suggestions?
0
 
LVL 37

Assisted Solution

by:zzynx
zzynx earned 1000 total points
ID: 24050902
>> the bit I can't get to work is to have the values passed from BOTH lists filter the datagrid.
If for each list you react on a selection change (as in my example) and then capture the selected item of both lists, that should work.

>> I'm using return item.myVariable = selectedItem essentially, following  a myDatagrid.filterFunction call and then refresh.
Sounds OK.
Could I see some of your code?
0
Get MongoDB database support online, now!

At Percona’s web store you can order your MongoDB database support needs in minutes. No hassles, no fuss, just pick and click. Pay online with a credit card. Handle your MongoDB database support now!

 
LVL 37

Assisted Solution

by:zzynx
zzynx earned 1000 total points
ID: 24051030
Here's an update of my little app working with two lists.
Don't look at the layout.
And yes I don't use a filterfunction, but the idea is the same.
Select items in both lists and see the datagrid content change.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				layout="vertical"
				verticalAlign="middle"
				backgroundColor="white">
 
	<mx:Script>
	<![CDATA[
		import mx.controls.Alert;
		import mx.collections.ArrayCollection;
 
		private var _allData:ArrayCollection = new ArrayCollection([
			"Jack's Item", "Jill's Item", "John's Item", "Peter's Item", "Sophia's Item", "Anonymous Item"
		]);
		[Bindable]
		private var _data:ArrayCollection = new ArrayCollection();
 
		[Bindable]
		public var array:ArrayCollection = new ArrayCollection([
			'Jack', 'Jill', 'John', 'Peter', 'Sophia'
		]);
 
		[Bindable]
		public var array2:ArrayCollection = new ArrayCollection([
			'Jack', 'Jill', 'John', 'Peter', 'Sophia'
		]);
 
		private function onListChange():void {
			var selected:Array = myList.selectedItems;
			var selected2:Array = myList2.selectedItems;
			_data.removeAll();
			
			for each (var user:String in selected) {
				for each (var item:String in _allData) {
					if (item.search(user)!=-1)
						_data.addItem(item);
				}
			}
 
			for each (var user:String in selected2) {
				for each (var item:String in _allData) {
					if (item.search(user)!=-1 && !_data.contains(item))
						_data.addItem(item);
				}
			}
		}
 
	]]>
	</mx:Script>
	
	<mx:HBox width="100%" height="100%">
		<mx:List id="myList" dataProvider="{array}" change="onListChange()" allowMultipleSelection="true"/>
		<mx:List id="myList2" dataProvider="{array2}" change="onListChange()" allowMultipleSelection="true"/>
	</mx:HBox>
	<mx:DataGrid id="myDg" dataProvider="{_data}" >
		<mx:columns>
			<mx:DataGridColumn dataField="toString" headerText="Item"/>
		</mx:columns>
	</mx:DataGrid>
	
</mx:Application>

Open in new window

0
 
LVL 37

Expert Comment

by:zzynx
ID: 24051044
Going offline now. Success.
0
 

Assisted Solution

by:RSA_KM_TEAM
RSA_KM_TEAM earned 0 total points
ID: 24051378
Hi,

Thanks again for coming back.  I think I've achieved what I was hoping to thus far - code copied in below.  

I've attached the XML files below as part of the code so you can see how it links in so far...



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
 
    <mx:Script>
        <![CDATA[
            import mx.collections.*;
            import mx.events.ListEvent;
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            import mx.controls.Alert;
            import flash.events.Event;
            import mx.events.ItemClickEvent;
            
            [Bindable]public var lobsArray:ArrayCollection;
            [Bindable]public var typesArray:ArrayCollection;
			[Bindable]public var documentsArray:ArrayCollection;
			private var selectedLob:String;
			private var selectedType:String;
					
			private function init():void {
				lobsXML.send();
				typesXML.send();
				documentsXML.send();
			}
			
			private function httpResultHandler(event:ResultEvent):void {
				typesArray = event.result.types.type;
			}
			
			private function httpResultHandler2(event:ResultEvent):void {
				lobsArray = event.result.lobs.lob;
			}
				
			private function httpResultHandler3(event:ResultEvent):void {
				documentsArray = event.result.dataset.document;
			}
			
			private function httpFaultHandler(event:FaultEvent):void {
			Alert.show("There was a problem","Error");
			}
 
			public function filterLob(event:ListEvent):void {
				selectedLob = lobSelectList.selectedItem.name;
				documentsArray.filterFunction=lobFilter;
				documentsArray.refresh();
			}
			
			public function filterType(event:ListEvent):void {
				selectedType = typeSelectList.selectedItem.name;
				documentsArray.filterFunction=typeFilter;
				documentsArray.refresh();
			}	
				
			public function lobFilter(item:Object):Boolean {
				
				if (selectedType == null) {
					return item.policyClass == selectedLob
				} else {
				return item.policyClass == selectedLob && item.docType == selectedType;
				}
			}
			
			public function typeFilter(item:Object):Boolean {
				if (selectedLob == null) {
					return item.docType == selectedType
				} else {
				return item.docType == selectedType && item.policyClass == selectedLob;
				}
			}
 
        ]]>
    </mx:Script>
 
	<mx:HTTPService id="typesXML" url="assets/types.xml" fault="httpFaultHandler(event)" result="httpResultHandler(event)" />
	<mx:HTTPService id="lobsXML" url="assets/lobs.xml" fault="httpFaultHandler(event)" result="httpResultHandler2(event)" /> 
	<mx:HTTPService id="documentsXML" url="assets/documents.xml" fault="httpFaultHandler(event)" result="httpResultHandler3(event)" />
 
    <mx:Panel title="Johns Dividing Boxes Example" width="800" height="600" 
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
 
        <mx:VDividedBox width="100%" height="90%">
 
<!-- Upper Canvas Start -->
            <mx:Canvas label="Higher Canvas" width="100%" height="100%">
	            
	            <mx:HDividedBox width="100%" height="100%">
				
				<mx:Panel id="lobSelectPanel" width="40%" height="100%">
					<mx:Label text="Please Select a Line of Business" />
					<mx:List id="lobSelectList" dataProvider="{lobsArray}" width="100%" change="filterLob(event)"
							selectable="true" allowMultipleSelection="false" borderStyle="none" labelField="name" />
				</mx:Panel>
				
				<mx:Panel id="typeSelectPanel" width="40%" height="100%">
					<mx:Label text="Please Select a type of document" />
					<mx:List id="typeSelectList" dataProvider="{typesArray}" width="100%" 
						change="filterType(event)" allowMultipleSelection="false" borderStyle="none" labelField="name" />
				</mx:Panel>
	            
	        	</mx:HDividedBox>
            </mx:Canvas>
<!-- Upper Canvas Ends -->
            
<!-- Lower Canvas Starts -->
            <mx:Canvas label="Lower Canvas" width="100%" height="100%" backgroundColor="#eff1ec">
            	<mx:Panel id="documentDisplayPanel" width="100%" height="100%">
            	    <mx:DataGrid id="documentDisplayList" width="100%" height="100%" dataProvider="{documentsArray}" >
	                	<mx:columns>
	                		<mx:DataGridColumn dataField="description" headerText="Title" />
	                		<mx:DataGridColumn dataField="policyClass" headerText="Policy Class" />
	                		<mx:DataGridColumn dataField="docType" headerText="File Type" />
	                		<mx:DataGridColumn headerText="Doc Link" itemRenderer="urlRenderer" />
	                	</mx:columns>
	                </mx:DataGrid>
                </mx:Panel>
            </mx:Canvas>
<!-- Lower Canvas Ends -->
 
        </mx:VDividedBox>
 
	<mx:Text />
 
    </mx:Panel>
 
</mx:Application>
 
<!-----  types.xml  ----->
 
<types>
	<type>
		<name>Policy Wording</name>
		<id>pol</id>
	</type>
	<type>
		<name>Endorsement</name>
		<id>end</id>
	</type>
	<type>
		<name>Risk Management Guide</name>
		<id>rmg</id>
	</type>
	<type>
		<name>Risk Appetite</name>
		<id>ris</id>
	</type>
	<type>
		<name>UW Statement</name>
		<id>uws</id>
	</type>
	<type>
		<name>Policy Summary</name>
		<id>sum</id>
	</type>
	<type>
		<name>Pricing Approach</name>
		<id>pri</id>
	</type>
	<type>
		<name>Other</name>
		<id>oth</id>
	</type>
</types>
 
<!------------ Line of business (lobs) xml ------>
 
<lobs>
	<lob>
		<name>Property</name>
		<id>pr</id>
	</lob>
	<lob>
		<name>Liability</name>
		<id>li</id>
	</lob>
	<lob>
		<name>Motor</name>
		<id>mo</id>
	</lob>
	<lob>
		<name>Engineering</name>
		<id>en</id>
	</lob>
	<lob>
		<name>Motor Fleet</name>
		<id>mf</id>
	</lob>
	<lob>
		<name>ProFin</name>
		<id>pf</id>
	</lob>
	<lob>
		<name>Small Business</name>
		<id>sb</id>
	</lob>
	<lob>
		<name>Motor Trade</name>
		<id>mt</id>
	</lob>
</lobs>
 
 
<!------------ documents.xml (for datagrid) ------>
 
<dataset>
	<document>
		<docType>Aide Memoire</docType>
		<alpha>A</alpha>
		<status>Live</status>
		<policyClass>Liability</policyClass>
		<system>UKRIS</system>
		<description>Abuse Aide Memoire</description>
		<referenceNo>na</referenceNo>
		<releaseDate>2005-08</releaseDate>
		<replacedDate/>
		<replacementRef/>
		<locallyHeld>No</locallyHeld>
		<contact/>
		<docURL>http://kite.uk.rsa-ins.com/prod/kite/techcontainer.nsf/luresources/documentlibrary_Aide Memoire/$file/abuseaidememoire.pdf</docURL>
		<imageURL/>
	</document>
	<document>
		<docType>Aide Memoire</docType>
		<alpha>A</alpha>
		<status>Live</status>
		<policyClass>Liability</policyClass>
		<system>UKRIS</system>
		<description>Abridged Report Aide Memoire</description>
		<referenceNo>na</referenceNo>
		<releaseDate>2005-07</releaseDate>
		<replacedDate/>
		<replacementRef/>
		<locallyHeld>No</locallyHeld>
		<contact/>
		<docURL>http://kite.uk.rsa-ins.com/prod/kite/techcontainer.nsf/luresources/documentlibrary_Aide Memoire/$file/abridgedreportaidememoire.pdf</docURL>
		<imageURL/>
	</document>
	<document>
		<docType>Aide Memoire</docType>
		<alpha>A</alpha>
		<status>Live</status>
		<policyClass>Liability</policyClass>
		<system>UKRIS</system>
		<description>Asbestos Aide Memoire</description>
		<referenceNo>na</referenceNo>
		<releaseDate>2004-12</releaseDate>
		<replacedDate/>
		<replacementRef/>
		<locallyHeld>No</locallyHeld>
		<contact/>
		<docURL>http://kite.uk.rsa-ins.com/prod/kite/techcontainer.nsf/luresources/documentlibrary_Aide Memoire/$file/asbbulletinaidememoirejune04.pdf</docURL>
		<imageURL/>
	</document>
	<document>
		<docType>Aide Memoire</docType>
		<alpha>E</alpha>
		<status>Live</status>
		<policyClass>Engineering</policyClass>
		<system>UKRIS</system>
		<description>Engineering Computer Survey Aide Memoire</description>
		<referenceNo>na</referenceNo>
		<releaseDate>2005-04</releaseDate>
		<replacedDate/>
		<replacementRef/>
		<locallyHeld>No</locallyHeld>
		<contact/>
		<docURL>http://kite.uk.rsa-ins.com/prod/kite/techcontainer.nsf/luresources/documentlibrary_Aide Memoire/$file/EngineeringCompSurveyAideMemoire.pdf</docURL>
		<imageURL/>
	</document>
</dataset>

Open in new window

0
 
LVL 37

Expert Comment

by:zzynx
ID: 24057368
>> I think I've achieved what I was hoping to thus far
Then this Q can be closed I guess.
0
 
LVL 37

Expert Comment

by:zzynx
ID: 24095848
And none of my comments helped you any cent of course!
0

Featured Post

NFR key for Veeam Agent for Linux

Veeam is happy to provide a free NFR license for one year.  It allows for the non‑production use and valid for five workstations and two servers. Veeam Agent for Linux is a simple backup tool for your Linux installations, both on‑premises and in the public cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

First things first - Preparation We need all the part for this install and it's much nicer to have them all on hand when you need them so here's what's required. Download Eclipse 3.5 32 bit (I like the Classic flavour) from here. (http://www.e…
In today's business world, data is more important than ever for informing marketing campaigns. Accessing and using data, however, may not come naturally to some creative marketing professionals. Here are four tips for adapting to wield data for insi…
In this brief tutorial Pawel from AdRem Software explains how you can quickly find out which services are running on your network, or what are the IP addresses of servers responsible for each service. Software used is freeware NetCrunch Tools (https…
Sometimes it takes a new vantage point, apart from our everyday security practices, to truly see our Active Directory (AD) vulnerabilities. We get used to implementing the same techniques and checking the same areas for a breach. This pattern can re…
Suggested Courses
Course of the Month11 days, 16 hours left to enroll

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question