Scrolling functionality in Flex Datagrid header

Question

I need to add left and right arrows for specific columns in Flex Datagrid. On click of left and right arrows the columns below should scroll displaying other columns. The first column of Datagrid is always visible(fixed). Say column 1,2,3,4 are visible now. On click of right arrow, column 1, 5, 6, 7 shoulc display. Basically I need a scroller like functionality on Datagrid header.

Please let me know as how to achieve it.

you means when you click right arrow, the 2, 3, 4's head text is changed too?use state to change content, i think. — simmone

vengatesh vengatesh · Accepted Answer · 2012-11-19T11:21:19

here is the sample code that may help you.

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

<mx:Script>
    <![CDATA[
    import mx.collections.ArrayCollection;

    [Bindable]
    private var dpFlat:ArrayCollection = new ArrayCollection([
    {Region:"Southwest", Territory:"Arizona", 
    Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000}, 
    {Region:"Southwest", Territory:"Arizona", 
    Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},  
    {Region:"Southwest", Territory:"Central California", 
    Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},  
    {Region:"Southwest", Territory:"Nevada", 
    Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},  
    {Region:"Southwest", Territory:"Northern California", 
    Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000}, 
    {Region:"Southwest", Territory:"Northern California", 
    Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},  
    {Region:"Southwest", Territory:"Southern California", 
    Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000}, 
    {Region:"Southwest", Territory:"Southern California", 
    Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}
    ]);
    ]]>
</mx:Script>

<mx:DataGrid id="dg" lockedColumnCount="1" width="500" height="50%" horizontalScrollPolicy="on" rowCount="5" horizontalCenter="0" verticalCenter="0" dataProvider="{dpFlat}">
    <mx:columns>
        <mx:DataGridColumn id="col" width="100" dataField="Region" headerText="Region" >
            <mx:headerRenderer  >
                <mx:Component id="cmp">
                    <mx:Image width="25" height="25" source="{imgSource}" click="image1_clickHandler(event)" >
                        <mx:Script>
                            <![CDATA[
                                import mx.core.Application;
                                [Bindable]
                                private var imgSource:String = "arrow_left.gif";
                                var flag:Boolean;
                                protected function image1_clickHandler(event:MouseEvent):void
                                {

                                    if(flag)
                                    {
                                        flag = false;
                                        Application.application.dg.horizontalScrollPosition = 0;
                                        imgSource = "arrow_left.gif";

                                    }
                                    else
                                    {
                                        flag = true;
                                        imgSource = "arrow_right.gif";
                                        Application.application.dg.horizontalScrollPosition = 2

                                    }
                                }
                            ]]>
                        </mx:Script>
                    </mx:Image>

                </mx:Component>
            </mx:headerRenderer>
        </mx:DataGridColumn>
        <mx:DataGridColumn id="col1" width="300" dataField="Territory" headerText="Territory"/>
        <mx:DataGridColumn id="col2" width="300" dataField="Territory_Rep" headerText="Territory_Rep"/>
        <mx:DataGridColumn id="col3" width="300" dataField="Actual" headerText="Actual" />
        <mx:DataGridColumn id="col4" width="300" dataField="Estimate" headerText="Estimate" />
    </mx:columns>
</mx:DataGrid>

Scrolling functionality in Flex Datagrid header

1 Answers