Flex – Preventing DataGrid scrolling when the dataprovider is updated.

7Feb/0818

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.

Filed under: actionscript, flex Leave a comment

JUANABREU

DUDE YOU ARE MY HERO!!! THANK YOU!!!
Aroldo

Joel,

Thanks for your help, this is exactly what I need.

Greetings,
Aroldo (Brasil)
Omer Etrog

Thank you, I have 3 bugs (well, for every datagrid is have different bug) on this issue
Paul

Thanks, this is exactly what I was looking for. I'll give it a try.
Pesse

Hi,
Thanks for this snippet :)
Can you give me a hint how you use itemUpdated instead of this?
Would really appreciate it!

Greetings,
Pesse
Matt

Thhhhhhhhhhhhaaaaaaaankkkk you!!!

My god, this saved me about 3 days work!
Joel Hooks

Glad it saved you some hassle. It drove me crazy too ;)
dj brikz

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.
tsedeke

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
Chris

Joel,

could you post the code where this is implemented? This is something I have been looking for. Thanks for the help!
Joel

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.
Hari

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.
Joel

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.