3 Replies Latest reply on Jan 17, 2007 11:03 PM by Newsgroup_User

    Setting column for filter function

    Josh Johnson Level 1
      I've got the following code working for filtering data in a grid, but it's currently hard-coded to only filter on the "Character" column. (see the searchData function) I'm capturing the string for the column that should be searched in the filterColumn variable, but now I'm stuck as to how to 'inject' that string into the IF statement of the searchData function. If someone can offer an explanation I'd appreciate it.

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="vertical"
      creationComplete="init()">
      <mx:Script>
      <![CDATA[
      import mx.collections.ArrayCollection;

      private function init():void {
      initData();
      setFilterColumn();
      }

      [Bindable]
      private var dataList:ArrayCollection ;

      private function initData():void{
      dataList= new ArrayCollection([
      {character:"Peter Gibbons", actor:"Ron Livingston"},
      {character:"Joanna", actor:"Jennifer Aniston"},
      {character:"Michael Bolton", actor:"David Herman"},
      {character:"Samir Nagheenanajar", actor:"Ajay Naidu"},
      {character:"Lawrence", actor:"Diedrich Bader"},
      {character:"Milton Waddams", actor:"Stephen Root"},
      {character:"Bill Lumbergh", actor:"Gary Cole"},
      {character:"Tom Smykowski", actor:"Richard Riehle"},
      {character:"Anne", actor:"Alexandra Wentworth"},
      {character:"Dom Portwood", actor:"Joe Bays"},
      {character:"Bob Slydell", actor:"John C. McGinley"},
      {character:"Bob Porter", actor:"Paul Wilson"},
      {character:"Nina", actor:"Kinna McInroe"},
      {character:"Brian", actor:"Todd Duffy"},
      {character:"Drew", actor:"Greg Pitts"}
      ])
      }

      private function filterData():void{
      dataList.filterFunction = searchData;
      dataList.refresh();
      }

      private function searchData(item:Object):Boolean{
      var isMatch:Boolean = false;
      // character is hard coded below
      if(item.character.toLowerCase().search(filterInput.text.toLowerCase()) != -1){
      isMatch = true;
      }
      return isMatch;
      }

      private function clearFilter():void{
      dataList.filterFunction = null;
      dataList.refresh();
      filterInput.text = '';
      }

      [Bindable]
      private var filterColumn:String;

      private function setFilterColumn():void {
      filterColumn = columnCombo.selectedItem.value;
      }
      ]]>
      </mx:Script>

      <mx:HBox verticalAlign="middle">
      <mx:Label text="Filter:" />
      <mx:ComboBox id="columnCombo" change="setFilterColumn()">
      <mx:dataProvider>
      <mx:ArrayCollection id="views">
      <mx:Object label="Character" value="character" />
      <mx:Object label="Actor" value="actor" />
      </mx:ArrayCollection>
      </mx:dataProvider>
      </mx:ComboBox>
      <mx:TextInput id="filterInput" change="filterData()" />
      <mx:Button label="Clear" click="clearFilter()" />
      </mx:HBox>
      <mx:DataGrid dataProvider="{dataList}" width="400" height="400">
      <mx:columns>
      <mx:DataGridColumn headerText="Character" dataField="character" />
      <mx:DataGridColumn headerText="Actor" dataField="actor" />
      </mx:columns>
      </mx:DataGrid>

      </mx:Application>
        • 1. Re: Setting column for filter function
          GeorgeWS Level 1
          Instead of the function searchData the way you have it try:

          public function searchData(item:Object):Boolean
          {
          var result:Boolean=false;
          var pattern:RegExp = new RegExp("^"+txtFilter.text,"i");
          if (!item[String(columfilter.selectedItem.data)].length
          || item{String(columnfilter.selectedItem.data)].match(pattern))
          result=true;
          return result;
          }

          columnfilter is the id of my combobox that selects what column I want to filter on. My text filter is called txtFilter

          Hope this helps
          George
          • 2. Re: Setting column for filter function
            Josh Johnson Level 1
            That definitely took me another step. To fit my previously posted code, I edited your suggestion to this:

            public function searchData(item:Object):Boolean {
            var isMatch:Boolean=false;
            var pattern:RegExp = new RegExp("^"+filterInput.text,"i");
            if (!item[String(columnCombo.selectedItem.value)].length ||
            item[String(columnCombo.selectedItem.value)].match(pattern))
            isMatch=true;
            return isMatch;
            }

            This now works as advertised apart from one bug. It only does matches to the beginning of the strings. (i.e if I type in "eter" it wouldn't return "Peter Gibbons" through the filter.)
            • 3. Re: Setting column for filter function
              Level 7
              Josh Johnson a écrit :
              > That definitely took me another step. To fit my previously posted code, I
              > edited your suggestion to this:
              >
              > public function searchData(item:Object):Boolean {
              > var isMatch:Boolean=false;
              > var pattern:RegExp = new RegExp("^"+filterInput.text,"i");
              > if (!item[String(columnCombo.selectedItem.value)].length ||
              > item[String(columnCombo.selectedItem.value)].match(pattern))
              > isMatch=true;
              > return isMatch;
              > }
              >
              > This now works as advertised apart from one bug. It only does matches to the
              > beginning of the strings. (i.e if I type in "eter" it wouldn't return "Peter
              > Gibbons" through the filter.)
              >
              Just remove anchor 'start of string' from the regexp ("^").


              new RegExp(filterInput.text,"i");