?
Solved

flex 3 app using datagrid filtering

Posted on 2009-04-30
3
Medium Priority
?
806 Views
Last Modified: 2013-12-24
Ok, I have the following script that filters data in a flex datagrid on 1 column of data.  Yet, I have multiple columns I want to filter on.  I'd like to create a combo box that houses the different columns (so both name and city).  Then the user can choose the column, then in the textfield type in data to filter.  Any idea how to add that in?
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="initData()">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
           [Bindable]
           private var dataList:ArrayCollection ; 
           
           private function initData():void{
            dataList= new ArrayCollection([
            {name:"Atlantic City Medical Center-City Division", city:"Atlantic City"},
            {name:"Atlantic City Medical Center-Mainland Division", city:"Pomona "},
            {name:"Barnert Hospital", city:"Paterson"},
            {name:"Bayonne Medical Center", city:"Bayonne"},
            {name:"Bayshore Community Hospital", city:"Holmdel"},
            {name:"Bergen Regional Medical Center. L.P.", city:"Paramus"},
            {name:"Burdette Tomlin Memorial Hospital", city:"Cape May"},
            {name:"Capital Health System - Fuld Campus", city:"Trenton"},
            {name:"Capital Health System - Mercer Campus", city:"Trenton"},
            {name:"CentraState Healthcare System", city:"Freehold"},
            {name:"Chilton Memorial Hospital", city:"Pompton Plains"},
            {name:"Christ Hospital", city:"Jersey City"},
            {name:"Clara Maass Medical Center", city:"Belleville"},
            {name:"Columbus Hospital", city:"Newark"},
            {name:"Community Medical Center", city:"Toms River"},
            {name:"East Orange General Hospital", city:"East Orange"},
            {name:"Englewood Hospital and Medical Center", city:"Englewood"},
            {name:"Hackensack University Medical Center", city:"Hackensack"},
            {name:"Hackettstown Community Hospital", city:"Hackettstown"},
            {name:"Holy Name Hospital", city:"Teaneck"},
            {name:"Hospital Center at Orange", city:"Orange"},
            {name:"Hunterdon Medical Center", city:"Flemington"},
            {name:"Irvington General Hospital", city:"Irvington"},
            {name:"Jersey Shore University Medical Center", city:"Neptune"},
            {name:"JFK Medical Center", city:"Edison"},
            {name:"Kennedy Memorial Hospitals/UMC Cherry Hill", city:"Cherry Hill"},
            {name:"Kennedy Memorial Hospitals/UMC Stratford", city:"Stratford"},
            {name:"Kennedy Memorial Hospitals/UMC Washington Twp", city:"Turnersville"},
            {name:"Kessler Memorial Hospital", city:"Hammonton"},
            {name:"Kimball Medical Center", city:"Lakewood"},
            {name:"LibertyHealth-Greenville Hospital Campus", city:"Jersey City"},
            {name:"LibertyHealth-Jersey City Medical Center Campus", city:"Jersey City"},
            {name:"LibertyHealth-Meadowlands Hospital Campus", city:"Secaucus"},
            {name:"Lourdes Medical Center of Burlington County", city:"Willingboro"},
            {name:"Monmouth Medical Center", city:"Long Branch"},
            {name:"MONOC", city:"Eatontown"},
            {name:"Morristown Memorial Hospital", city:"Morristown"},
            {name:"Muhlenberg Regional Medical Center", city:"Plainfield"},
            {name:"Newark Beth Israel Medical Center", city:"Newark"},
            {name:"Newton Memorial Hospital", city:"Newton"},
            {name:"Ocean Medical Center", city:"Brick"},
            {name:"Our Lady of Lourdes Medical Center", city:"Camden"},
            {name:"Overlook Hospital", city:"Summit"},
            {name:"Palisades Medical Center-New York Presbyterian ", city:"North Bergen"},
            {name:"Pascack Valley Hospital ", city:"Westwood"},
            {name:"PBI Regional Medical Center", city:"Passaic"},
            {name:"Raritan Bay Medical Center - Old Bridge", city:"Old Bridge"},
            {name:"Raritan Bay Medical Center - Perth Amboy", city:"Perth Amboy"},
            {name:"Riverview Medical Center", city:"Red Bank"},
            {name:"Robert Wood Johnson Univ Hospital", city:"New Brunswick"},
            {name:"Robert Wood Johnson Univ Hospital at Hamilton", city:"Hamilton"},
            {name:"Robert Wood Johnson Univ Hospital at Rahway", city:"Rahway"},
            {name:"Saint Barnabas Medical Center", city:"Livingston"},
            {name:"Saint Clares Hospital/Boonton Township", city:"Boonton"},
            {name:"Saint Clares Hospital/Denville", city:"Denville"},
            {name:"Saint Clares Hospital/Sussex", city:"Sussex"},
            {name:"Saint James Hospital", city:"Newark"},
            {name:"Saint Michaels Medical Center", city:"Newark"},
            {name:"Saint Peters University Hospital", city:"New Brunswick"},
            {name:"Shore Memorial Hospital", city:"Somers Point"},
            {name:"Somerset Medical Center", city:"Somerville"},
            {name:"South Jersey Healthcare-Bridgeton Hospital", city:"Bridgeton"},
            {name:"South Jersey Healthcare-Elmer Hospital", city:"Elmer"},
            {name:"South Jersey Healthcare-Newcomb Hospital", city:"Vineland"},
            {name:"Southern Ocean County Hospital", city:"Manahawkin"},
            {name:"St. Francis Medical Center", city:"Trenton"},
            {name:"St. Josephs Regional Medical Center", city:"Paterson"},
            {name:"St. Josephs Wayne Hospital", city:"Wayne"},
            {name:"St. Mary Hospital", city:"Hoboken"},
            {name:"St. Marys Hospital Passaic", city:"Passaic"},
            {name:"Summit Hospital", city:"Summit"},
            {name:"The Cooper Health System", city:"Camden"},
            {name:"The Memorial Hospital of Salem County", city:"Salem"},
            {name:"The Mountainside Hospital", city:"Montclair"},
            {name:"The Valley Hospital", city:"Ridgewood"},
            {name:"Trinitas Hospital", city:"Elizabeth"},
            {name:"Underwood-Memorial Hospital", city:"Woodbury "},
            {name:"Union Hospital", city:"Union"},
            {name:"University Medical Center at Princeton", city:"Princeton"},
            {name:"University of Medicine &amp; Dentistry of NJ-Univ Hosp", city:"Newark"},
            {name:"Virtua Memorial Hospital Burlington County", city:"Mount Holly"},
            {name:"Virtua West Jersey Hospital-Berlin", city:"Berlin"},
            {name:"Virtua West Jersey Hospital-Marlton", city:"Marlton"},
            {name:"Virtua West Jersey Hospital-Voorhees", city:"Voorhees"},
            {name:"Warren Hospital", city:"Phillipsburg"}
           ]) 
           }
           
           private function filterDemo():void{
               dataList.filterFunction = searchDemo;
               dataList.refresh();
           }
           
           private function searchDemo(item:Object):Boolean{
               var isMatch:Boolean = false
               if(item.name.toLowerCase().search(search.text.toLowerCase()) != -1){
                   isMatch = true
               }               
               return isMatch;               
           }
           
           private function clearSearch():void{
               dataList.filterFunction = null;
               dataList.refresh();
               search.text = '';
           }
        ]]>
    </mx:Script>
         <mx:Form>
            <mx:FormItem label="Search" direction="horizontal">
               <mx:TextInput id="search" change="filterDemo()" /> 
               <mx:Button label="Clear Search" click="clearSearch()" />
            </mx:FormItem> 
         </mx:Form>
         <mx:DataGrid dataProvider="{dataList}" width="400" height="400">
            <mx:columns>
               <mx:DataGridColumn headerText="Name" dataField="name" />
               <mx:DataGridColumn headerText="City" dataField="city" /> 
            </mx:columns> 
         </mx:DataGrid>
   
