Flex Examples

The following is an example of locking a fixed number of columns in a horizontally scrolling DataGrid control. Although this tip probably has little to no use if all your data fits comfortably in a data grid, it can be invaluable if you have a lot of columns and need to scroll horizontally as well as vertically.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/15/locking-columns-in-a-horizontally-scrolling-datagrid-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:DataGrid id="dataGrid"
            lockedColumnCount="1"
            horizontalScrollPolicy="on"
            width="300">
        <mx:columns>
            <mx:DataGridColumn dataField="@name" headerText="Name:" />
            <mx:DataGridColumn dataField="@colA" headerText="Column A:" />
            <mx:DataGridColumn dataField="@colB" headerText="Column B:" />
            <mx:DataGridColumn dataField="@colC" headerText="Column C:" />
        </mx:columns>
        <mx:dataProvider>
            <mx:XMLList>
                <item name="User 1" colA="1.A" colB="1.B" colC="1.C" />
                <item name="User 2" colA="2.A" colB="2.B" colC="2.C" />
                <item name="User 3" colA="3.A" colB="3.B" colC="3.C" />
                <item name="User 4" colA="4.A" colB="4.B" colC="4.C" />
                <item name="User 5" colA="5.A" colB="5.B" colC="5.C" />
                <item name="User 6" colA="6.A" colB="6.B" colC="6.C" />
                <item name="User 7" colA="7.A" colB="7.B" colC="7.C" />
                <item name="User 8" colA="8.A" colB="8.B" colC="8.C" />
            </mx:XMLList>
        </mx:dataProvider>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.