Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 883
  • Last Modified:

Using Lists to filter a datagrid - and another list

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
RSA_KM_TEAM
Asked:
RSA_KM_TEAM
  • 6
  • 2
4 Solutions
 
zzynxSoftware engineerCommented:
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
 
RSA_KM_TEAMAuthor Commented:
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
 
zzynxSoftware engineerCommented:
>> 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
Build your data science skills into a career

Are you ready to take your data science career to the next step, or break into data science? With Springboard’s Data Science Career Track, you’ll master data science topics, have personalized career guidance, weekly calls with a data science expert, and a job guarantee.

 
zzynxSoftware engineerCommented:
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
 
zzynxSoftware engineerCommented:
Going offline now. Success.
0
 
RSA_KM_TEAMAuthor Commented:
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
 
zzynxSoftware engineerCommented:
>> I think I've achieved what I was hoping to thus far
Then this Q can be closed I guess.
0
 
zzynxSoftware engineerCommented:
And none of my comments helped you any cent of course!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The Lifecycle Approach to Managing Security Policy

Managing application connectivity and security policies can be achieved more effectively when following a framework that automates repeatable processes and ensures that the right activities are performed in the right order.

  • 6
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now