How to reset the grid page number after filtering?

[Thomas]

Is it possible to reset the grid page number after performing a filter? We're seeing a bug where if the initial grid load has n pages and you navigate to the nth page, but then filter so there's less than n pages, the grid becomes blank and doesn't show data again until you click on one of the page numbers again. Ideally I'd like to reset the user to the first page upon filtering.

[Hetali]

Hello Thomas,

Thank you for reaching out.

When you use the autoProcessData props, the Grid automatically updates the data and the page number as seen below:

<Grid
  data={data}
  autoProcessData={true}
  defaultSkip={0}
  defaultTake={10}
  pageable={true}
  filterable={true}
>
</Grid>

In this StackBlitz example, the Grid performs the data operations automatically.

When you manually perform the data operations, use the onDataStateChange event to update the data using the process method. For example:

<Grid
  data={data}
  skip={state.skip}
  take={state.take}
  filter={state.filter}
  pageable={true}
  filterable={true}
  onDataStateChange={dataStateChange}
>
</Grid>

const [state, setState] = React.useState({
  skip: 0,
  take: 10
});

const data = process(products, state);  

const dataStateChange = (event: GridDataStateChangeEvent) => {
  setState(event.dataState);
}

In this StackBlitz example, the Grid manually updates the data.

Both the approaches go to page 1 upon filtering. Please give them a try and let me know if I can further assist you.

If you continue to have paging issues upon filtering, please update the example such that it replicates the behavior or share an isolated application, I can then investigate the matter.

Looking forward to hearing from you.

Regards,
Hetali
Progress Telerik