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>

11 thoughts on “Setting the horizontal scrollbar policy on a DataGrid control in Flex

  1. Hi, another great example you’ve got here

    However there is one question, is it possible to scroll within the datagrid control or within a panel when the horizontal Scroll Policy is set to “Off”?

    Thanks in Advance.

  2. I notice that the scroll does not scroll smoothly, but “jumps” to keep a full field at the left edge of the view. Is there any way to have the scroll work smoothly over large fields? ie. A field could be only partly shown on the left side of the view?

    Love your site!

    1. Sean,

      I am facing the same issue which you have raised.
      Did you find the solution for this. if so, ould you share the same

  3. Is there any way to have a DataGrid display horizontally instead of vertically? Like I want to have my headers be the first row like normal and also the first column? I tried to check the DataGrid and the AdvancedDataGrid but couldn’t find anything?

    Thanks!

    .:Joshua

  4. Example in HTML:

    <table>
    <tr>
    <th></th>
    <th>2008-11</th>
    <th>2008-12</th>
    <th>2009-01</th>
    </tr>
    <tr>
    <th>Dev</th>
    <td>5.50</td>
    <td>6.50</td>
    <td>7.50</td>
    </tr>
    <tr>
    <th>QA</th>
    <td>6.00</td>
    <td>6.00</td>
    <td>7.00</td>
    </tr>
    </table>

  5. Hi,

    I have a problem with the scroll bars and my data grid. My DG is in a Panel. The DG is set to width and height at 100%. Vertical scrolling works as expected. My columns intentionally extend beyond the display area that the DG has available. I would expect the behavior to be as shown above, but for some reason it is squeezing all columns into the available space instead of making them go out of bounds with scroll bar. If I turn the scroll policy on, it does extend out of bounds and display the horizontal scroll bar, but the vertical scroll bar goes out of bounds too and I have to scroll right in order to be able to scroll down ?! I want to vertical scroll bar to stay within the visible area as shown above.

    Does anybody know how I can make the vertical scroll bar stay within the viewable area of my panel?

    1. @Wolfgang,

      Do you have a simple test case showing the weird behavior? I’m curious if you’re seeing Panel scrollbars or DataGrid scrollbars.

      Peter

      1. I am pretty sure that I am seeing DataGrid scroll bars, since I am setting the horizontal and vertical scroll policy of the Panel to “off”. The displayed horizontal scroll bar is extending beyond the visible part of the Panel. I can never see the “right arrow” of the scroll bar since I can not scroll the Panel to display it.

        Am I doing something wrong with the heights and widths? My page basically is:
        1 VBox
        2 HBox W 100%, H 48 pixel)
        2 TabNavigator (w 100%, H 95%)
        3 VBox (“tab1” W 100% H 100%)
        4 VDividedBox (W 100% H 100%)
        5 HDividedBox (W 100% H 60%)
        6 Custom Panel control (W 25% H 100%)
        7 DataGrid (W 100% H 100% ; the one in question!)
        6 TabNavigator (W 75% H 100%)
        5 Custom control (HDividedBox (W 100% H 40%))
        3 VBox (“tab 2” W 100% H 100%

        I am also using custom item renderes in the grid (derived from Label and Canvas).

        I could also send a screen shot to you per email if that is of any help.

        Thanks for trying to help me out on this.

      2. The indention did not work. Sorry. The number in front of a row basically means the level of indention/nesting.

      3. It seems that I found the reason for the weird behavior, but I am not sure if I can see the connection :-) I was setting the minWidth attribute on 2 of my 3 columns. After changing that to assigning a fixed width, the scroll bars seem to work fine. What I wanted to achieve with minWidth was, that if the user decided to increase the size of the Panel, the DG would fill out all of it, but I wanted to ensure that certain columns can not get smaller than a certain value.

        Well, I guess the minWidth thing is not that important. The scoll bars work fine as long as I don’t set minWidth.

  6. Hi Peter,
    I have this problem with datagrid, and I see the same problem in your example:
    Setting horizontalScrollPolicy=ON , when I stretch a column, the last column will stretch too, becoming larger, sometimes very large.
    I tried setting resizable=false, and also re-setting its width to the original value when the width change, but nothing works.
    Do you know how to solve this?
    Thanks
    Ale

Comments are closed.