Flex – Preventing DataGrid scrolling when the dataprovider is updated.

7Feb/0826

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

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.
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’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.
Chris

Joel,

could you post the code where this is implemented? This is something I have been looking for. Thanks for the help!
http://www.sousgarden.com 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
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.
Matt

Thhhhhhhhhhhhaaaaaaaankkkk you!!!

My god, this saved me about 3 days work!
joelhooks

Glad it saved you some hassle. It drove me crazy too
Matt

Thhhhhhhhhhhhaaaaaaaankkkk you!!!

My god, this saved me about 3 days work!
http://joelhooks.com Joel Hooks

Glad it saved you some hassle. It drove me crazy too
http://www.pesse.de/ 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
http://www.pesse.de/ 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
http://unlikelyteacher.com/ Paul

Thanks, this is exactly what I was looking for. I'll give it a try.
http://unlikelyteacher.com/ Paul

Thanks, this is exactly what I was looking for. I'll give it a try.
http://twitter.com/omer72 Omer Etrog

Thank you, I have 3 bugs (well, for every datagrid is have different bug) on this issue
http://twitter.com/omer72 Omer Etrog

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

Joel,

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

Greetings,
Aroldo (Brasil)
JUANABREU

DUDE YOU ARE MY HERO!!! THANK YOU!!!
Ricardo Aguilar

A lot of thanks!

Ricardo (Colombia)
Pradeep

Hi, i was using your code it works great!

I just found a small problem with it. I think these two lines must be reversed.
“grid.verticalScrollPosition = vScroll;
grid.selectedItem = storeItemForUpdate;”
Pradeep

correct order is:
“grid.selectedItem = storeItemForUpdate;
grid.verticalScrollPosition = vScroll;”
try testing your code with a datagrid having long scroll. It doesn't selects the correct item. However changing this order
gives correct results.
the_new_mr

Thanks man!

EXACTLY what I needed!
Sagar Jadhav

You have saved me day and I cannot thank you enough man. God bless you
Vikram Bhatla83

This solution is not working for me.
verticalScrollPosition depends on the rowHeight and maxVerticalScrollPosition.
I am calculating it using:
var vScroll:int = Math.ceil((grid.verticalScrollPosition/gridmaxVerticalScrollPosition)*grid.rowHeight);
This will return the approx correct vScroll. But still its not doing correct behavior.
Dasun

Thanks Buddy. Thank you very much. Good luck brother….
Keithlee2010

Nice work!

« Regular Expression resources and utilities. Design Patterns Cheat Sheet »

Building Blocks

Flex – Preventing DataGrid scrolling when the dataprovider is updated.

Books

Speaking

Kickass Books

Meta