This will be a simple solution to be able to scroll to the last added row in a data grid. First of all I’ll explain what I mean and what I encountered when I needed to implement it.
The expected behavior is after adding a new row into a data grid, it should scroll to that item if that row is not visible. First of all I tried to put scrollToIndex method right into the add method and unwanted behavior appeared. The data grid was just scrolling to the previous row of the last row leaving the last added row just under the bottom edge.
I started to look into the Flex Framework code and I found out the into the scrollToIndex method of ListBase class is a variable called maxVerticalScrollPosition which is calculated/updated into the ScrollControlBase class when the scroll bar is displayed. If the scroll bar is not visible maxVerticalScrollPosition variable will be 0.
Why is this happening to us? Because we try to scroll to the last added row before updating the data grid control visually. Finding that out I moved the scrollToIndex method into update complete event (FlexEvent.UPDATE_COMPLETE) and that fixed the problem because at that point the control is updated and the scroll bar is displayed.
So here is the application…
…and the code as usual.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="379" height="163"> <mx:DataGrid x="10" y="10" id="dg" dataProvider="{dgdp}" height="112" updateComplete="handleUpdateComplete(event)"> <mx:columns> <mx:DataGridColumn headerText="Column 1" dataField="col1"/> <mx:DataGridColumn headerText="Column 2" dataField="col2"/> <mx:DataGridColumn headerText="Column 3" dataField="col3"/> </mx:columns> </mx:DataGrid> <mx:Button x="320" y="9" label="Add" click="handleAddRow(event)"/> <mx:NumericStepper x="75" y="130" minimum="0" maximum="{dg.dataProvider.length-1}" change="handleScrollToChange(event)"/> <mx:Label x="10" y="132" text="Scroll To:"/> <mx:Script> <![CDATA[ import mx.events.NumericStepperEvent; [Bindable] private var dgdp:Array = [ { "col1":0, "col2":"a1", "col3":"b1" }, { "col1":1, "col2":"a2", "col3":"b2" } ]; private function handleScrollToChange(e:NumericStepperEvent):void { dg.scrollToIndex(e.value); } private function handleAddRow(event:MouseEvent):void { dg.dataProvider.addItem( { "col1": dg.dataProvider.length, "col2": "__CUST__", "col3": "__CUST__" } ); } private function handleUpdateComplete(e:Event):void { var currLen:uint = dg.dataProvider.length; dg.scrollToIndex(currLen); } ]]> </mx:Script> </mx:Application> |
Tags: ActionScript, datagrid, Events, scroll
This post was written by Andrei Ionescu
Views: 5138



















Many thanks, this was giving me a serious headache. I also found it very irritating that putting a ChangeWatcher.watch() on dg.maxVerticalScrollPosition never received any events. I figured it would update with the display but apparently it doesn’t tell anyone when it does.
Thanks… Just the right code I was looking for.
Thanks this was very useful.. hard to find a simple example like it.
Thanks a lot for such a useful code