Using the to ArrayCollection's filterFunction

source : here
and here

Problem Summary
Finding a way to to filter data in a DataGrid regardless of the data in question case.

 Solution Summary

Use ArrayCollection's filterFunction and compare the data's string with a string you provide using RegEx to disregard the strings case (upper, lower or whatever)

Explanation

   1. First create an array.
   2. Pass that array to an ArrayCollection.
   3. Pass ArrayCollection  as DataProvider for a DataGrid

   4. Create a textInput
   5. Create a function that will filter data from the textInput text, return type Boolean

   6. Now call the filterFunction method of the ArrayCollection class, pass the filterFunction to created
   7. create an Event listener for knowing when to filter (eg. textinput, click)

   8. create a reset button for clearing the filter.
   9. That's essentially it. See example and code to see the full scope and that should explain it self


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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init();" viewSourceURL="srcview/index.html">
    <mx:Script>
        <![CDATA[
            import mx.collections.*;
           
           
            private var collectionArray:Array;
            [Bindable]
            private var collectionData:ArrayCollection;
           
            private var selectedName:String = "first";
            import mx.controls.Alert;
            import mx.events.ItemClickEvent;
           
            private function init():void
            {
                collectionArray = [{first: 'Dave', last: 'Matthews'},
                                {first: 'Dave', last: 'Chappelle'},
                                    {first: 'Amy', last: 'Grant'},
                                    {first: 'Bilbo', last: 'Baggins'},
                                    {first: 'Jessica', last: 'Tandy'},
                                    {first: 'Jessica', last: 'Simpson'},
                                    {first: 'Paris', last: 'Hilton'}];
                collectionData = new ArrayCollection(collectionArray);
            }
           
             public function filter():void {
                
                
                   collectionData.filterFunction = filterFirst;
                   collectionData.refresh();
                    
            }
           
             public function filterReset():void {
                
                
                   collectionData.filterFunction = null;
                   collectionData.refresh();
                    
            }
           
            private function filterFirst(item:Object):Boolean
            {
                return item[selectedName].match(new RegExp(searchField.text, 'i'))
            }
           
            private function search():void
            {
                if(searchField.text !='')
                {
                    filter()
                }
                else
                {
                    filterReset()
                }
            }
           
           
   
            private function handleCard(event:ItemClickEvent):void {
               
                   selectedName = event.currentTarget.selectedValue as String;
                    
              
            }
           
            private function eraseText(event:MouseEvent):void
            {
                searchField.text ='';
            }
           
        ]]>

    </mx:Script>
    <mx:DataGrid id="nameGrid" dataProvider="{collectionData}"  height="210"/>
    <mx:VBox y="{nameGrid.height + 10}">
        <mx:TextInput tabEnabled="true" tabIndex="1" text="Search First Name" id="searchField" toolTip="Filter First Name"  change="search()" rollOver="eraseText(event)" />
    <mx:HBox>
        <mx:RadioButtonGroup id="nameGroup"  itemClick="handleCard(event)"/>

        <mx:RadioButton tabEnabled="true" tabIndex="2" label="first" selected="true" groupName="nameGroup"/>
        <mx:RadioButton tabEnabled="true" tabIndex="3" label="last" groupName="nameGroup" />
        <mx:Button tabEnabled="true" tabIndex="4" click="searchField.text='';search()"   label="Reset" />
    </mx:HBox>
    </mx:VBox>
   
</mx:Application>

Flex - Export DataGrid data as CSV using DataGridDataExporter Class

source : flashenabled.wordpress.com/2007/08/03/flex-export-datagrid-data-as-csv-using-datagriddataexporter-class

and here

Datagrid runtime item renderers

source : here

Step 1.

Create the basic item renderer. One of the things I needed to accomplish with my item renderer was the ability to add it to different columns (ie the dataField was not always the same). This meant I needed a way from within the renderer to determine what column it was bound to so I could get and display the correct data. To do this the renderer needs to implement the IDropInListItemRenderer. This interface allows the renderer to have access to information about the list and column it is in via the BaseListData and DataGridListData classes. The DataGridListData gives you everything you need to get the data required to make a flexible, reusable renderer.

Here is my basic image item renderer. Nothing to exciting, but it is very reusable. I can drop this into any datagrid to render an image column and it will work.

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" 
   implements="mx.controls.listClasses.IDropInListItemRenderer">

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

      import mx.controls.listClasses.BaseListData;
         
      // Make the listData property bindable.
          [Bindable("dataChange")]

      private var _listData : BaseListData;    
         
      
      public function get listData() : BaseListData

      {
         return _listData;            
      }                                        
   
      public function set listData( value : BaseListData ) : void

      {
         _listData = value;
            
      }
      ]]>
   </mx:Script>

   <mx:Image source="{data[(DataGridListData(listData).dataField)]}"/>
</mx:Canvas>

Step 2.

Modify the renderer so that it can be added at runtime. To do this the renderer needs to implement the IFactory interface. This will allow the renderer to be added at any point during runtime. Without implementing this interface it won't work, period. Below is the code to implement the interface.

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" 
   implements="mx.controls.listClasses.IDropInListItemRenderer, mx.core.IFactory">

public function newInstance():*
{
return new ImageRenderer();
}

Step 3.

The code to change a column at runtime from a basic column to an item renderer column. Get the columns from the datagrid, modify the column you are interested in and then reassign the columns to the datagrid. Notice that when you set the column's itemRenderer value you must create a new instance of the desired item renderer.

private function switchStatusColumn(event:MouseEvent):void
{
var cols:Array = users_dg.columns;
var col:DataGridColumn = cols[1] as DataGridColumn;
col.itemRenderer = new CheckBoxRenderer();
users_dg.columns = cols;
}

Step 4.

The code to add a new column with an item renderer at runtime. This is almost identical to modifying an existing column. The only difference is that we push the new column into the columns array.

private function addImageColumn(event:MouseEvent):void
{
var cols:Array = users_dg.columns;
var col:DataGridColumn = new DataGridColumn();
col.itemRenderer = new ImageRenderer();
col.dataField = 'emoticon';
col.headerText = 'Image';
cols.push(col);
users_dg.columns = cols;
}

Overview Flex Datagrid Component - Flex Tutorials

source: here

Flex DataGrid Paging Example with Source

http://therush.wordpress.com/2007/01/06/flex-datagrid-printing/

== quote ==
Many of you have requested the source to my Flex DataGrid paging example. Here it is http://develop.gurufaction.com/src/App.mxml and the example application can be viewed here http://develop.gurufaction.com/App.swf

How To Use An ArrayCollection As The Data Provider For The Flex 2 Tree Control

using arraycollection as dataprovider for datagrid in flex
see here :
http://www.brucephillips.name/blog/index.cfm/2007/1/1/How-To-Use-An-ArrayCollection-As-The-Data-Provider--For-The-Flex-2-Tree-Control