0 Replies Latest reply on Feb 14, 2012 3:02 AM by like_it

    Filtering List using richeditable text (sdk 4.1)

    like_it Level 1

      Hi All,

       

      I am facing a trouble with list and richeditable text

       

      MainApplication.mxml

       

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

      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                     xmlns:s="library://ns.adobe.com/flex/spark"

                     creationComplete="group1_creationCompleteHandler(event)"

                     xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

          <fx:Script>

              <![CDATA[

                  import mx.collections.ArrayCollection;

                  import mx.events.FlexEvent;

                 

                  import spark.events.TextOperationEvent;

                 

                  protected function textInputId_changeHandler(event:TextOperationEvent):void

                  {

                      //checkContains();

                      dataProvider.refresh();

                  }

                 

                  public function checkContains():void

                  {               

                      var tempApp:ArrayCollection=new ArrayCollection();   

                      var toCheck:String=null;

                      var tempArrayIndex:int=0;

                      for(var index:int=0;index<dataProvider.length ;index++)

                      {

                          toCheck=dataProvider.getItemAt(index) as String;

                         

                          var startIndex:int;

                         

                          if((startIndex=toCheck.toUpperCase().indexOf(textInputId.text.toUpperCase()))>=0)

                          {

                             

                              var o:Object=new Object();

                              o["startIndex"]=startIndex;

                              o["endIndex"]=startIndex+(textInputId.text.length);

                              o["data"]=toCheck;

                              tempApp.addItem(o);

                             

                             

                             

                             

                              /* mainTempArrayIndexDictionary[tempArrayIndex++]=index;     */

                          }                   

                      }

                      list.dataProvider=tempApp;

                  }

                 

                  [Bindable]

                  var dataProvider:ArrayCollection=new ArrayCollection();

                 

                  protected function group1_creationCompleteHandler(event:FlexEvent):void

                  {

                      var o:Object=new Object();

                      o["startIndex"]=0;

                      o["endIndex"]=0;

                      o["data"]="A1sgdfg";

                      dataProvider.addItem(o);

                      o=new Object();

                      o["startIndex"]=0;

                      o["endIndex"]=0;

                      o["data"]="Artrter2";

                      dataProvider.addItem(o);

                      o=new Object();

                      o["startIndex"]=0;

                      o["endIndex"]=0;

                      o["data"]="A3cxbvxcxv";

                      dataProvider.addItem(o);

                      dataProvider.filterFunction=filterFunctionType;

                  }

                 

                  public function filterFunctionType(o:Object):Boolean               

                  {

       

                      var startIndex:int;

                      if((startIndex=(o["data"] as String).toUpperCase().indexOf(textInputId.text.toUpperCase()))>=0)

                      {

                          o["startIndex"]=startIndex;

                          o["endIndex"]=startIndex+(textInputId.text.length);

                         

                          return true;

                      }

                      else

                          return false;

       

                  }

                 

              ]]>

          </fx:Script>

          <fx:Declarations>

              <!-- Place non-visual elements (e.g., services, value objects) here -->

          </fx:Declarations>

          <s:VGroup width="10%" height="100%">

              <s:BorderContainer width="100%" height="20" borderColor="0x18181B">

                  <mx:Spacer width="100%" height="2"/>           

                  <s:RichEditableText change="textInputId_changeHandler(event)" verticalAlign="middle" width="100%" height="100%" id="textInputId" fontWeight="bold"/>

              </s:BorderContainer>

              <s:List itemRenderer="DefaultItemrenderer"  id="list" dataProvider="{dataProvider}" width="100%" height="95%"

                      alternatingItemColors="[0xF5EDE4, 0xFFFFFFF]"/>   

          </s:VGroup>

      </s:Application>

       

       

      DefaultItemrenderer.mxml

       

       

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

      <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"

                      xmlns:s="library://ns.adobe.com/flex/spark"

                      xmlns:mx="library://ns.adobe.com/flex/mx" >

          <fx:Declarations>

              <!-- Place non-visual elements (e.g., services, value objects) here -->

          </fx:Declarations>

          <fx:Script>

              <![CDATA[

                  import flashx.textLayout.formats.TextLayoutFormat;

                 

                  import mx.controls.textClasses.TextRange;

                  import mx.events.FlexEvent;

                 

                  import spark.components.RichEditableText;

                  import spark.events.TextOperationEvent;

                 

                  public var textLayoutFormat:TextLayoutFormat = new TextLayoutFormat();

                 

              

                 

                 

                      override public function set data(value:Object):void

                  {

                     

                     

                      if(value)

                      {

                         

                          if(value is String)

                          {

                              textLabel.text=value as String;

                             

                          }

                          else

                          {

                              textLabel.text=value["data"] as String;                       

                              textLayoutFormat.backgroundColor = 0xC4C4C4;

                              trace(value["data"]+"  "+value["startIndex"]+"   "+value["endIndex"]);

                              textLabel.setFormatOfRange(textLayoutFormat,value["startIndex"] as int,value["endIndex"] as int);

                              textLabel.validateNow();

                          }

                      }

                      super.data=value;

                  }  

              ]]>

          </fx:Script>

       

          <s:VGroup id="g" width="100%" height="100%" paddingTop="5" paddingLeft="3">

              <s:RichEditableText  editable="false" id="textLabel"/>       

          </s:VGroup>

         

      </s:ItemRenderer>

       

       

       

      Now . when you run this application ,  the text box at the top acts as a filter to the list and selcted text gets highlighted  . For e.g. try "A1sg" , you could see only 1 record in list with "A1sg" highlighted . Now remove "g" from "A1sg" , but as u can see still the highlighting is in "A1sg" where as filter is "A1s". Now remove "s" from "A1s" leaving filter to be "A1" but still the highlighting doesnt change. Now remove "1" leaving filter to "A" , now you can see some change.

       

      I have verified that filtering is working fine.not sure why it doesnt get reflected.

       

      Can some one please help me on this.

       

      Thanks