search

DevExpress / devextreme-reactive

Business React components for Bootstrap and Material-UI
https://devexpress.github.io/devextreme-reactive/
Other
2.08k stars 380 forks source link

VirtualTableState componentDidMount calling getRows with skip = 0 #2104

Open flyfishMT opened 5 years ago

flyfishMT commented 5 years ago

I'm using ...

Description

I have just started using dx-react-grid and it is awesome, thanks for the great work. Sorry if this is question that should be posted on somewhere like stackoverflow, I couldn't find the appropriate tag.

I am just getting an Infinite Scrolling grid setup and I am using a Redux store. What I am calling "dataFilters" are stored as an object in the store:

{
  sorts: [],
  skip: 0,
  search: null
}

So when I navigate away from my grid and come back to it I'd like to load it in relatively the same state I left it, even though I re-query the data.

Here's an abbreviated version of what it looks like; I am using react hooks. 

const MyGrid = props => {
  const dispatch = useDispatch();

  // store selectors data
  const items = useSelector(state => state.items);
  const totalRowCount= useSelector(state => state.totalRowCount);
  const fetching = useSelector(state => state.fetching);
  const filters = useSelector(state => state.filters);

  const { skip, take, sorts, search } = filters;

  // when query opts change, fetch data
  useEffect(() => {
    dispatch(fetchItems({skip, sorts, take}));
  }, [dispatch, skip, sorts, take]);

  /**
   * when "sorts" state variable is changed, component will re-render and effect to fetchItems will fire
   */
  const changeSorting = sorts => {
    dispatch(setFilters({ sorts }));
  };

  /**
   * when "skip" state variable is changed (when paging occurs), component will re-render and effect to fetchItems will fire
   */
  const getRows = (skip, take) => {
    dispatch(setFilters({ skip, take }));
  };
  const columns = [ ... ];
  const getRowId = row => row.id;
  return (
      <Grid
        rows={items}
        columns={columns}
        rootComponent={GridRoot}
        getRowId={getRowId}
      >
        <SortingState sorting={sorts} onSortingChange={changeSorting} />

        <VirtualTableState
          infiniteScrolling
          loading={fetching}
          totalRowCount={totalRowCount}
          pageSize={100}
          skip={skip}
          getRows={getRows}
        />
        <VirtualTable height="auto" />
        <TableHeaderRow showSortingControls />
      </Grid>
  );
};

My problem is, even though I am initialize VirtualTableState's skip out of my redux store (say it was 200), getRows is getting called on startup with a skip value of 0.

I think it may be because of this line here.

Is there any way to have it call getRows with the initialized skip value instead? Or is there a better way to save the skip value in my store?

Thanks for any help you may provide.

Environment

Krijovnick commented 5 years ago

Hi @flyfishMT

The skip option in the VirtualTableState plugin is not suitable to control scrolling the way you want. And there is no any workaround. But that functionality is in our plans and we are working on it.

flyfishMT commented 5 years ago

Ok thanks. FYI - I am only loading the current "page" into the redux store as I "skip", I don't keep previously queried records in there. I don't know if this matters.

Also it seems like #1912 should do what I want but I couldn't get it to work; don't know if there's actually a start param.

Krijovnick commented 5 years ago

Hi, In the #1912 issue, the preliminary API is demonstrated. There is a start option in the skip option in the documentation.