Using a CheckBox to filter items in a DataGrid in Flex

The following example shows how you can filter items in a Flex DataGrid using a CheckBox control, and the ArrayCollection class’s filterFunction property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/12/using-a-combobox-to-filter-items-in-a-datagrid-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.dataGridClasses.DataGridColumn;

            private function toggleFilter():void {
                if (checkBox.selected) {
                    arrColl.filterFunction = processFilter;
                } else {
                    arrColl.filterFunction = null;
                }
                arrColl.refresh();
            }

            private function processFilter(item:Object):Boolean {
                return parseFloat(item.value) == 0;
            }

            private function value_labelFunc(item:Object, col:DataGridColumn):String {
                return item[col.dataField].toFixed(2);
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object name="ColdFusion" value="0.00" />
                <mx:Object name="Dreamweaver" value="0.12" />
                <mx:Object name="Fireworks" value="1.01" />
                <mx:Object name="Flash" value="0" />
                <mx:Object name="Flash Player" value="-0.00" />
                <mx:Object name="Flex" value="0.00" />
                <mx:Object name="Illustrator" value="2.92" />
                <mx:Object name="Lightroom" value="0.32" />
                <mx:Object name="Photoshop" value="0.06" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:Panel status="{arrColl.length}/{arrColl.source.length} item(s)">
        <mx:DataGrid id="dataGrid"
                dataProvider="{arrColl}"
                verticalScrollPolicy="on">
            <mx:columns>
                <mx:DataGridColumn dataField="name" />
                <mx:DataGridColumn dataField="value"
                        labelFunction="value_labelFunc" />
            </mx:columns>
        </mx:DataGrid>
        <mx:ControlBar>
            <mx:CheckBox id="checkBox"
                    label="Filter DataGrid"
                    click="toggleFilter();" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

21 thoughts on “Using a CheckBox to filter items in a DataGrid in Flex

  1. Looks like there’s a typo in the title: “using a combobox to filter items…” when, of course, it’s a checkbox in the code and example.

    Great site, by the way. I’ve been learning a lot from these posts … much appreciated.

  2. Michael Matti,

    Rats! Thanks for the heads up. I changed the article title, but left the URL the same, so it doesn’t break any links or whatever.

    Peter

  3. Thanks your great article.I have translated some contents on flexexamples.com to Chinese on my blog ( http://blog.minidx.com) , in order to be more friendly and easy for chinese users to read. All the translated files contain the original URL and be credited by Peter deHaan. Hope could get your approve.

  4. minidxer,

    That’s great, thanks!
    Yep, everything on the blog is creative commons, so you’re free to use/translate the content as long as you attribute the work and add a link back to this site.

    Thanks,
    Peter

  5. Hi Peter,

    I’m currently doing a filter function in an application. My understanding is that when you try to filter a specific dataField you can do this: “if (item.origin == “WA”)” “origin” is a specific column on a datagrid column. But what if I want to store that datafield column in a variable?

    for example: var custom_datafield:String = “origin” ;
    and do this: if (item.custom_datafield == “WA”) — I am not getting any returned records and it did not give me errors as well. I need your expertise on this.
    Are there any other way to do this?

    In case you are wondering why I need to store the dataField name into a variable is because I am creating a datagrid component that will accept any XML file using only one datagrid and one filter functionality.

    Thanks,
    Arnold

  6. Hi Peter,

    According to my Project, I need to show some more Filters based on the ComboBox Selection,

    First One

    For Example: If User selects the 1st option in the Combo, I need to show few more Option in the Bottom, and if the again selects the other option in the ComboBox, I need to show Different filter based on Selection.

    and second point, Based on the selection of the Filter I need to update the Report by the Update Button.

    Hope Atleast I will get the First Criteria

    Thanks a lot

  7. hye…

    i want to ask u;what if i have multiple checkbox??user can click on multiple checkbox to filter the datagrid.can u show me how the code look like??

    thanks in advance!!

  8. Great site,
    I’ve been learning a lot from these posts
    But i kan’t find a posts on combobox DataGrid filter
    any tips

  9. I’ve been using many of your articles to aid in my flex development. Cudos to you for your posts. Keep them coming!

  10. what about using a combo box to filter? I tried to set one up, but it only repeats the first item that I want filtered it doesn’t check the rest of the XML file.

  11. Good example. I’m using a XMLListCollection and have filtering working. However I want to add the same type of label you have for the panel status: {arrColl.length}/{arrColl.source.length}. My XMLListCollection is called tixXML and I can get the displayed size (tixXML.length) however how do I get the length of the unfiltered tixXML? After I filter the results tixXML.length changes to the number of displayed results however I also want the length of the unfiltered results? Do I need to set a var to the original amount or is there a property I can access?

    Thanks in advance.

  12. Stefan Bistram and site admin:

    Great examples, i needed something to search a data grid, but filtering the ArrayCollection resulted in a much more elegant solution.

    Thanks

    1. @Javier Gomez,

      Try something like this:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" color="#000000"
                      fontWeight="bold" width="100%" height="100%" alpha="1.0" backgroundGradientAlphas="[1.0, 1.0]"
                      backgroundGradientColors="[#FFFFFF, #FFFFFF]"
                      initialize="proyects.send();">
       
          <mx:Script>
              <![CDATA[
                  import mx.controls.Alert;
       
                  private function toggleCategory(type:String):void {
                      xmlListColl.refresh();
                  }
       
                  private function xmlListColl_filterFunc(item:Object):Boolean {
                      if ((item.@type == "restaurant") && restaurantCh.selected) {
                          return true;
                      }
                      if ((item.@type == "bar") && barCh.selected) {
                          return true;
                      }
                      if ((item.@type == "disco") && discoCh.selected) {
                          return true;
                      }
                      return false;
                  }
              ]]>
          </mx:Script>
       
          <mx:XMLListCollection id="xmlListColl" source="{proyects.lastResult.marker}" filterFunction="xmlListColl_filterFunc" />
       
          <mx:HTTPService id="proyects" url="markersall.xml" resultFormat="e4x" />
       
          <mx:Panel width="220" height="136" layout="absolute" title="Tipo de proyectos" cornerRadius="10" right="10" top="40" borderColor="#FF7225" backgroundColor="#FFC34E" alpha="1.0" borderAlpha="100">
              <mx:CheckBox id="restaurantCh" x="10" y="10" label="Proyectos en venta" fillAlphas="[1.0, 1.0, 1.0, 1.0]" fillColors="[#F27CE6, #FF00FF, #FF00FF, #FF00FF]"
                           selected="true" change="toggleCategory('restaurant');" borderColor="#000000"/>
              <mx:CheckBox id="barCh" x="10" y="36" label="Proyectos en desarrollo" fillAlphas="[1.0, 1.0, 1.0, 1.0]" fillColors="[#A6ACFF, #A6ACFF]"
                           selected="true" change="toggleCategory('bar');" borderColor="#000000"/>
              <mx:CheckBox id="discoCh" x="10" y="62" label="Proyectos terminados" fillAlphas="[1.0, 1.0, 1.0, 1.0]" fillColors="[#927474, #927474, #927474, #927474]"
                           selected="true" change="toggleCategory('disco');" borderColor="#000000"/>
          </mx:Panel>
          <mx:Panel width="220" layout="absolute" title="Proyectos" cornerRadius="10" right="10" borderColor="#FF7225" bottom="20" top="185" borderAlpha="100">
              <mx:List x="-0.05" y="0.1" dataProvider="{xmlListColl}" enabled="true" labelField="@name" width="199.6" height="100%" backgroundColor="#FFC34E" borderThickness="0" themeColor="#CACACA" id="proyectlist" />
          </mx:Panel>
       
      </mx:Application>

      Peter

Comments are closed.