2 Replies Latest reply on May 13, 2009 9:17 AM by Gregory Lafrance

    Datagrid

    Draconic-Pride

      How do I change what is displayed in a datagrid depending on what checkboxes are selected?

       

      (Be gentle with me, I'm very new to the world of Flex!)

        • 1. Re: Datagrid
          EvolvedDSM Level 2

          What you probably want is to use a filterFunction on your dataProvider (arrayCollection most likely).  I use checkboxes, text search, or dropdown combo-boxes depending on the need to filter.

           

          Try this article, as it will explain with example rather than me posting a whole bunch of code from a previous project.

           

          http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postI d=8045

          • 2. Re: Datagrid
            Gregory Lafrance Level 6

            A simple example of one way to do this:

             

            ------------------ mainapp.mxml -----------------

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
              creationComplete="dataRequest.send();filterDataGrid();">
              <mx:Script>
                <![CDATA[
                  import mx.rpc.events.ResultEvent;
                  import mx.collections.XMLListCollection;
                  import mx.controls.CheckBox;
                  
                  [Bindable] private var xlc:XMLListCollection;
                  [Bindable] private var displayedxlc:XMLListCollection;
                  [Bindable] private var categories:XMLListCollection;
                  
                  private function processResult(evt:ResultEvent):void{
                    xlc = new XMLListCollection(evt.result..item as XMLList);
                    categories = new XMLListCollection(evt.result..cat);
                  }
                  
                  private function filterDataGrid():void{
                    var tempxlc:XMLListCollection = new XMLListCollection();
                    for each(var xml:XML in xlc){
                      for each( var cb:CheckBox in chbx){
                        if(xml.category == cb.label && cb.selected){
                          tempxlc.addItem(xml);
                        }          
                      }
                    }
                    displayedxlc = tempxlc;
                  }
                ]]>
              </mx:Script>
            
              <mx:HTTPService id="dataRequest" url="data.xml" resultFormat="e4x"
                result="processResult(event)"/> 
              <mx:HBox>
                <mx:Repeater id="rp" dataProvider="{categories}">
                  <mx:CheckBox id="chbx" label="{rp.currentItem}" change="filterDataGrid()"/>
                </mx:Repeater>
              </mx:HBox> 
              <mx:DataGrid dataProvider="{displayedxlc}" width="300" height="300">
                <mx:columns>
                  <mx:DataGridColumn dataField="food" headerText="Food" width="200"/>
                  <mx:DataGridColumn dataField="category" headerText="Category" width="100"/>
                </mx:columns>
              </mx:DataGrid>
            </mx:Application>
            

            ------------- data.xml ----------------

             

            <?xml version="1.0" encoding="utf-8"?>
            <foods>
              <categories>
                <cat>vegetable</cat>
                <cat>meat</cat>
                <cat>beverage</cat>
                <cat>dessert</cat>
              </categories>
              <item>
                <category>vegetable</category>
                <food>beans</food>
              </item>
              <item>
                <category>vegetable</category>
                <food>carrots</food>
              </item>
              <item>
                <category>vegetable</category>
                <food>pepper</food>
              </item>
              <item>
                <category>meat</category>
                <food>beef</food>
              </item>
              <item>
                <category>meat</category>
                <food>chicken</food>
              </item>
              <item>
                <category>meat</category>
                <food>pork</food>
              </item>
              <item>
                <category>beverage</category>
                <food>milk</food>
              </item>
              <item>
                <category>beverage</category>
                <food>juice</food>
              </item>
              <item>
                <category>beverage</category>
                <food>soda</food>
              </item>
              <item>
                <category>dessert</category>
                <food>cake</food>
              </item>
              <item>
                <category>dessert</category>
                <food>cookie</food>
              </item>
              <item>
                <category>dessert</category>
                <food>pie</food>
              </item>
            </foods>
            
            

             

            If this post answers your question of helps, please mark it as such.