</mx:Application>

Open in new window

0
Comment
Question by:COwebmaster
3 Comments
 
LVL 12

Accepted Solution

by:
lexxwern earned 1000 total points
ID: 24276714
Try this:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="initData()">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
           [Bindable]
           private var dataList:ArrayCollection ; 
           
           private function initData():void{
            dataList= new ArrayCollection([
            {name:"Atlantic City Medical Center-City Division", city:"Atlantic City"},
            {name:"Atlantic City Medical Center-Mainland Division", city:"Pomona "},
            {name:"Barnert Hospital", city:"Paterson"},
            {name:"Bayonne Medical Center", city:"Bayonne"},
            {name:"Bayshore Community Hospital", city:"Holmdel"},
            {name:"Bergen Regional Medical Center. L.P.", city:"Paramus"},
            {name:"Burdette Tomlin Memorial Hospital", city:"Cape May"},
            {name:"Capital Health System - Fuld Campus", city:"Trenton"},
            {name:"Capital Health System - Mercer Campus", city:"Trenton"},
            {name:"CentraState Healthcare System", city:"Freehold"},
            {name:"Chilton Memorial Hospital", city:"Pompton Plains"},
            {name:"Christ Hospital", city:"Jersey City"},
            {name:"Clara Maass Medical Center", city:"Belleville"},
            {name:"Columbus Hospital", city:"Newark"},
            {name:"Community Medical Center", city:"Toms River"},
            {name:"East Orange General Hospital", city:"East Orange"},
            {name:"Englewood Hospital and Medical Center", city:"Englewood"},
            {name:"Hackensack University Medical Center", city:"Hackensack"},
            {name:"Hackettstown Community Hospital", city:"Hackettstown"},
            {name:"Holy Name Hospital", city:"Teaneck"},
            {name:"Hospital Center at Orange", city:"Orange"},
            {name:"Hunterdon Medical Center", city:"Flemington"},
            {name:"Irvington General Hospital", city:"Irvington"},
            {name:"Jersey Shore University Medical Center", city:"Neptune"},
            {name:"JFK Medical Center", city:"Edison"},
            {name:"Kennedy Memorial Hospitals/UMC Cherry Hill", city:"Cherry Hill"},
            {name:"Kennedy Memorial Hospitals/UMC Stratford", city:"Stratford"},
            {name:"Kennedy Memorial Hospitals/UMC Washington Twp", city:"Turnersville"},
            {name:"Kessler Memorial Hospital", city:"Hammonton"},
            {name:"Kimball Medical Center", city:"Lakewood"},
            {name:"LibertyHealth-Greenville Hospital Campus", city:"Jersey City"},
            {name:"LibertyHealth-Jersey City Medical Center Campus", city:"Jersey City"},
            {name:"LibertyHealth-Meadowlands Hospital Campus", city:"Secaucus"},
            {name:"Lourdes Medical Center of Burlington County", city:"Willingboro"},
            {name:"Monmouth Medical Center", city:"Long Branch"},
            {name:"MONOC", city:"Eatontown"},
            {name:"Morristown Memorial Hospital", city:"Morristown"},
            {name:"Muhlenberg Regional Medical Center", city:"Plainfield"},
            {name:"Newark Beth Israel Medical Center", city:"Newark"},
            {name:"Newton Memorial Hospital", city:"Newton"},
            {name:"Ocean Medical Center", city:"Brick"},
            {name:"Our Lady of Lourdes Medical Center", city:"Camden"},
            {name:"Overlook Hospital", city:"Summit"},
            {name:"Palisades Medical Center-New York Presbyterian ", city:"North Bergen"},
            {name:"Pascack Valley Hospital ", city:"Westwood"},
            {name:"PBI Regional Medical Center", city:"Passaic"},
            {name:"Raritan Bay Medical Center - Old Bridge", city:"Old Bridge"},
            {name:"Raritan Bay Medical Center - Perth Amboy", city:"Perth Amboy"},
            {name:"Riverview Medical Center", city:"Red Bank"},
            {name:"Robert Wood Johnson Univ Hospital", city:"New Brunswick"},
            {name:"Robert Wood Johnson Univ Hospital at Hamilton", city:"Hamilton"},
            {name:"Robert Wood Johnson Univ Hospital at Rahway", city:"Rahway"},
            {name:"Saint Barnabas Medical Center", city:"Livingston"},
            {name:"Saint Clares Hospital/Boonton Township", city:"Boonton"},
            {name:"Saint Clares Hospital/Denville", city:"Denville"},
            {name:"Saint Clares Hospital/Sussex", city:"Sussex"},
            {name:"Saint James Hospital", city:"Newark"},
            {name:"Saint Michaels Medical Center", city:"Newark"},
            {name:"Saint Peters University Hospital", city:"New Brunswick"},
            {name:"Shore Memorial Hospital", city:"Somers Point"},
            {name:"Somerset Medical Center", city:"Somerville"},
            {name:"South Jersey Healthcare-Bridgeton Hospital", city:"Bridgeton"},
            {name:"South Jersey Healthcare-Elmer Hospital", city:"Elmer"},
            {name:"South Jersey Healthcare-Newcomb Hospital", city:"Vineland"},
            {name:"Southern Ocean County Hospital", city:"Manahawkin"},
            {name:"St. Francis Medical Center", city:"Trenton"},
            {name:"St. Josephs Regional Medical Center", city:"Paterson"},
            {name:"St. Josephs Wayne Hospital", city:"Wayne"},
            {name:"St. Mary Hospital", city:"Hoboken"},
            {name:"St. Marys Hospital Passaic", city:"Passaic"},
            {name:"Summit Hospital", city:"Summit"},
            {name:"The Cooper Health System", city:"Camden"},
            {name:"The Memorial Hospital of Salem County", city:"Salem"},
            {name:"The Mountainside Hospital", city:"Montclair"},
            {name:"The Valley Hospital", city:"Ridgewood"},
            {name:"Trinitas Hospital", city:"Elizabeth"},
            {name:"Underwood-Memorial Hospital", city:"Woodbury "},
            {name:"Union Hospital", city:"Union"},
            {name:"University Medical Center at Princeton", city:"Princeton"},
            {name:"University of Medicine &amp; Dentistry of NJ-Univ Hosp", city:"Newark"},
            {name:"Virtua Memorial Hospital Burlington County", city:"Mount Holly"},
            {name:"Virtua West Jersey Hospital-Berlin", city:"Berlin"},
            {name:"Virtua West Jersey Hospital-Marlton", city:"Marlton"},
            {name:"Virtua West Jersey Hospital-Voorhees", city:"Voorhees"},
            {name:"Warren Hospital", city:"Phillipsburg"}
           ]) 
           }
           
           private function filterDemo():void{
               dataList.filterFunction = searchDemo;
               dataList.refresh();
           }
           
           private function searchDemo(item:Object):Boolean{
               var isMatch:Boolean = false;
               if( columnInput.selectedItem.label == 'Name' ) {
	               if(item.name.toLowerCase().search(search.text.toLowerCase()) != -1){
	                   isMatch = true
	               }               
               }
               else if(columnInput.selectedItem.label == 'City') {
	               if(item.city.toLowerCase().search(search.text.toLowerCase()) != -1){
	                   isMatch = true
	               }        
               }
               return isMatch;               
           }
           
           private function clearSearch():void{
               dataList.filterFunction = null;
               dataList.refresh();
               search.text = '';
           }
        ]]>
    </mx:Script>
         <mx:Form>
            <mx:FormItem label="Search" direction="horizontal">
               <mx:TextInput id="search" change="filterDemo()" /> 
               <mx:ComboBox id="columnInput">
               		<mx:dataProvider>
               			<mx:XMLListCollection>
               				<mx:source>
               					<mx:XMLList xmlns="">
               						<node><label>Name</label></node>
               						<node><label>City</label></node>
               					</mx:XMLList>
               				</mx:source>
               			</mx:XMLListCollection>
               		</mx:dataProvider>
               </mx:ComboBox>
               <mx:Button label="Clear Search" click="clearSearch()" />
            </mx:FormItem> 
         </mx:Form>
         <mx:DataGrid dataProvider="{dataList}" width="400" height="400">
            <mx:columns>
               <mx:DataGridColumn headerText="Name" dataField="name" />
               <mx:DataGridColumn headerText="City" dataField="city" /> 
            </mx:columns> 
         </mx:DataGrid>
   
</mx:Application>

Open in new window

0
 
LVL 19

Assisted Solution

by:Jones911
Jones911 earned 1000 total points
ID: 24276864
Here is a good demo of htis feature.  It will search all columns so you don't need to hard code values in: http://tutorial7.flexcf.com/
0
 

Author Closing Comment

by:COwebmaster
ID: 31576519
Thanks!
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

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

Most ColdFusion developers get confused between the CFSet, Duplicate, and Structcopy methods of copying a Structure, especially which one to use when. This Article will explain the differences in the approaches with examples; therefore, after readin…
Article by: kevp75
Hey folks, 'bout time for me to come around with a little tip. Thanks to IIS 7.5 Extensions and Microsoft (well... really Windows 8, and IIS 8 I guess...), we can now prime our Application Pools, when IIS starts. Now, though it would be nice t…
Integration Management Part 2
Exchange organizations may use the Journaling Agent of the Transport Service to archive messages going through Exchange. However, if the Transport Service is integrated with some email content management application (such as an anti-spam), the admin…

809 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