[DataGrid] `onRowsScrollEnd` triggered when applying filters about mui-x HOT 8 CLOSED

@michelengelen I edited the link in the main description. This should now work, hopefully. I'll add it here for visibility as well. https://stackblitz.com/edit/react-bpfeec?file=Demo.js
Thanks for the help!

from mui-x.

I think this relates to this PR #8672. The goal of the PR is to rework the way that the onRowsScrollEnd behaves.
The main problem with the name of the callback is that it implies that it will only be called if the user scrolls which is not the case - it's called whenever the "scroll" reaches the bottom which in the case of having fewer rows than the viewport can take will result in the callback being called.
Hope that this explains the issue.

I'll close this in favor of #4371 as it is essentially a duplicate.

from mui-x.

Hey @sorinpav I am not able to open your live example. It is stuck at connecting to dev server.\ Could you check if there is something wrong with it and get back to us? Without the example we will not be able to help you with this. Thanks! 🙇🏼

from mui-x.

@michelengelen I will have a look, thanks for letting me know. I'll edit the link in a few minutes.

from mui-x.

OK, thanks for fixing that example.
The behavior of the event is as intended.
What exactly are you trying to accomplish with this? Maybe I can help to find another way of doing this.

From your description it seems when filtering and the results return a small enough amount of rows the onRowsScrollEnd gets triggered and you fetch new data from your backend, is that about right?

from mui-x.

@michelengelen yes, exactly, and we would wish to be able to fetch results from the server only when intentionally scrolling down, not when filtering.

from mui-x.

Currently, we added a workaround with a useEffect that listens to the statechange event, and gets the number of visible rows by using gridExpandedRowCountSelector, a code shim looks something like this:

  import {gridExpandedRowCountSelector} from "@mui/x-data-grid-premium";

  const [visibleRows, setVisibleRows] = useState();

  useEffect(() => {
    apiRef?.current?.subscribeEvent?.("stateChange", () => {
      const count = gridExpandedRowCountSelector(apiRef.current.state);
      setVisibleRows(count);
    });
  }, [apiRef, apiRef?.current?.subscribeEvent, apiResults]);

and then using visibleRows to update X in the "X results displayed" string above the dataGrid, but we see this as a workaround since the results fetching from the server still happens, but at least we have that number reflecting how many rows are actually seen on screen.

On the performance side of things, it's extra requests to the server that the user hasn't asked for, so that is why we would prefer the event to not trigger, because we haven't solved that with our workaround.

Posting the code here to help others who may encounter the same issue, and don't mind the extra requests.

@michelengelen if you have any better ideas please shout up! Thanks for the help!

from mui-x.

The behavior of the event is as intended.

Also, I understand that the event triggers when it thinks it's reached the end of the list of rows, but I don't think it's correct for that to happen when the user is just filtering results, as of course you're going to reach the end of the list if you're looking for one particular result only.

from mui-x.