Solved

Using Lists to filter a datagrid - and another list

Posted on 2009-04-01
10
869 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
  • 6
  • 2
10 Comments
 
LVL 37

Accepted Solution

by:
zzynx earned 250 total points
Comment Utility
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
Comment Utility
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 250 total points
Comment Utility
>> 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
 
LVL 37

Assisted Solution

by:zzynx
zzynx earned 250 total points
Comment Utility
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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 37

Expert Comment

by:zzynx
Comment Utility
Going offline now. Success.
0
 

Assisted Solution

by:RSA_KM_TEAM
RSA_KM_TEAM earned 0 total points
Comment Utility
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
Comment Utility
>> 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
Comment Utility
And none of my comments helped you any cent of course!
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

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…
A procedure for exporting installed hotfix details of remote computers using powershell
Sending a Secure fax is easy with eFax Corporate (http://www.enterprise.efax.com). First, Just open a new email message.  In the To field, type your recipient's fax number @efaxsend.com. You can even send a secure international fax — just include t…
Internet Business Fax to Email Made Easy - With eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…

763 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

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now