Creating an auto-scrolling DataGrid control in Flex

By Peter deHaan On January 31, 2009 · 11 Comments

In a previous example, “Auto-scrolling a TextArea control in Flex”, we saw how you can auto-scroll a Flex TextArea control when new content is added by setting the verticalScrollPosition property to the value of the maxVerticalScrollPosition property.

The following example shows how you can auto-scroll a Flex DataGrid control using the ArrayCollection object’s collectionChange event, and the verticalScrollPosition and maxVerticalScrollPosition properties.

<?xml version="1.0" encoding="utf-8"?>
<!--http://blog.flexexamples.com/2009/01/31/creating-an-auto-scrolling-datagrid-control-in-flex/ -->
<mx:Application name="DataGrid_maxVerticalScrollPosition_text"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">
 
    <mx:Script>
        <![CDATA[
            import mx.events.CollectionEvent;
            private var timer:Timer;
 
            private function init():void {
                timer = new Timer(500);
                timer.addEventListener(TimerEvent.TIMER, onTimer);
                timer.start();
            }
 
            private function onTimer(evt:TimerEvent):void {
                var now:String = new Date().toTimeString();
                arrColl.addItem({id:timer.currentCount, time:now});
            }
 
            private function arrColl_collectionChange(evt:CollectionEvent):void {
                callLater(autoScrollDataGrid);
            }
 
            private function autoScrollDataGrid():void {
                if (dataGrid) {
                    dataGrid.validateNow();
                    dataGrid.verticalScrollPosition = dataGrid.maxVerticalScrollPosition;
                }
            }
        ]]>
    </mx:Script>
 
    <mx:ArrayCollection id="arrColl"
            collectionChange="arrColl_collectionChange(event);" />
 
    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            verticalScrollPolicy="on"
            width="200"
            rowCount="8">
        <mx:columns>
            <mx:DataGridColumn dataField="id" width="50" />
            <mx:DataGridColumn dataField="time" />
        </mx:columns>
    </mx:DataGrid>
 
</mx:Application>

View source is enabled in the following example.

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

11 Responses to Creating an auto-scrolling DataGrid control in Flex

curious says:

February 13, 2009 at 5:15 am

Why creator of this great website has stopped adding flex SWFs to posts ?

Reply
- Peter deHaan says:
  
  July 16, 2009 at 8:46 am
  
  Creator is lazy, and didn’t have time to create Builder projects, export release builds, FTP files, link examples, etc.
  But, on a positive note, I have been going back through older Flex 4 examples and updating them to the latest API and in several cases added SWFs.
  
  Peter
  
  Reply
  - Peter deHaan says:
    
    July 16, 2009 at 8:59 am
    
    SWF added. Go me!
ez says:

March 25, 2009 at 8:49 am

I think it’s not necessarily?, in some simple cases.

Reply
- lorando says:
  
  July 16, 2009 at 7:27 am
  
  me too
  
  thanks
  
  Reply
Flexicious says:

November 29, 2009 at 10:21 pm

Feel free to check out http://www.flexicious.com. It does a lot of stuff in addition to what’s provided by Flex out of the box. Examples are Column level filtering, Server based paging and sorting, column footers, data copy paste, and a lot more!

Reply
Anup says:

April 7, 2010 at 1:01 am

How to auto scroll a list component vertically with itemrenderer as image

Reply
Jeetendra Chauhan says:

October 27, 2010 at 11:56 am

hi peter,

i am using your code and converting it to pure as3 code for people like me(who like AS3 over MXML),I hope u don’t mind
if u have any objection i will remove that post.
my post url creating-an-auto-scrolling-datagrid-control-in-flex-using-as3/

Reply
- Peter deHaan says:
  
  October 27, 2010 at 12:14 pm
  
  @Jeetendra Chauhan,
  
  I don’t mind at all. In fact, this blog is currently released under a Creative Commons Attribution 3.0 United States License.
  
  Peter
  
  Reply
lewyan says:

February 9, 2011 at 1:54 pm

Great example.
However, I have got an embarrassing situation where one of the column has long text (say 3 or 4 lines). what will happen is that the maxVerticalScrollPosition does not apply. it can’t show the bottom of the datagrid anymore!!!

Reply
moorthi says:

March 28, 2011 at 10:33 pm

Really helpful. thanks.

Reply