4 Replies Latest reply on May 29, 2007 4:38 PM by BLXWebMaster

    Grid filtering with textInput and TWO comboboxes...

    midimidi Level 1
      I am trying to combine some code based on Ben Forta's example and another I found on cflex.net. The idea is to have a text "as-you-type" search on a Grid, and also be filtered by not one, but two comboboxes, each pertaining to different columns of the grid. The code below works, but it is only 1 combobox and a textInput. How can I add the second combobox?

      Each piece of code works find on its own, but I'm just having trouble putting them all together. The second combobox's code is in block comment below.

      The rest of the application is like this: the grid is dgObjectList with dataProvider objectList. (ArrayCollection) It has objName, typeName, and courseName for columns. It is filtered via an inputText (for objName), and two comboBoxes cbTypeList and cbCourseList (for typeName and courseName). All three have change="objectList.refresh();"

      The resultHandler for the grid's data has:
      objectList.filterFunction=processFilter;

      And finally, here's the filter I have so far...any thoughts on getting the second combobox in there? The problem is once an if statement passes, the rest of the function doesn't run.

      quote:


      private function processFilter(item:Object):Boolean {
      var result:Boolean=false;
      dgObjectList.selectedIndex = -1;
      checkForDisplay();

      if(item.objName.length == 0 || item.objName.toUpperCase().indexOf(searchText.text.toUpperCase()) >= 0) {
      if(cbTypeList.selectedItem.typeName != "Show All") {
      return item.typeName == cbTypeList.selectedItem.typeName;
      } else if(cbTypeList.selectedItem.typeName == "Show All") {
      return true;
      }
      /* Second ComboBox:
      if(cbCourseList.selectedItem.courseName != "Show All") {
      return item.courseName == cbCourseListselectedItem.courseName;
      } else if(cbCourseList.selectedItem.courseName == "Show All") {
      return true;
      } */
      }
      return result;
      }

        • 1. Re: Grid filtering with textInput and TWO comboboxes...
          GeorgeWS
          I have a grid that I filter on. I have a text input and 1 ComboBox the combo box is used to chose what column to filter on. Maybe that is what your looking for. I go like this:

          import mx:collections.ArrayCollection;

          [Bindable]
          public var myData:ArrayCollection;

          [Bindable]
          public var aReturnTypes: Array=[label:"query", data:"query"];
          [Bindable]
          public var returnType:String="string";
          public function clearAll():void{
          myData=new ArrayCollection();
          }
          public function handleQueryResult(event:ResultEvent):void{
          myData=event.result as ArrayCollection;
          myData.filterFunction=processFilter;}

          //this is the filter function
          public function processFilter(item:Object):Boolean
          {
          var result:Boolean=false;
          var pattern:RegExp = new RegExp("^"+txtFilter.text, 'i');
          if(!item[String(columnfilter.selectedItem.data)].length
          || item[String(columnfilter.selectedItem.data)].match(pattern))
          result=true;
          return result;
          }
          //this is the combobox the data is the name of the columns
          [bindable]
          public var myfilter: Array = [ {label:"description", data:"pdes5w"},{label:"size", data:"psize5w"},{label:"pack", data:"pack5w"}];

          //my text input
          <mx:textinput id="txtFilter" change="myData.refresh"/>
          //my cobmobox
          <mx:combobox id="columnfilter" dataprovider="myfilter" close="selecteditem=combox(event.target).selectedItem" change="myData.refresh()"/>
          // my grid
          <mx:datagrid dataProvider="{myData}">....be sure to have the data names in the combo box the same as the datagridcolumns

          I hope I didnt leave anything out.
          • 2. Re: Grid filtering with textInput and TWO comboboxes...
            midimidi Level 1
            Thanks for your response...but you've basically reproduced the same code I had in my original post. The question is - How would you add a SECOND combobox that filters a third column of the same grid?

            i.e.:
            Grid column1 = filtered by textinput
            Grid column2 = filtered by combobox1
            Grid column3 = filtered by combobox2

            • 3. Re: Grid filtering with textInput and TWO comboboxes...
              GeorgeWS Level 1
              Im sure you figured this out by now, but for others maybe this helps:

              //2 More Variables
              [Bindable]
              public var theRegion: Array = [ {label:"State", data:1},
              {label:"North", data:"N"}, {label:"South", data:"S"} ];

              [Bindable]
              public var newPremise: Array = [ {label:"Premise", data:1},
              {label:"On", data:"ON"}, {label:"Off", data:"OF"}, {label:"Military", data:"MI"} ];


              //This is the Filter Function
              public function processFilter(item:Object):Boolean
              {
              var result:Boolean=false;
              var pattern:RegExp = new RegExp("^"+txtFilter.text,"i");
              if(!item[String(columnfilter.selectedItem.data)].length
              || item[String(columnfilter.selectedItem.data)].match(pattern) &&
              (aRegion.selectedItem.data == "1" || item.Region == aRegion.selectedItem.data) &&
              (premisefilter.selectedItem.data == "1" || item.BLCD20 == premisefilter.selectedItem.data)
              )
              {
              result=true;
              }
              return result;
              }


              //This is 2 additional ComboBoxs populated from above code
              <mx:ComboBox id="aRegion" dataProvider="{theRegion}" width="70"
              close="selectedItem=ComboBox(event.target).selectedItem" change="myData.refresh()"/>
              <mx:ComboBox id="premisefilter" dataProvider="{newPremise}" width="85"
              close="selectedItem=ComboBox(event.target).selectedItem" change="myData.refresh()"/>

              George
              • 4. Re: Grid filtering with textInput and TWO comboboxes...
                BLXWebMaster Level 1
                Here is a complete working example.

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application
                xmlns:mx=" http://www.adobe.com/2006/mxml"
                layout="absolute"
                creationComplete="creationCompleteHandler(event);">

                <mx:Script>
                <![CDATA[
                import mx.collections.ArrayCollection;
                import mx.events.FlexEvent

                [Bindable]
                public var theRegion: Array = [ {label:"State", data:1},{label:"North", data:"N"}, {label:"South", data:"S"} ];

                [Bindable]
                public var newPremise: Array = [ {label:"Premise", data:1},{label:"On", data:"ON"}, {label:"Off", data:"OF"}, {label:"Military", data:"MI"} ];

                private var tmp_objectList:Array =
                [
                {Premise: "On",Region: "North",objName: "Intro", typeName: "ColdFusion", courseName :"Intro To ColdFusion"},
                {Premise: "Off",Region: "South",objName: "Programming", typeName: "Flex", courseName:"Flex Programming"},
                {Premise: "Military",Region: "South",objName: "Development", typeName: "Apollo", courseName:"Apollo Development"}
                ];

                [Bindable]
                private var ObjectList:ArrayCollection;
                private function creationCompleteHandler(event:FlexEvent):void
                {
                ObjectList = new ArrayCollection (tmp_objectList);
                ObjectList.filterFunction=processObjectListFilter;
                }

                public function processObjectListFilter(item:Object):Boolean {
                var result:Boolean=false;
                if (
                (txtFilter.text == '' || (item.objName != null && String(item.objName).toUpperCase().indexOf(txtFilter.text.toUpperCase()) >= 0)) &&
                (aRegion.selectedLabel == 'State' ||(item.Region != null && item.Region.toUpperCase().indexOf(aRegion.selectedLabel.toUpperCase()) >= 0)) &&
                (premisefilter.selectedLabel == 'Premise' ||(item.Premise != null && item.Premise.toUpperCase().indexOf(premisefilter.selectedLabel.toUpperCase()) >= 0))
                )
                {
                result=true;
                }
                return result;
                }
                ]]>
                </mx:Script>

                <mx:ComboBox id="aRegion" dataProvider="{theRegion}" width="70" change="ObjectList.refresh();"/>
                <mx:ComboBox id="premisefilter" dataProvider="{newPremise}" width="85" change="ObjectList.refresh();" x="78"/>
                <mx:TextInput x="34" y="249" id="txtFilter" change="ObjectList.refresh();"/>
                <mx:DataGrid dataProvider="{ObjectList}" x="34" y="279" width="596">
                <mx:columns>
                <mx:DataGridColumn headerText="Region" dataField="Region"/>
                <mx:DataGridColumn headerText="Premise" dataField="Premise"/>
                <mx:DataGridColumn headerText="objName" dataField="objName"/>
                <mx:DataGridColumn headerText="typeName" dataField="typeName"/>
                <mx:DataGridColumn headerText="courseName" dataField="courseName"/>
                </mx:columns>
                </mx:DataGrid>
                <mx:Text x="34" y="223" text="Type As You Go Filters objName" color="#ffffff"/>
                </mx:Application>