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.
<?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.
{ 9 comments… read them below or add one }
I see how the column is locked. Is there a way to not have the scrollbar under the first column so the scrollbar component does not span the whole datagrid but just the columns that can scroll? This would be better for the user.
Thanks
George Smith,
I don’t know of an easy way to accomplish that without probably subclassing the DataGrid control and writing in the logic. You could try asking on Flexcoders and somebody there may have a better idea.
If you think this is a worth enhancement request, you can file a bug/ecr at http://bugs.adobe.com/flex/ against the Flex SDK and select “Component: DataGrid”.
Peter
Is there a way to remove that black vertical grid line. Tried a number of ways, sounds impossible.
Tried a number of ways, sounds impossible. for me is the same what we can do ?
bing/Nikola,
I’m not sure if it works in Flex 2 (I believe it was added in Flex 3), but check out “Changing the appearance of the locked column separator skin for a DataGrid control in Flex 3″.
Peter
Is there a way to make column C on the example swf file not to resize and occupy the whole unfreeze section?
RE: “Is there a way to remove that black vertical grid line. Tried a number of ways, sounds impossible.”
Create a class as below:
package { import mx.skins.halo.DataGridHeaderSeparator; public class DataGridHeaderSeparator extends mx.skins.halo.DataGridHeaderSeparator { override public function get measuredWidth():Number { return 0; } override public function setActualSize(newWidth:Number, newHeight:Number):void { graphics.clear(); } } }Then in your DataGrid params use:
That should do the trick :)
Cheers,
Simon
newtriks dot com
Hi Peter,
Is it possible to freeze 2 or multiple columns at the same time?
Thanks,
Arnold
Sorry ’bout that. I learned that the columns with indexes that are lower than the value remain fixed in view.
Thanks.