16 Replies Latest reply on Mar 1, 2011 9:47 PM by anandbk

    How to filter flex datagrid with 3 three checkboxes?

    anandbk Level 1

      Hi Guys,

       

      I am new to flex.

       

      I need your help. Can anyone help me please.

       

      My Requirement:
      Flex Datagrid should be filter based on 3 checkboxes.(Checkboxes can be checked with several combinations).

       

      **My Code:**

       

      **Checkboxes:**

       

      <mx:CheckBox id="completed" label="Completed" click=""/>
             
      <mx:CheckBox id="onhold" label="On Hold" click=""/>

       

      <mx:CheckBox  id="inprogress" label="In Progress" click=""/>

       

       

       

      **Data Provider:**

       

      <mx:ArrayCollection id="arrColl">
              <mx:source>
                  <mx:Array>
                      <mx:Object Status="In Progress" title="java" grade="A"/>
                      <mx:Object Status="Completed" title="c" grade="B"/>
                      <mx:Object Status="Suspended" title="c++" grade="C"/>
                      <mx:Object Status="On Hold" title="flex" grade="D"/>
                      <mx:Object Status="Completed" title="cobol" grade="E"/>
                      <mx:Object Status="In Progress" title="python" grade="F"/>
                      <mx:Object Status="Completed" title="SAP" grade="G"/>
                      <mx:Object Status="In Progress" title="Oracle" grade="H"/>
                      <mx:Object Status="On Hold" title="Sybase" grade="I"/>
                      <mx:Object Status="In Progress" title="HTML" grade="J"/>
                      <mx:Object Status="In Progress" title="JSP" grade="K"/>
                      <mx:Object Status="On Hold" title="Servlets" grade="L"/>
                  </mx:Array>
              </mx:source>
          </mx:ArrayCollection>

       


      **MXML code:**
      <mx:DataGrid dataProvider="{arrColl}" id="dg"/>

       

      Here i have to filter the datagrid when i check the different combinations of 3 checkboxes.
      The checkbox values are from Staus column of arraycollection.
      When i select 'completed' checkbox and 'onhold' check box, datagrid should display only those records which have Status as "Completed" & "On Hold".
      Similarly for all combinations of checkboxes selection.

       

      Can anyone give simple solution please ?

       

      Thanks,
      Anand.k

        • 1. Re: How to filter flex datagrid with 3 three checkboxes?
          Jorge Raimundo Level 2

          Check the filterFunction of the ArrayCollection.

           

          You can have something like this:

           

          /**
          * INSIDE SCRIPT BLOCK
          */
          
          private function arrCollFilterFunction(item:Object):Boolean
          {
               var checkCompleted:Boolean = completed.selected ? item.Status == 'Completed' : false;
               var checkOnHold:Boolean = onhold.selected ? item.Status == 'On Hold' : false;
               var checkInProgress:Boolean = inprogress.selected ? item.Status == 'In Progress' : false;
          
               return checkCompleted || checkOnHold || checkInProgress;
          }
          
          /**
          * OUTSIDE SCRIPT BLOCK
          */
          
          <mx:CheckBox id="completed" label="Completed" click="arrColl.refresh()"/>
          
          <mx:CheckBox id="onhold" label="On Hold" click="arrColl.refresh()"/>
          
          <mx:CheckBox  id="inprogress" label="In Progress" click="arrColl.refresh()"/>
          
          <mx:ArrayCollection id="arrColl" filterFunction="arrCollFilterFunction">
          ..
          .. CONTINUATION OF THE ARRAY COLLECTION
          ..
          
          • 2. Re: How to filter flex datagrid with 3 three checkboxes?
            anandbk Level 1

            Hi Jorge,

             

            Thanks for your answer.

             

            I verified with your code but am getting following error on page load for the first time.

             

            TypeError: Error #1009: Cannot access a property or method of a null object reference.
                at com.plateau.icontent.sync.view::manageCoursesView/arrCollFilterFunction()
                at mx.collections::ListCollectionView/internalRefresh()
                at mx.collections::ListCollectionView/http://www.adobe.com/2006/flex/mx/internal::reset()
                at mx.collections::ListCollectionView/set list()
                at mx.collections::ArrayCollection/set source().

             

            Could you please help me to resolve this issue.

             

            I think when page loads for first time, arrCollFilterFunction(0 doesnot return anything.

             

            Please help me what should i do.

             

            Thanks,

            Anand.

            • 3. Re: How to filter flex datagrid with 3 three checkboxes?
              Jorge Raimundo Level 2

              The name of the function has a space in the middle:

               

              at com.plateau.icontent.sync.view::manageCoursesView/arrCollFilterFuncti on()

               

              Please check if you haven't misstyped it on the code.

              • 4. Re: How to filter flex datagrid with 3 three checkboxes?
                anandbk Level 1

                Hi Jorge,

                 

                There is no space in function name. It is by mistake happened while typing. Sorry for that.

                 

                When page is loaded none of the checkboxes are checked. So, what should the function return when page loads for the first time ?

                 

                Could you please help me.

                 

                 

                 

                Thanks,

                Anand.

                • 5. Re: How to filter flex datagrid with 3 three checkboxes?
                  Jorge Raimundo Level 2

                  I'm noticing you're using mx objects.

                   

                  Why not using the spark ones:

                   

                  <fx:Declarations>
                       <s:ArrayCollection id="arrColl" filterFunction="arrCollFilterFunction">
                            <s:Object Status="In Progress" title="java" grade="A"/>
                            <s:Object Status="Completed" title="c" grade="B"/>
                            <s:Object Status="Suspended" title="c++" grade="C"/>
                            <s:Object Status="On Hold" title="flex" grade="D"/>
                            <s:Object Status="Completed" title="cobol" grade="E"/>
                            <s:Object Status="In Progress" title="python" grade="F"/>
                            <s:Object Status="Completed" title="SAP" grade="G"/>
                            <s:Object Status="In Progress" title="Oracle" grade="H"/>
                            <s:Object Status="On Hold" title="Sybase" grade="I"/>
                            <s:Object Status="In Progress" title="HTML" grade="J"/>
                            <s:Object Status="In Progress" title="JSP" grade="K"/>
                            <s:Object Status="On Hold" title="Servlets" grade="L"/>
                       </s:ArrayCollection>
                  </fx:Declarations>
                  
                  • 6. Re: How to filter flex datagrid with 3 three checkboxes?
                    anandbk Level 1

                    Hi Jorge,

                     

                    Thanks.

                    But I am using flex 3.5. I dont know whether it has spark or not.

                    Kindly tell me in simple way. We have our own flex libraries which are replica of flex 3.5.

                    Since our flex framework does not provide Spark i cannot use it. Please help me with <mx> tag itself.

                     

                    Thanks,

                    Anand.

                    • 7. Re: How to filter flex datagrid with 3 three checkboxes?
                      Jorge Raimundo Level 2

                      Hi Anand.

                       

                      Sorry, my bad. You have to change the function to check if the check boxes are already instantiated:

                       

                      private function filterFunction(item:Object):Boolean
                      {
                           if (completed && onhold && inprogress)
                           {
                                var checkCompleted:Boolean = completed.selected ? item.Status == 'Completed' : false;
                                var checkOnHold:Boolean = onhold.selected ? item.Status == 'On Hold' : false;
                                var checkInProgress:Boolean = inprogress.selected ? item.Status == 'In Progress' : false;
                                          
                                return checkCompleted || checkOnHold || checkInProgress;
                           }
                           else
                                return true;
                      }

                       

                      With this it must work.

                      • 8. Re: How to filter flex datagrid with 3 three checkboxes?
                        anandbk Level 1

                        Hi Jorge,

                         

                        No luck

                         

                        I tried with all, still getting same error.   Please Please some how provide solution for the issue.

                         

                        And i have just a clarification.

                        Will filterFunction() work for all the checkbox combinations (like it has truth table below.)

                         

                        Completed    On Hold     In Progress

                         

                        0                    0                  1

                        0                    1                  0

                        1                    0                  0

                        1                    0                  1

                        1                    1                  0

                        1                    1                  1

                         

                        Please clarify.

                        I know it might be silliest question, as am new please clarify.

                         

                         

                        Thanks,

                        Anand

                        • 9. Re: How to filter flex datagrid with 3 three checkboxes?
                          Jorge Raimundo Level 2

                          I don't understand.

                           

                          I tried on flex 3.5 and it worked. Code:

                           

                          <?xml version="1.0" encoding="utf-8"?>
                          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" minWidth="955" minHeight="600">
                              <mx:Script>
                                  <![CDATA[
                                      private function filterFunction(item:Object):Boolean
                                      {
                                          if (completed && onhold && inprogress)
                                          {
                                              var checkCompleted:Boolean = completed.selected ? item.Status == 'Completed' : false;
                                              var checkOnHold:Boolean = onhold.selected ? item.Status == 'On Hold' : false;
                                              var checkInProgress:Boolean = inprogress.selected ? item.Status == 'In Progress' : false;
                                              
                                              return checkCompleted || checkOnHold || checkInProgress;
                                          }
                                          else
                                              return true;
                                      }
                                  ]]>
                              </mx:Script>
                              
                              <mx:CheckBox id="completed" label="Completed" click="arrColl.refresh()"/>
                              
                              <mx:CheckBox id="onhold" label="On Hold" click="arrColl.refresh()"/>
                              
                              <mx:CheckBox  id="inprogress" label="In Progress" click="arrColl.refresh()"/>
                              
                              <mx:ArrayCollection id="arrColl" filterFunction="filterFunction">
                                  <mx:Object Status="In Progress" title="java" grade="A"/>
                                  <mx:Object Status="Completed" title="c" grade="B"/>
                                  <mx:Object Status="Suspended" title="c++" grade="C"/>
                                  <mx:Object Status="On Hold" title="flex" grade="D"/>
                                  <mx:Object Status="Completed" title="cobol" grade="E"/>
                                  <mx:Object Status="In Progress" title="python" grade="F"/>
                                  <mx:Object Status="Completed" title="SAP" grade="G"/>
                                  <mx:Object Status="In Progress" title="Oracle" grade="H"/>
                                  <mx:Object Status="On Hold" title="Sybase" grade="I"/>
                                  <mx:Object Status="In Progress" title="HTML" grade="J"/>
                                  <mx:Object Status="In Progress" title="JSP" grade="K"/>
                                  <mx:Object Status="On Hold" title="Servlets" grade="L"/>
                              </mx:ArrayCollection>
                              
                              <mx:DataGrid dataProvider="{arrColl}"/>
                          </mx:Application>

                           

                          Could you try to run this code on a new application and see if it works?

                          • 10. Re: How to filter flex datagrid with 3 three checkboxes?
                            anandbk Level 1

                            Hey Jorge,

                             

                            It works. Thanks a lot.

                             

                            It displays records as per check box selections but it doesnot display any records when none of the checkboxes are checked.

                             

                            I also need ALL records to be displayed when no check box is selected.

                             

                            Kindly help me in this regard.

                             

                            Thanks,

                            Anand.

                            • 11. Re: How to filter flex datagrid with 3 three checkboxes?
                              Jorge Raimundo Level 2

                              Hi Anand.

                               

                              I'm glad it works.

                               

                              As for your request, you just have to change the filter function in order to hanlde with that situation:

                               

                              private function filterFunction(item:Object):Boolean
                              {
                                   if (completed && onhold && inprogress)
                                   {
                                        if (!completed.selected && !onhold.selected && !inprogress.selected)
                                             return true;
                                        else
                                        {
                                             var checkCompleted:Boolean = completed.selected ? item.Status == 'Completed' : false;
                                             var checkOnHold:Boolean = onhold.selected ? item.Status == 'On Hold' : false;
                                             var checkInProgress:Boolean = inprogress.selected ? item.Status == 'In Progress' : false;
                              
                                             return checkCompleted || checkOnHold || checkInProgress;
                                        }
                                    }
                                   else
                                        return true;
                              }
                              

                               

                              Hope it helps,

                              Jorge

                              1 person found this helpful
                              • 12. Re: How to filter flex datagrid with 3 three checkboxes?
                                anandbk Level 1

                                Hey Jorge,

                                 

                                Thats great. Works perfectly.

                                 

                                I have a clarification.

                                Can i use Remote object instead of Arraycollection because in my application data is sent to flex page from spring. So, if yes, then please let me know should it be used,  in same way as it is used now. or any other way?

                                 

                                And also please provide link for internal working of filterFunction if you have any. You have put the code so simple and easy code, so i want to know how actually it works. In case if you dont mind telling brief working of filterFunction it would be a great help.

                                 

                                Thanks,

                                Anand.

                                • 13. Re: How to filter flex datagrid with 3 three checkboxes?
                                  Jorge Raimundo Level 2

                                  Hi Anand.

                                   

                                  The filter function is implemented by the ListCollectionView which has the ArrayCollection and the XMLListCollection as subclasses, so you can use it in those classes.

                                   

                                  You can see the docs here: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/collections/ListColl ectionView.html#filterFunction

                                   

                                  Basically the filter function must return a boolean value that indicates if a given item on the list matches the criteria we want to apply.

                                   

                                  If the criteria is that the item must have a Status equal to "Completed" the function would be just

                                   

                                  private function filterFunction (item:Object):Boolean
                                  {
                                       return item.Status == "Completed";
                                  }
                                  

                                   

                                  Hope it is clear.

                                   

                                  Regarding the application of the filter function to Remote objects, my advice is to process the information recieved in order to place it in an Array Collection.

                                  After getting the data you can process it and create you own objects and put them in an Array Collection.

                                  I never worked with remote objects in Flex 3.5 so I'm not the best person to help you there.

                                   

                                  Best Regards,

                                  Jorge

                                  • 14. Re: How to filter flex datagrid with 3 three checkboxes?
                                    anandbk Level 1

                                    Hey Jorge,

                                     

                                    Thanks for your valuable time and support.

                                     

                                    It was really a great knowledge i recieved from you.

                                     

                                    I have one more requirement in which i have to set these status values (completed, onhold, inprogress) as options of all dropdowns that appear in each row of the datagrid.

                                    I mean, in datagrid i have one more column which will have dropdown for each row of datagrid (i think it is called dropdown itemrenderer). And i have to set all the status values (i have to pick these value directly from the arraycollection itself, but not seperately hardcoding as options for dropdowns) as OPTIONS of each dropdown of rows.

                                     

                                    Secondly, i have to check has any value of any dropdown changed.

                                    i.e If i select other options (other than already selected), then i have pick those modified dropdown values of rows and send to DB. Here i need how to collect all the values of each dropdowns of rows whose values have been changed.

                                     

                                    I would be thankful if you can help me in this complicated handling of datagrid.

                                     

                                     

                                     

                                     

                                    Thanks,

                                    Anand.

                                    • 15. Re: How to filter flex datagrid with 3 three checkboxes?
                                      Jorge Raimundo Level 2

                                      Hello Anand.

                                       

                                      This is a mini application you're asking for, and I don't have that much time, but I'll try to give you some orientations.

                                       

                                      In the data grid you'll have to use an ItemRenderer to show the dropdown.

                                       

                                      You can read about ItemRenderers here:

                                           http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html

                                           http://www.adobe.com/devnet/flex/articles/itemrenderers_pt2.html

                                           http://www.adobe.com/devnet/flex/articles/itemrenderers_pt3.html

                                           http://www.adobe.com/devnet/flex/articles/itemrenderers_pt4.html

                                           http://www.adobe.com/devnet/flex/articles/itemrenderers_pt5.html

                                       

                                      Then, in the ItemRenderer, you'll have to provide a List with the several status options (that list will be the dropdown's dataProvider). Then you'll have to set the dropdown's selectedItem to match the data's status.

                                       

                                      Next you'll have to set an event handler for the dropDown's change event, so that when it chenges you'll reflect this change on the data item.

                                       

                                      If it really changed you can dispatch an event to the application indicating that this item changed and commit that info to the database.

                                       

                                      About using events check this link: http://www.adobe.com/devnet-archive/flex/videotraining/flex3/ (the first two days)

                                       

                                      Hope it helps,

                                      Jorge

                                      1 person found this helpful
                                      • 16. Re: How to filter flex datagrid with 3 three checkboxes?
                                        anandbk Level 1

                                        Hi Jorge,

                                         

                                        Thanks for your valuable info.

                                         

                                        I will look into it.

                                         

                                        Thanks,

                                        Anand