<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Flex Examples &#187; CollectionEvent</title>
	<atom:link href="http://blog.flexexamples.com/category/collectionevent/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.flexexamples.com</link>
	<description>Just a bunch of Adobe Flex Examples</description>
	<lastBuildDate>Wed, 26 Jan 2011 18:09:51 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Creating an auto-scrolling DataGrid control in Flex</title>
		<link>http://blog.flexexamples.com/2009/01/31/creating-an-auto-scrolling-datagrid-control-in-flex/</link>
		<comments>http://blog.flexexamples.com/2009/01/31/creating-an-auto-scrolling-datagrid-control-in-flex/#comments</comments>
		<pubDate>Sun, 01 Feb 2009 02:29:58 +0000</pubDate>
		<dc:creator>Peter deHaan</dc:creator>
				<category><![CDATA[ArrayCollection]]></category>
		<category><![CDATA[CollectionEvent]]></category>
		<category><![CDATA[DataGrid]]></category>
		<category><![CDATA[collectionChange]]></category>
		<category><![CDATA[maxVerticalScrollPosition]]></category>
		<category><![CDATA[validateNow()]]></category>
		<category><![CDATA[verticalScrollPosition]]></category>

		<guid isPermaLink="false">http://blog.flexexamples.com/2009/01/31/creating-an-auto-scrolling-datagrid-control-in-flex/</guid>
		<description><![CDATA[<p>In a previous example, <a href="http://blog.flexexamples.com/2008/11/27/auto-scrolling-a-textarea-control-in-flex/">&#8220;Auto-scrolling a TextArea control in Flex&#8221;</a>, 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.</p> <p>The following example shows how you can auto-scroll a Flex DataGrid control using the ArrayCollection object&#8217;s collectionChange [...]]]></description>
			<content:encoded><![CDATA[<p>In a previous example, <a href="http://blog.flexexamples.com/2008/11/27/auto-scrolling-a-textarea-control-in-flex/">&#8220;Auto-scrolling a TextArea control in Flex&#8221;</a>, we saw how you can auto-scroll a Flex TextArea control when new content is added by setting the <code>verticalScrollPosition</code> property to the value of the <code>maxVerticalScrollPosition</code> property.</p>
<p>The following example shows how you can auto-scroll a Flex DataGrid control using the ArrayCollection object&#8217;s <code>collectionChange</code> event, and the <code>verticalScrollPosition</code> and <code>maxVerticalScrollPosition</code> properties.</p>
<p><span id="more-949"></span></p>

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

<p class="information"><a href="http://blog.flexexamples.com/wp-content/uploads/DataGrid_maxVerticalScrollPosition_text/bin/srcview/">View source</a> is enabled in the following example.</p>
<p><iframe src="http://blog.flexexamples.com/wp-content/uploads/DataGrid_maxVerticalScrollPosition_text/bin/main.html" width="100%" height="260"></iframe></p>
<div class="evernoteSiteMemory"><a href="javascript:" onclick="Evernote.doClip({title: 'Creating an auto-scrolling DataGrid control in Flex on FlexExamples.com',url: 'http://blog.flexexamples.com/2009/01/31/creating-an-auto-scrolling-datagrid-control-in-flex/',contentID: 'post-949',code: 'Pete9667',suggestNotebook: 'FlexExamples',suggestTags: 'collectionChange,maxVerticalScrollPosition,validateNow(),verticalScrollPosition',providerName: 'FlexExamples.com',styling: 'text' });return false" class="evernoteSiteMemoryLink"><img src="http://static.evernote.com/article-clipper-remember.png" class="evernoteSiteMemoryButton" />
				</a>				<div class="evernoteSiteMemoryClear">&nbsp;</div>
</div>]]></content:encoded>
			<wfw:commentRss>http://blog.flexexamples.com/2009/01/31/creating-an-auto-scrolling-datagrid-control-in-flex/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
	</channel>
</rss>

