Row order in datagrid in Flex

Question

I have a datagrid and it lists several rows as

seqno | NAME  | COMPANY
1     | BOB   | D&T
2     | Jenny | M&Y
3     | Jane  | D&T

You can have buttons as [ MOVE UP] and [ MOVE DOWN], so when I select a row in the datagrid and click one of those buttons, the order changes and seqno is updated accordingly.

Value, if I select Janeand press the [ MOVE UP] button , the new order will be:

seqno | NAME  | COMPANY
1     | BOB   | D&T
2     | Jane  | D&T
3     | Jenny | M&Y

All help is appreciated

Answer 1

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">

    <local:ControlDataGrid>
        <local:dataProvider>
            <mx:ArrayCollection>
                <mx:Object a="Anny" b="43"/>
                <mx:Object a="Jenny" b="11"/>
                <mx:Object a="Den" b="9"/>
                <mx:Object a="Marty" b="5"/>
                <mx:Object a="Mary" b="-1"/>
            </mx:ArrayCollection>
        </local:dataProvider>
        <local:columns>
            <mx:DataGridColumn dataField="a"/>
            <mx:DataGridColumn dataField="b"/>
            <mx:DataGridColumn itemRenderer="{new ClassFactory(ControlItemRenderer)}"/>
        </local:columns>
    </local:ControlDataGrid>

</mx:Application>

Source ControlDataGrid.as:

package
{
import mx.collections.ArrayCollection;
import mx.controls.DataGrid;

public class ControlDataGrid extends DataGrid
{
    public function ControlDataGrid()
    {
        addEventListener(ControlEvent.UP, upHandler);
        addEventListener(ControlEvent.DOWN, downHandler);
    }

    private function moveRow(rowIndex:int, delta:int):void
    {
        var collection:ArrayCollection = ArrayCollection(dataProvider);
        collection.addItemAt(collection.removeItemAt(rowIndex), rowIndex + delta);
    }

    private function upHandler(event:ControlEvent):void
    {
        moveRow(event.rowIndex, -1);
    }

    private function downHandler(event:ControlEvent):void
    {
        moveRow(event.rowIndex, 1);
    }
}
}

Source for ControlItemRenderer.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
    implements="mx.controls.listClasses.IDropInListItemRenderer">

    <mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.controls.DataGrid;
        import mx.controls.listClasses.BaseListData;
        import mx.controls.listClasses.IDropInListItemRenderer;
        import mx.events.CollectionEvent;

        [Bindable]
        private var upEnabled:Boolean = false;

        [Bindable]
        private var downEnabled:Boolean = false;

        private var _listData:BaseListData;

        [Bindable("dataChange")]
        public function get listData():BaseListData
        {
            return _listData;
        }

        public function set listData(value:BaseListData):void
        {
            _listData = value;
            dataProvider = _listData ? ArrayCollection(DataGrid(_listData.owner).dataProvider) : null;
            commitChanges();
        }

        private var _dataProvider:ArrayCollection;

        private function get dataProvider():ArrayCollection
        {
            return _dataProvider;
        }

        private function set dataProvider(value:ArrayCollection):void
        {
            if (_dataProvider == value)
                return;

            if (_dataProvider)
                _dataProvider.removeEventListener(CollectionEvent.COLLECTION_CHANGE,
                    dataProvider_collectionChangeHandler);

            _dataProvider = value;

            if (_dataProvider)
                _dataProvider.addEventListener(CollectionEvent.COLLECTION_CHANGE,
                    dataProvider_collectionChangeHandler);
        }

        private function commitChanges():void
        {
            if (!_listData || !_dataProvider)
            {
                upEnabled = false;
                downEnabled = false;
                return;
            }

            upEnabled = _listData.rowIndex > 0;
            downEnabled = _listData.rowIndex < _dataProvider.length - 1;
        }

        private function dispatch(type:String):void
        {
            dispatchEvent(new ControlEvent(type, _listData.rowIndex))
        }

        private function dataProvider_collectionChangeHandler(event:CollectionEvent):void
        {
            commitChanges();
        }

    ]]>
    </mx:Script>

    <mx:LinkButton label="Up" visible="{upEnabled}" includeInLayout="{upEnabled}"
        click="dispatch(ControlEvent.UP)" textDecoration="underline"/>

    <mx:LinkButton label="Down" visible="{downEnabled}" includeInLayout="{downEnabled}"
        click="dispatch(ControlEvent.DOWN)" textDecoration="underline"/>

</mx:HBox>

Source ControlEvent.as:

package
{
import flash.events.Event;

public class ControlEvent extends Event
{

    public static const UP:String = "up";

    public static const DOWN:String = "down";

    public function ControlEvent(type:String, rowIndex:int)
    {
        super(type, true);

        this.rowIndex = rowIndex;
    }

    public var rowIndex:int;
}
}

Answer 2

, . , dataProvider. ; , . , DataProvider.

, Flextras DataSorter, DataGrid, .

http://www.flextras.com/?event=ProductHome&ProductID=7