4 Replies Latest reply on Aug 16, 2006 1:23 PM by GeorgeWS

    Filtering

    GeorgeWS Level 1
      Does anyone know how to use a text input and/or drop down to filter on a grid? I have been using the filter technique from the asFusion site with CF Flash forms and It works great. But I cant figure out how this applies to the flex. Can someone show me a sample?
      Thanks
      George
        • 1. Filtering
          dishmael
          I just got done doing something like this for one of my Flex applications. I have a datagrid and text input component:

          <mx:DataGrid x="10" y="10" width="738" height="271" id="members">
          <mx:columns>
          <mx:DataGridColumn headerText="Member Name" dataField="name"/>
          </mx:columns>
          </mx:DataGrid>

          <mx:TextInput x="57" y="495" width="176" id="filter" change="filterData()"
          toolTip="Enter any characters from a recipient first or last name"/>

          Here's the filterData function used to filter data whenever they enter text in the text input field:

          <mx:Script>
          <![CDATA[

          // Function to apply the filter function to the collection.
          private function filterData():void {
          members.filterFunction = stateFilterFunc;

          //Refresh the collection view to apply the filter.
          members.refresh();
          }

          // Function to filter items.
          protected function stateFilterFunc(item:Object):Boolean {
          var pattern:RegExp = new RegExp(filter.text, "i");
          var value:String = item.name;

          recipient.text = "";

          if ( value.match(pattern) != null ) {
          return true;
          } else {
          return false;
          }
          }

          ]]>
          </mx:Script>
          • 2. Re: Filtering
            GeorgeWS Level 1
            I tried what you show. There are no errors but it just does not filter. All i changed was the var item to mine and gave my grid an id = "members". Is that all I should have to do?
            • 3. Re: Filtering
              dishmael Level 1
              post your mxml application so I can see what you have
              • 4. Re: Filtering
                GeorgeWS Level 1
                Sorry its so long. Thanks for looking

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="vertical" >

                <mx:Script>
                <![CDATA[
                private function filterData():void{
                members.filterFunction = stateFilterFunc;
                members.refresh();
                }
                protected function stateFilterFunc(item:Object):Boolean{
                var pattern:RegExp = new RegExp(filter.text,"i");
                var value:String = item.pdes5w;

                recipient.text="";

                if(value.match(pattern)!=null){
                return true;
                }else{
                return false;
                }
                }
                ]]>
                </mx:Script>

                <mx:Script>
                <![CDATA[
                import mx.rpc.events.ResultEvent;
                import mx.controls.Alert;
                import mx.collections.ArrayCollection;

                [Bindable]
                public var sResult:String;

                [Bindable]
                public var aResult:Array;

                [Bindable]
                public var oResult:Object;

                [Bindable]
                public var qResult:ArrayCollection;

                [Bindable]
                public var aReturnTypes: Array = [ {label:"string", data:"string"},
                {label:"array", data:"array"}, {label:"struct", data:"struct"}, {label:"query", data:"query"} ];

                [Bindable]
                public var returnType:String="string";

                public function clearAll():void{
                sResult=new String();
                aResult=new Array();
                oResult=new Object();
                qResult=new ArrayCollection();

                }

                public function handleStringResult(event:ResultEvent):void{
                sResult=event.result as String;
                }
                public function handleArrayResult(event:ResultEvent):void{
                aResult=event.result as Array;
                }
                public function handleStructResult(event:ResultEvent):void{
                oResult=event.result as Object;
                }
                public function handleQueryResult(event:ResultEvent):void{
                qResult=event.result as ArrayCollection;
                }

                public function handleAnyTypeResult(event:ResultEvent):void{
                switch (returnType) {
                case 'string':
                handleStringResult(event);
                break ;
                case 'array':
                handleArrayResult(event);
                break ;
                case 'struct':
                handleStructResult(event);
                break ;
                case 'query':
                handleQueryResult(event);
                break ;
                default:
                handleStringResult(event);
                break ;
                }

                }

                ]]>
                </mx:Script>




                <mx:RemoteObject
                id="myService"
                destination="ColdFusion"
                source="Inventory"
                showBusyCursor="true"
                >

                <mx:method name="Inventory" result="handleQueryResult(event)" fault="Alert.show(event.fault.message)"/>

                </mx:RemoteObject>

                <mx:Panel title="Inventory" height="90%" width="100%"
                paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5" cornerRadius="10" roundedBottomCorners="true">


                <mx:HBox>
                <mx:TextInput width="68" id="filter" change="filterData()"/>
                <mx:RadioButton label="Warehouse" click="accordion.selectedIndex=0;" selected="true"/>
                <mx:RadioButton label="Cash / Carry" click="accordion.selectedIndex=1;"/>

                </mx:HBox>

                <mx:Accordion id="accordion" width="100%" height="100%" headerHeight="5">
                <mx:VBox height="100%" >
                <mx:DataGrid dataProvider="{qResult}" initialize="myService.Inventory()" width="100%" height="100%" id="members">
                <mx:columns>
                <mx:Array>
                <mx:DataGridColumn dataField="PNUM5W" headerText="Prod ID" width="55"/>
                <mx:DataGridColumn dataField="pdes5w" headerText="Desc" width="162"/>
                <mx:DataGridColumn dataField="SDIVDE" headerText="Size" width="50"/>
                <mx:DataGridColumn dataField="ISCF3W" headerText="Pac" width="35"/>
                <mx:DataGridColumn dataField="DIVN5W" headerText="Rnk" width="35"/>

                <mx:DataGridColumn dataField="INV_11" headerText="Or Inv" width="50"/>
                <mx:DataGridColumn dataField="ORD_11" headerText="Or Ord" width="50"/>
                <mx:DataGridColumn dataField="DAT_11" headerText="Or Due" width="50"/>
                <mx:DataGridColumn dataField="INT_11" headerText="Or InT" width="50"/>

                <mx:DataGridColumn dataField="INV_31" headerText="Ch Inv" width="50"/>
                <mx:DataGridColumn dataField="ORD_31" headerText="Ch Ord" width="50"/>
                <mx:DataGridColumn dataField="DAT_31" headerText="Ch Due" width="50"/>
                <mx:DataGridColumn dataField="INT_31" headerText="Ch InT" width="50"/>

                <mx:DataGridColumn dataField="INV_31" headerText="MH Inv" width="50"/>
                <mx:DataGridColumn dataField="ORD_31" headerText="MH Ord" width="50"/>
                <mx:DataGridColumn dataField="DAT_31" headerText="MH Due" width="50"/>
                <mx:DataGridColumn dataField="INT_31" headerText="MH InT" width="50"/>

                </mx:Array>
                </mx:columns>
                </mx:DataGrid>
                </mx:VBox>

                <mx:VBox height="100%" >
                <mx:DataGrid dataProvider="{qResult}" initialize="myService.Inventory()" width="100%" height="100%" id="members2">
                <mx:columns>
                <mx:Array>
                <mx:DataGridColumn dataField="PNUM5W" headerText="Prod ID" width="55"/>
                <mx:DataGridColumn dataField="PDES5W" headerText="Desc" width="162"/>
                <mx:DataGridColumn dataField="SDIVDE" headerText="Size" width="50"/>
                <mx:DataGridColumn dataField="ISCF3W" headerText="Pac" width="35"/>
                <mx:DataGridColumn dataField="DIVN5W" headerText="Rnk" width="35"/>

                <mx:DataGridColumn dataField="INV_11" headerText="Or Inv" width="50"/>
                <mx:DataGridColumn dataField="ORD_11" headerText="Or Ord" width="50"/>
                <mx:DataGridColumn dataField="DAT_11" headerText="Or Due" width="50"/>
                <mx:DataGridColumn dataField="INT_11" headerText="Or InT" width="50"/>

                <mx:DataGridColumn dataField="INV_31" headerText="Ch Inv" width="50"/>
                <mx:DataGridColumn dataField="ORD_31" headerText="Ch Ord" width="50"/>
                <mx:DataGridColumn dataField="DAT_31" headerText="Ch Due" width="50"/>
                <mx:DataGridColumn dataField="INT_31" headerText="Ch InT" width="50"/>

                <mx:DataGridColumn dataField="INV_31" headerText="MH Inv" width="50"/>
                <mx:DataGridColumn dataField="ORD_31" headerText="MH Ord" width="50"/>
                <mx:DataGridColumn dataField="DAT_31" headerText="MH Due" width="50"/>
                <mx:DataGridColumn dataField="INT_31" headerText="MH InT" width="50"/>

                </mx:Array>
                </mx:columns>
                </mx:DataGrid>
                </mx:VBox>
                </mx:Accordion>
                </mx:Panel>
                </mx:Application>