Implementing horizontal scrollbar for specific column of datagrid in 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?

Anton Anton · Accepted Answer · 2013-03-02T09:24:13

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.

enter image description here

<?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":

enter image description here

<?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>

Implementing horizontal scrollbar for specific column of datagrid in flex

1 Answers