October 26th, 2007 by Kyle
Tags: , , , , , ,
Posted in: Flex


I was helping a customer with a simple sample and couldn’t find one that was specifically what I needed. The docs did have a sample for filtering an arraycollection bound to a combobox (I think) and this wasn’t much of a stretch, but I thought it would be useful to post the sample for the datagrid scenario so that it was no stretch.

Here is the application code:

<mx:application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:script>
        <!–[CDATA[
            import mx.collections.*;
            import mx.events.ItemClickEvent;            

            private var selectedRegion:String;

            public function regionFilterFunc(item:Object):Boolean {
                if (selectedRegion=="all")
                    return true
                else
                    return item.region == selectedRegion;
            }

            // Function to apply the filter function the ICollectionView.
            public function filterAC(event:ItemClickEvent):void {
                selectedRegion=event.label;
                myAC.filterFunction=regionFilterFunc;
                //Refresh the collection view to apply the filter.
                myAC.refresh();
            }

        ]]–>
    </mx:script>

    <!– An ArrayCollection with an array of objects. –>
    <mx:arraycollection id="myAC">
        <mx:array id="myArray">
            <mx:object state="LA" city="Baton Rouge" region="west">
            <mx:object state="NH" city="Concord" region="east">
            <mx:object state="TX" city="Austin" region="west">
            <mx:object state="MA" city="Boston" region="east">
            <mx:object state="AZ" city="Phoenix" region="west">
            <mx:object state="OR" city="Salem" region="west">
            <mx:object state="FL" city="Tallahassee" region="east">
            <mx:object state="MN" city="Saint Paul" region="east">
            <mx:object state="NY" city="Albany" region="east">
        </mx:object>
    </mx:object>

    <mx:togglebuttonbar id="tbb" horizontalgap="5" itemclick="filterAC(event);">
            <mx:dataprovider>
                <mx:array>
                    <mx:string>all</mx:string>
                    <mx:string>east</mx:string>
                    <mx:string>west</mx:string>
                </mx:array>
            </mx:dataprovider>
        </mx:togglebuttonbar>

    <mx:datagrid id="dg" width="100%" height="100%" rowcount="5" dataprovider="{myAC}">
        <mx:columns>
            <mx:datagridcolumn datafield="state" headertext="State">
            <mx:datagridcolumn datafield="city" headertext="City">
            <mx:datagridcolumn datafield="region" headertext="region">
        </mx:datagridcolumn>
    </mx:datagridcolumn>

</mx:datagridcolumn>
</mx:columns></mx:datagrid></mx:object></mx:object></mx:object></mx:object></mx:object></mx:object></mx:object></mx:array></mx:arraycollection></mx:application>

Here is the running sample:

This movie requires Flash Player 9

Browse the source of this example.
Download a zipfile containing the source to this sample.




3 Comments »

April 17th, 2007 by Kyle
Tags: , , , , , , , ,
Posted in: ActionScript, Flex


If in the dataGrid control you set showHeader = false and if the dataProvider has no items in it, then the vertical column lines don’t show up.
The vertical column separator lines only appear when the dataProvider has items populating the grid (or if there is no data and showHeader=true).
In the Datagrid code, drawing the vertical column separator lines is keyed off of the listData, which would have a “row 0” containing the header row if the headers where to be visible.
The solution to this is to extend the datagrid and override the drawLinesAndColumnBackgrounds method in which you can iterate over the column array rather than the listItems to draw the vertical lines.

Read the rest of this post»




No Comments »