Flex – Preventing DataGrid scrolling when the dataprovider is updated.

I was having issues with my DataGrid scrolling to the top when my grid updated from the server. It is very aggravating as a user when you are milling about and *BAM* it scrolls away.

This worked:

var storeItemForUpdate:ItemVO = grid.selectedItem;;
var vScroll:int = grid.verticalScrollPosition;
arrayCollection.source = updatedDataArray
grid.validateNow();
grid.verticalScrollPosition = vScroll;
grid.selectedItem = storeItemForUpdate;

The current selection is stored, the scroll position is stored, the grid is updated, validated, and then the stored variables are applied without so much as a flicker on the screen for the user. Much better.

The Flex – Preventing DataGrid scrolling when the dataprovider is updated. by Joel Hooks, unless otherwise expressly stated, is licensed under a Creative Commons Attribution 3.0 United States License.

Updated: Continuous scrolling image thumbnail and slideshow component for Flex., Complex DataGrid filterFunction in Flex/Air, Continuous scrolling image thumbnail component for Flex., Adding a ToolTip function to a ComboBox in Flex, Continuous scrolling image thumbnail and slideshow component for Flex.

6 Responses to “Flex – Preventing DataGrid scrolling when the dataprovider is updated.”

Feed for this Entry Trackback Address

1 Joel
February 27, 2008 at 11:24 am

I found that it is easier to update the dataProvider with itemUpdated and make proper use of collections in Flex. This is still a solution if that isn’t possible, for whatever reason, but I’d say it is far from a best practice.
2 Hari
May 30, 2008 at 12:51 am

Hi, my datagrid is bound to an ArrayCollection which is the dataprovider. When I remove items from Arraycollection, the focus on the datagrid moves to the bottom of the grid which deiplays a blank row. I want the focus to be remained always at the top. Please let me know any way to solve this.
3 Joel
May 30, 2008 at 8:28 am

I’ve never seen it go to the bottom like that!

If you want it to go to the top, do this:

myDataGrid.selectedIndex = 0
myDataGrid.scrollToIndex(0)

That will reposition and select the first entry. To make it ’smart’ you want to record the position of the item you are deleting, and have it select/scroll there.
4 Chris
January 11, 2009 at 3:03 pm

Joel,

could you post the code where this is implemented? This is something I have been looking for. Thanks for the help!
5 tsedeke
April 5, 2009 at 4:43 am

Joel,
in some cases you are right, but if you have an application getting data from database where also many people work on, it is important to read all records after changing, cause not only your record may change.
In this situation you have no other chance, you have to remember your key of your record and after refresh find and select it again.
Cause today we are not able to make a specific record update in a Arraycollection from a database.
Ok you can do it, but it is not save and cause an overhead.

Thorsten
6 dj brikz
May 28, 2009 at 3:27 am

hi…thanks for the post…it works well in the application that i’m doing now. my application is fetching entries from the database and updates the datagrid every 1 second.

Wrap up solution:

1. Before updating the data provider of the datagrid, retrieve first the verticalScrollPosition and selectedItem properties of the datagrid.
2. Update the data provider of the datagrid.
3. Set again the datagrid verticalScrollPosition and selectedItem properties using the values you stored in step 1.
4. That’s all and enjoy.

building blocks