Flex3 DataGrid scroll programmatically

by unotter

I want to scroll NOT one by one, but I need to scroll some columns at once like clicking empty horizontalscrollbar area.
How to do?

http://stackoverflow.com/questions/31672194/mx-datagrid-programmatically-scrolling-some-columns-at-once

ボタンを押したときに1つずつスクロールするのではなく、グリッドのスクロールバーの空いた所をクリックした時の様に、見えていないカラムへと一気にスクロールさせたいのですがどのようにすれば良いでしょうか。

♥0 | Line 64 | Modified 2015-07-28 17:59:58 | MIT License

[Download] [Fullscreen] [Reload]

ActionScript3 source code

/**
 * Copyright unotter ( http://wonderfl.net/user/unotter )
 * MIT License ( http://www.opensource.org/licenses/mit-license.php )
 * Downloaded from: http://wonderfl.net/c/hOGt
 */

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
    <mx:Script>
        <![CDATA[
            import mx.events.ItemClickEvent;
            import mx.collections.ArrayCollection;
            
            private var arr:ArrayCollection = new ArrayCollection([
                {COL1:"aaa",COL2:"bbb",COL3:"ccc",COL4:"ddd",COL5:"eee",COL6:"fff",COL7:"ggg",COL8:"hhh",COL9:"iii",COL10:"jjj",COL11:"kkk",COL12:"lll",COL13:"mmm",COL14:"nnn",COL15:"ooo",COL16:"ppp",COL17:"qqq",COL18:"rrr",COL19:"sss",COL20:"ttt"}
            ]);
            public function init(): void
            {
                scrollController.dataProvider=["|<", "<", ">", ">|"];
                grid.dataProvider = arr;
            }
            
            public function doScroll(event: ItemClickEvent): void
            {
                if (event.index ==0)
                {
                    // force move to left end.
                    grid.horizontalScrollPosition = 0;
                }
                else if (event.index ==1){
                    // move left one by one
                    if (grid.horizontalScrollPosition > 0){
                        grid.horizontalScrollPosition -= 1;
                    }
                }
                else if (event.index ==2){
                    // move right one by one
                    if (grid.horizontalScrollPosition < (grid.columnCount-1)){
                        grid.horizontalScrollPosition += 1;
                    }
                }
                else{
                    // force move to right end.
                    if (grid.horizontalScrollPosition < (grid.columnCount-1)){
                        grid.horizontalScrollPosition = grid.columnCount-1;
                    }
                }
            }

        ]]>
    </mx:Script>
    <mx:ButtonBar id="scrollController" y="0" itemClick="doScroll(event)"/>
    <mx:DataGrid id="grid" y="30" width="340" horizontalScrollPolicy="on">
        <mx:columns>
            <mx:DataGridColumn headerText="COL1" dataField="COL1" width="100"/>
            <mx:DataGridColumn headerText="COL2" dataField="COL2" width="100"/>
            <mx:DataGridColumn headerText="COL3" dataField="COL3" width="100"/>
            <mx:DataGridColumn headerText="COL4" dataField="COL4" width="100"/>
            <mx:DataGridColumn headerText="COL5" dataField="COL5" width="100"/>
            <mx:DataGridColumn headerText="COL6" dataField="COL6" width="100"/>
            <mx:DataGridColumn headerText="COL7" dataField="COL7" width="100"/>
            <mx:DataGridColumn headerText="COL8" dataField="COL8" width="100"/>
            <mx:DataGridColumn headerText="COL9" dataField="COL9" width="100"/>
            <mx:DataGridColumn headerText="COL10" dataField="COL10" width="100"/>
            <mx:DataGridColumn headerText="COL11" dataField="COL11" width="100"/>
            <mx:DataGridColumn headerText="COL12" dataField="COL12" width="100"/>
            <mx:DataGridColumn headerText="COL13" dataField="COL13" width="100"/>
            <mx:DataGridColumn headerText="COL14" dataField="COL14" width="100"/>
            <mx:DataGridColumn headerText="COL15" dataField="COL15" width="100"/>
            <mx:DataGridColumn headerText="COL16" dataField="COL16" width="100"/>
            <mx:DataGridColumn headerText="COL17" dataField="COL17" width="100"/>
            <mx:DataGridColumn headerText="COL18" dataField="COL18" width="100"/>
            <mx:DataGridColumn headerText="COL19" dataField="COL19" width="100"/>
            <mx:DataGridColumn headerText="COL20" dataField="COL20" width="100"/>
        </mx:columns>
    </mx:DataGrid>
</mx:Application>