Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Srihare Ravindran
15
IgxGrid Angular - Set scroll location using API
posted

Hi,

I am trying to set the scroll location (basically go to top of grid) after some action is done. The grid in question is using virtualization and the data is fetched and set using the onDataPreLoad.

In a particular scenario, I would like the grid to scroll back to the top (index 0). I tried a couple ways of doing this, but none of them seem to be working.

  1. Using the navigateTo method in IgxGridComponent
  2. Setting the verticalScrollContainer.scrollPosition value to 0 (and even doing a refresh grid / reflow / cdr.detectChanges)
  3. Using the scrollTo method in the verticalScrollContainer

Is there a better way to set the vertical scroll location ?

Little more description is that I am having a 10000 row data, showing around 20 of them at a time. When an action happens, I kind of change the layout of the grid (adding / removing some columns and changing the format of the data). When this happens, the scroll position is being retained and that is causing an issue when the next onDataPreLoad runs.

  • 720
    Offline posted

    Hello Srihare,

    Thank you for contacting Infragistics Community!

    I believe you will find the following sample I have prepared for you very helpful. As you can observe it is using remoteDataOperations and subscribing to the onDataPreload it fetches the data. Further, you will notice that when scrolling down the grid and the virtualizationState.startIndex gets bigger than 7 one of the grid columns gets hidden. After scrolling back so that the virtualizationState.startIndex gets equal or less than 7 the column gets visible again. The same happens if the user clicks on the Navigate Top button, which is bind to the igxGrid navigateTo method. As you can observe everything is working as expected.

    If this sample is not an accurate demonstration of what you are trying to achieve please feel free to modify it so that it replicates the issue you’re facing and send it back to me for further investigation.

    Looking forward to hearing from you.

    Best Regards,
    Martin Evtimov
    Entry Level Software Developer
    Infragistics, Inc.