Implementing horizontal scrollbar for specific column of datagrid in flex - apache-flex

Question

How to implement horizontal scrollbar for specific column of datagrid in flex? Say I have a column whose rows are showing particular rendered graphics component. If it exceeds column width then how can I set up scrollbar for that particular column? If I set horizontalScrollPolicy="on" then it sets horizontal scrollbar for whole datagrid. I want that for particular column.Can this be done?

Answer 1

You have not specified which version of the datagrid component you use (mx or spark). Here are examples for both of them. I have used a simple text as content of the scrolled column. One can use such approach whatever the content is.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]private var collection:ArrayCollection = new ArrayCollection([
{field01:"field01", content:"your content your content your content your content", field02:"field02"},
{field01:"field01", content:"your content your content your content your content", field02:"field02"},
{field01:"field01", content:"your content your content your content your content", field02:"field02"}
]);
]]>
</fx:Script>
<s:VGroup x="10" y="10">
<!-- the new Spark DataGrid -->
<s:DataGrid
width="300" height="180"
rowHeight="50"
dataProvider="{collection}">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="field01" headerText="Field 1"/>
<s:GridColumn dataField="content" headerText="Content" width="100">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:Scroller width="100%" height="100%">
<s:HGroup width="100%" height="100%" verticalAlign="middle">
<s:Label text="{data.content}" width="300"/>
</s:HGroup>
</s:Scroller>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
<s:GridColumn dataField="field02" headerText="Field 2" width="100"/>
</s:ArrayList>
</s:columns>
</s:DataGrid>
<!-- the old MX DataGrid -->
<mx:DataGrid
width="300" height="180"
rowHeight="50"
dataProvider="{collection}">
<mx:columns>
<mx:DataGridColumn dataField="field01" headerText="Field 1" width="100"/>
<mx:DataGridColumn dataField="content" headerText="Content" width="100">
<mx:itemRenderer>
<fx:Component>
<mx:HBox width="100%" >
<mx:Label text="{data.content}"/>
</mx:HBox>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="field02" headerText="Field 2" width="100"/>
</mx:columns>
</mx:DataGrid>
</s:VGroup>
</s:Application>
//EDIT
Here is what I meaned by "faked approach":
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]private var collection:ArrayCollection = new ArrayCollection([
{field01:"field01", content:"your content your content your content your content", field02:"field02"},
{field01:"field01", content:"your content your content your content your content", field02:"field02"},
{field01:"field01", content:"your content your content your content your content", field02:"field02"}
]);
[Bindable]public var currentScrollPosition:int = 0;
]]>
</fx:Script>
<s:VGroup x="10" y="10">
<mx:DataGrid
width="300" height="180"
rowHeight="50"
dataProvider="{collection}">
<mx:columns>
<mx:DataGridColumn dataField="field01" headerText="Field 1" width="100"/>
<mx:DataGridColumn dataField="content" headerText="Content" width="100">
<mx:itemRenderer>
<fx:Component>
<mx:HBox width="100%" horizontalScrollPolicy="off">
<mx:HBox id="hbMove" x="{-outerDocument.currentScrollPosition}" width="300">
<mx:Label text="{data.content}"/>
</mx:HBox>
</mx:HBox>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="field02" headerText="Field 2" width="100"/>
</mx:columns>
</mx:DataGrid>
<mx:HBox horizontalGap="0">
<s:Spacer width="100"/>
<mx:HScrollBar id="sbMover" width="100" minScrollPosition="0" maxScrollPosition="300" scroll="{currentScrollPosition = sbMover.scrollPosition}"/>
</mx:HBox>
</s:VGroup>
</s:Application>