December 11th, 2007 by Kyle
Tags: , , , , , , , ,
Posted in: Flex


I had a customer asking how to do this.
Sorting the datagrid sorts the underlying dataprovider.
Remember that things like ArrayCollections are just essentially views of the data. So adding an element to the underlying data, regardless of the position at which you add the new item, will not affect its position in the “view”. It will get added in its sorted position if the view is showing sorted data. The workaround to this is show in the simple sample below:

<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" creationcomplete="init()">
    <mx:script>
        <!–[CDATA[
            import mx.collections.ArrayCollection;

            public var objs:ArrayCollection = new ArrayCollection();
            /*
             * initialize the dataprovider
             */

            private function init():void {

                var obj:Object = new Object();
                obj.name = "carry";
                objs.addItem(obj);

                obj = new Object();
                obj.name = "fred";
                objs.addItem(obj);

                obj = new Object();
                obj.name = "henry";
                objs.addItem(obj);

                obj = new Object();
                obj.name = "issac";
                objs.addItem(obj);

                obj = new Object();
                obj.name = "mary";
                objs.addItem(obj);

                obj = new Object();
                obj.name = "tom";
                objs.addItem(obj);

                obj = new Object();
                obj.name = "tom2";
                objs.addItem(obj);

                dg.dataProvider = objs;
            }

            import flash.utils.ByteArray;

            private function clone(source:Object):*
            {
                var myBA:ByteArray = new ByteArray();
                myBA.writeObject(source);
                myBA.position = 0;
                return(myBA.readObject());
            }

            private function addObj():void{

                var temp:Array = clone(objs.toArray());
                objs=new ArrayCollection(temp);
                dg.dataProvider=objs;

                var obj:Object = new Object();
                obj.name=;
                objs.addItemAt(obj, 0)

            }

        ]]–>
    </mx:script>
    <mx:button width="150" label="Add New Row" click="addObj()">
    <mx:datagrid id="dg" editable="true" width="50%" height="80%">
    <mx:columns>
        <mx:datagridcolumn headertext="Name" datafield="name">
            editable="true" />
    </mx:datagridcolumn>
</mx:columns>                                                  

</mx:datagrid>
</mx:button></mx:application>

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

This movie requires Flash Player 9



2 Comments »

I had a customer ask how they could use a button itemRenderer in a tile list, have the buttons toggle, and keep track of all the toggled buttons so one could easily clear all the toggled buttons. Here is what I came up with:

The key to this is that if your TileList has a dataprovider that is an array collection, within an itemRenderer, each item’s BaseListData will have a UUID.
If you extend the Tilelist and add a public member that is an arrayCollection that is used to contain all the UUIDs of toggled buttons, then management of those toggled buttons become quite easy.

Here is my simple extension to TileList:

<?xml version="1.0" encoding="utf-8"?>
<mx:TileList xmlns:mx="http://www.adobe.com/2006/mxml"
    initialize="acToggledButtons = new ArrayCollection()">

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            public var acToggledButtons:ArrayCollection;
           
            public function removeAll():void{
                acToggledButtons.removeAll();
                this.invalidateList();
            }
        ]]>
    </mx:Script>
</mx:TileList>
 

Read the rest of this post»



1 Comment »