Setting the horizontal scrollbar policy on a DataGrid control in Flex

The following example shows how you can set the horizontal scrollbar policy on a Flex DataGrid control by setting the horizontalScrollPolicy property to one of the constants in the mx.core.ScrollPolicy class.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/27/setting-the-horizontal-scrollbar-policy-on-a-datagrid-control-in-flex/ -->
<mx:Application name="DataGrid_horizontalScrollPolicy_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.core.ScrollPolicy;
        ]]>
    </mx:Script>

    <mx:XML id="xmlDP" source="data/dp.xml" />

    <mx:Array id="arr">
        <mx:String>{ScrollPolicy.AUTO}</mx:String>
        <mx:String>{ScrollPolicy.OFF}</mx:String>
        <mx:String>{ScrollPolicy.ON}</mx:String>
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="horizontalScrollPolicy:">
                <mx:ComboBox id="comboBox"
                        dataProvider="{arr}" />
            </mx:FormItem>
        </mx:Form>
        <mx:Spacer width="100%" />
        <mx:Button label="Set dataProvider"
                click="dataGrid.dataProvider = xmlDP.row;" />
        <mx:Button label="Clear dataProvider"
                click="dataGrid.dataProvider = [];" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid"
            horizontalScrollPolicy="{comboBox.selectedItem}"
            width="100%"
            height="100%" />

</mx:Application>

View source is enabled in the following example.

You can also set the horizontalScrollPolicy property using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/27/setting-the-horizontal-scrollbar-policy-on-a-datagrid-control-in-flex/ -->
<mx:Application name="DataGrid_horizontalScrollPolicy_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;
            import mx.core.ScrollPolicy;

            private function comboBox_change(evt:ListEvent):void {
                var value:String = comboBox.selectedItem.toString();
                dataGrid.horizontalScrollPolicy = value;
            }
        ]]>
    </mx:Script>

    <mx:XML id="xmlDP" source="data/dp.xml" />

    <mx:Array id="arr">
        <mx:String>{ScrollPolicy.AUTO}</mx:String>
        <mx:String>{ScrollPolicy.OFF}</mx:String>
        <mx:String>{ScrollPolicy.ON}</mx:String>
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="horizontalScrollPolicy:">
                <mx:ComboBox id="comboBox"
                        dataProvider="{arr}"
                        selectedIndex="1"
                        change="comboBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
        <mx:Spacer width="100%" />
        <mx:Button label="Set dataProvider"
                click="dataGrid.dataProvider = xmlDP.row;" />
        <mx:Button label="Clear dataProvider"
                click="dataGrid.dataProvider = [];" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid"
            horizontalScrollPolicy="off"
            width="100%"
            height="100%" />

</mx:Application>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/27/setting-the-horizontal-scrollbar-policy-on-a-datagrid-control-in-flex/ -->
<mx:Application name="DataGrid_horizontalScrollPolicy_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.core.ScrollPolicy;
            import mx.containers.ApplicationControlBar;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.controls.Button;
            import mx.controls.ComboBox;
            import mx.controls.DataGrid;
            import mx.controls.Spacer;
            import mx.events.ListEvent;

            private var arr:Array;
            private var comboBox:ComboBox;
            private var setBtn:Button;
            private var clrBtn:Button;
            private var dataGrid:DataGrid;

            private function init():void {
                arr = [];
                arr.push(ScrollPolicy.AUTO);
                arr.push(ScrollPolicy.OFF);
                arr.push(ScrollPolicy.ON);

                comboBox = new ComboBox();
                comboBox.dataProvider = arr;
                comboBox.addEventListener(ListEvent.CHANGE, comboBox_change);

                setBtn = new Button();
                setBtn.label = "Set dataProvider";
                setBtn.addEventListener(MouseEvent.CLICK, setBtn_click);

                clrBtn = new Button();
                clrBtn.label = "Clear dataProvider";
                clrBtn.addEventListener(MouseEvent.CLICK, clrBtn_click);

                var spacer:Spacer = new Spacer();
                spacer.percentWidth = 100;

                var formItem:FormItem = new FormItem();
                formItem.label = "horizontalScrollPolicy:";
                formItem.addChild(comboBox);

                var form:Form = new Form();
                form.styleName = "plain";
                form.addChild(formItem);

                var appControlBar:ApplicationControlBar;
                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(form);
                appControlBar.addChild(spacer);
                appControlBar.addChild(setBtn);
                appControlBar.addChild(clrBtn);
                addChildAt(appControlBar, 0);

                dataGrid = new DataGrid();
                dataGrid.percentWidth = 100;
                dataGrid.percentHeight = 100;
                addChild(dataGrid);
            }

            private function comboBox_change(evt:ListEvent):void {
                var value:String = comboBox.selectedItem.toString();
                dataGrid.horizontalScrollPolicy = value;
            }

            private function setBtn_click(evt:MouseEvent):void {
                dataGrid.dataProvider = xmlDP.row;
            }

            private function clrBtn_click(evt:MouseEvent):void {
                dataGrid.dataProvider = [];
            }
        ]]>
    </mx:Script>

    <mx:XML id="xmlDP" source="data/dp.xml" />

</mx:Application>