devextreme-reactive icon indicating copy to clipboard operation
devextreme-reactive copied to clipboard

Reset virtual table scroll position

Open incadoi opened this issue 6 years ago • 3 comments

  • [x] I have searched this repository's issues and believe that this is not a duplicate.

I'm using ...

  • [x] React Grid
  • [ ] React Chart
  • [ ] Vue Grid

Current Behaviour

Changing the data for VirtualTable, keeps the scroll position. This is useful in some cases, like loading more data on scroll but if I want to change completely the data I also want to reset the scroll position.

Expected Behaviour

Possibility to reset the scroll position.

Steps to Reproduce (for Bugs)

Environment

  • devextreme-reactive: 1.7.0
  • react: 16.5.2
  • browser: Version 69.0.3497.100 (Official Build) (64-bit)
  • bootstrap: none
  • react-bootstrap: none
  • material-ui: 3.0.2

incadoi avatar Oct 02 '18 11:10 incadoi

Hi,

Currently, we don't have built-in functionality to achieve your case. We will consider your suggestion for future releases though.

As a workaround, you can use Element.scrollIntoView function. As a target element, you can use the first row of a table.

MaximKudriavtsev avatar Oct 02 '18 15:10 MaximKudriavtsev

Hello, I am trying to use scrollIntoView, and in my case I load new data also to the top of list. So I need reset skip parameter to 0 of React Grid to start load data from zero position. How can I do that?

kkataev avatar Jun 13 '19 08:06 kkataev

@kkataev This kind of works but then is reset to the previous cursor position. Might be a problem with other code I have though. Assumes skip is state or a prop -

  useEffect(() => {
    if (skip === 0) {
      try {
        var element = document.querySelector('.table tbody > tr');
        if (element) {
          console.log(element);
          element.scrollIntoView();
          element.scrollIntoView(false);
        }
      } catch (err) {
        console.error(err);
      }
    }
  }, [skip]);

flyfishMT avatar Jun 27 '19 22:06 flyfishMT