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:

1
2
3
4
5
6

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.

Creative Commons License
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.
  • 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!

  • https://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!

  • https://joelhooks.com Joel Hooks

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

  • https://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

  • https://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

  • https://unlikelyteacher.com/ Paul

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

  • https://unlikelyteacher.com/ Paul

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

  • https://twitter.com/omer72 Omer Etrog

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

  • https://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!