9 Replies Latest reply on Aug 17, 2011 9:18 PM by Mulraid

    Flex Mobile - Won't filter datagrid?

    Mulraid

      Hi, I am fairly new at all this to be honest. But I pick on things very fast. below is what I have been working on. From the

      ex:'s I have found online. The goal is to load the Xml file. Display a "Buylist" & be able to filter out the very long list. They say  "e4x" is the

      best way to go. Only problem is when I use the [ resultFormat="e4x" ] under the [ <s:HTTPService> it does not display

      a error code. But when I load the app up under the emulator and it trys to read the Xml file it gets an error. And if I take that line out

      it loads fine. But there is no filtering.

      What am I doing wrong?

       


      <?xml version="1.0" encoding="utf-8"?>
      <s:View fontSize="20"
              xmlns:fx="http://ns.adobe.com/mxml/2009"
              xmlns:s="library://ns.adobe.com/flex/spark">
         
          <fx:Script>
              <![CDATA[
              private function init():void
              {
              myData.send();
              }
             
              private function dataLoaded():void
              {
              myDataGrid.dataProvider = myData.lastResult.document.row;
              }
             
              private function search():void
              {
              try
              {
              var reg:RegExp = new RegExp(tbSearch.text.toLowerCase());
              myDataGrid.dataProvider = myData.lastResult.document.row.(document.row(Card.toLowerCase()))
              }
              catch(err:Error)
              {
              }
              finally
              {
              }
              }
             
              ]]>
          </fx:Script>
          <fx:Declarations>
                                  <s:HTTPService
                                                  id="myData"
                                                  url="http://weblist.webs.com/Mbuylist.xml"
                                                  resultFormat="e4x"
                                                  result="dataLoaded();"                                   
                                  />
          </fx:Declarations>
          <s:titleContent>

       

              <s:TextInput id="tbSearch" width="357" text="" change="search();">
              </s:TextInput>
          </s:titleContent>

       

          <s:actionContent>
              <s:Button x="21" width="90" label="S" click="myData.send()"/>
          </s:actionContent>
          <s:DataGrid id="myDataGrid" width="481" height="619" dataProvider="{myData.lastResult.document.row}">
             
          </s:DataGrid>
      </s:View>

        • 1. Re: Flex Mobile - Won't filter datagrid?
          kokorito Level 4

          cant you just use a filter function on the grid dataprovider

           

           

          grid.dataProvider.filterFunction = filtering;
          grid.dataProvider.refresh();
          
          protected function filtering(obj:Object):Boolean
          {
               return (obj.propertyIwantToTest == whatIwantToFilter); 
          }
          
          • 2. Re: Flex Mobile - Won't filter datagrid?
            Mulraid Level 1

            A little Stumped.

             

                    myDataGrid.dataProvider.filterFunction = filtering;
                   myDataGrid.dataProvider.refresh();
                       
                    protected function filtering(obj:Object):Boolean
                    {
                            return (obj.document == myData.lastResult.docuemnt.row);
                    }

             

            I havent used the Filter funtion before. This are the values I changed in orange. In Blue is saying

            Multiple markers at this line:
            -1120: Access of undefined property myDataGrid.
            -1120: Access of undefined property filtering.
            -Access of undefined property filterFunction

            ---------------------------------------

            Also I still have the e4x loading problem. Do I just not use that? Please break this down for me =).

             

            Thank You for help! and anyone else who responds!

            • 3. Re: Flex Mobile - Won't filter datagrid?
              kokorito Level 4

              obj is the 'row' from the datagrid

               

              so

               

              return (obj.price > 10); would filter all the rows where the price is more than 10

              • 4. Re: Flex Mobile - Won't filter datagrid?
                athakur83 Level 1

                Filter function has to be used on a array collection for example I want to filter out all the "male" employees:

                 

                var myData:ArrayCollection = new ArrayCollection();

                myData.filterFunction = myFilterFunction;

                myData.refresh();

                myDataGrid.dataProvider = myData;

                 

                private function myFilterFunction(obj:Object):Boolean

                {

                     if (obj.sex == "male")

                     {

                          return true;

                     }

                     return false;

                }

                 

                 

                So you should cast the data being returned from the service to ArrayCollection/ArrayList before applying filter function. Hope that helps. Please pardon any syntax errors.

                • 5. Re: Flex Mobile - Won't filter datagrid?
                  kokorito Level 4

                  also works with XmlListCollection

                  • 6. Re: Flex Mobile - Won't filter datagrid?
                    Mulraid Level 1

                    My original ?' was if there was anything wrong with my first post.

                    It would not filter. Was I missing something?

                    ---------------------------------------------------

                     

                    As for this new method.

                    Now its telling me I have

                    Multiple markers at this line:
                    -1151: A conflict exists with definition myData in namespace internal.
                    -46 changed lines

                    ---------------------------------

                    Witch I don't understand witch var its having trouble with. I tried renaming a couple different sets but then it give me more errors.

                    Sorry for all the trouble! AND THANKY YOU A BUNCH for the future!

                     

                    <?xml version="1.0" encoding="utf-8"?>
                    <s:View fontSize="20"
                            xmlns:fx="http://ns.adobe.com/mxml/2009"
                            xmlns:s="library://ns.adobe.com/flex/spark">
                       
                        <fx:Script>
                            <![CDATA[
                               
                                import mx.collections.ArrayCollection;
                               
                                var myData:ArrayCollection = new ArrayCollection();
                                myData.filterFunction = myFilterFunction;
                                myData.refresh();
                                myDataGrid.dataProvider = myData;
                               
                                private function myFilterFunction(obj:Object):Boolean
                                {
                                    if (obj.Set == "3rd Edition")
                                {       
                                return true;
                                }
                                return false;
                                }
                               
                               
                                private function dataLoaded():void
                                {
                                    myDataGrid.dataProvider = myData.lastResult.document.row;
                                }
                               
                            ]]>
                        </fx:Script>
                        <fx:Declarations>
                            <s:HTTPService
                                id="myData"
                                url="http://weblist.webs.com/Mtgbuylist.xml"                             
                                />
                        </fx:Declarations>
                        <s:titleContent>
                           
                           
                           
                            <s:TextInput id="tbSearch" width="357" text="" change="myFilterFunction(obj:Object)">
                            </s:TextInput>
                        </s:titleContent>
                       
                       
                       
                        <s:actionContent>
                            <s:Button x="21" width="90" label="S" click="myData.send()"/>
                        </s:actionContent>
                        <s:DataGrid id="myDataGrid" width="481" height="619" dataProvider="{myData.lastResult.document.row}">
                           
                        </s:DataGrid>
                    </s:View>

                    • 7. Re: Flex Mobile - Won't filter datagrid?
                      kokorito Level 4

                      your service is called myData, declared in mxml

                       

                      and in the script you declare myData as an arraycollection

                       

                       

                      you dont call the filterfunction directly

                       

                       

                      private function clickHandler(event:MouseEvent):void
                      {
                           myDataGrid.dataProvider.filterFunction = myFilterFunction;
                           myDataGrid.dataProvider.refresh();
                      }
                      

                       

                       

                       

                      <s:Button label="3rd Edition" click="clickHandler(event)"/>
                      • 8. Re: Flex Mobile - Won't filter datagrid?
                        athakur83 Level 1

                        I wrote the following code it works. Note that I am using urlloader instead of http service coz I am a bit lazy. But I used the same xml file as yours.

                         

                         

                         

                        <?xml version="1.0" encoding="utf-8"?>

                        <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

                        layout="absolute"

                        backgroundGradientAlphas="[1.0, 1.0]"

                        backgroundGradientColors="[#FFFFFF, #FFFFFF]"

                        creationComplete="init()" fontSize="12" fontFamily="Arial">

                        <mx:Script>

                        <![CDATA[

                        import mx.events.FlexEvent;

                        import mx.collections.XMLListCollection;

                        import mx.rpc.events.ResultEvent;

                        import mx.rpc.http.HTTPService;

                         

                        [Bindable]

                        public var myData:XMLListCollection;

                         

                        private function init():void

                        {

                        this.removeEventListener(FlexEvent.CREATION_COMPLETE,init);

                        var myLoader:URLLoader = new URLLoader();

                        myLoader.dataFormat = "XML";

                        myLoader.addEventListener(Event.COMPLETE, loadDataResult);

                        myLoader.load(new URLRequest("Mbuylist.xml"));

                        }

                         

                        private function loadDataResult(event:Event):void

                        {

                        var myXML:XML = new XML(event.target.data);

                        var myXMLList:XMLList = myXML.row;

                        myData = new XMLListCollection(myXMLList);

                        myData.filterFunction = myFilterFunction;

                        }

                         

                        private function search():void

                        {

                        myData.refresh();

                        }

                         

                        private function myFilterFunction(obj:XML):Boolean

                        {

                        if(String(obj.Card).toLowerCase().indexOf(tbSearch.text.toLowerCase()) > -1)

                        {

                        return true;

                        }

                        return false;

                        }

                        ]]>

                        </mx:Script>

                        <mx:DataGrid top="40" left="10" right="10" bottom="10" id="dgResults" dataProvider="{myData}">

                        <mx:columns>

                        <mx:DataGridColumn headerText="Card" dataField="Card"/>

                        <mx:DataGridColumn headerText="Set" dataField="Set"/>

                        <mx:DataGridColumn headerText="Buy" dataField="Buy"/>

                        </mx:columns>

                        </mx:DataGrid>

                        <mx:TextInput x="60" y="10" width="490" id="tbSearch" change="search()"/>

                        <mx:Label x="10" y="12" text="Search"/>

                        </mx:Application>

                         

                         

                        • 9. Re: Flex Mobile - Won't filter datagrid?
                          Mulraid Level 1

                          THANK YOU SO MUCH!

                          <?xml version="1.0" encoding="utf-8"?>
                          <s:View fontSize="20"
                                  xmlns:fx="http://ns.adobe.com/mxml/2009"
                                  xmlns:s="library://ns.adobe.com/flex/spark">
                             
                              <fx:Script>
                                  <![CDATA[
                                     
                                      import mx.events.FlexEvent;
                                      import mx.collections.XMLListCollection;
                                      import mx.rpc.events.ResultEvent;
                                      import mx.rpc.http.HTTPService;
                                     
                                      [Bindable]
                                      public var myData2:XMLListCollection;
                                      private function init():void
                                         
                                      {
                                         
                                          this.removeEventListener(FlexEvent.CREATION_COMPLETE,init);
                                          var myLoader:URLLoader = new URLLoader();
                                          myLoader.dataFormat = "XML";
                                          myLoader.addEventListener(Event.COMPLETE, loadDataResult);
                                          myLoader.load(new URLRequest("http://weblist.webs.com/Mtgbuylist.xml"));
                                         
                                      }
                                     
                                      private function loadDataResult(event:Event):void
                                         
                                      {
                                         
                                          var myXML:XML = new XML(event.target.data);
                                          var myXMLList:XMLList = myXML.row;
                                          myData2 = new XMLListCollection(myXMLList);
                                          myData2.filterFunction = myFilterFunction;
                                         
                                      }
                                     
                                      private function search():void
                                         
                                      {
                                          myData2.refresh();
                                      }
                                     
                                      private function myFilterFunction(obj:XML):Boolean
                                         
                                      {
                                         
                                          if(String(obj.Card).toLowerCase().indexOf(tbSearch.text.toLowerCase()) > -1)
                                             
                                          {
                                              return true;
                                          }
                                          return false;
                                      }
                                     
                                  ]]>
                              </fx:Script>
                              <fx:Declarations>
                              </fx:Declarations>
                             
                              <s:titleContent>
                                  <s:TextInput id="tbSearch" width="357" text="" change="search();">
                                  </s:TextInput>
                              </s:titleContent>
                                 
                              <s:actionContent>
                                  <s:Button x="21" width="90" label="S" click="init()"/>
                              </s:actionContent>
                             
                              <s:DataGrid id="dgResults" width="481" height="619" dataProvider="{myData2}">
                                  <s:columns>
                                      <s:ArrayList>
                                          <s:GridColumn headerText="Card" dataField="Card"/>
                                          <s:GridColumn headerText="Set" dataField="Set"/>
                                          <s:GridColumn headerText="Buy" dataField="Buy"/>
                                        </s:ArrayList>
                                  </s:columns>
                              </s:DataGrid>
                          </s:View>

                           

                          Just one more ? How do i get to filter Buy prices!?

                           

                          I used your example and edited a little. The main part was I was not loading the data on the grid and so it had nothing to search! OMG lol And thank you everyone ellse who contributed I have learned a lot and there are no words good enough for the gratitude you guys deserve!