React Grid Persist through Refreshes ?

0 Answers 70 Views
General Discussions Grid
Abi
Top achievements
Rank 1
Abi asked on 11 Jan 2023, 01:36 AM

Hey there -

 

I'm trying to persist state of grid (dataState) through refreshes. This grid instance is processing data on the client-side.  I have another grid instance performs data operations on the backend, and the req URL has search params.

 

My current approach is using URLSearchParams, but both this and react-router location return empty objects. I'm including the code, but I'm currently just trying access the url params. 


const urlSearchParams = new URLSearchParams(window.location.search);
 const params = Object.fromEntries(urlSearchParams.entries());
 console.log(params) // logs {}


  const location = useLocation();
  console.log('location', location)

Finally - is this the best way to approach this? I'd rather not add any libraries/frameworks and it doesn't make sense for us to store this info on the backend. So far I'm trying web APIs like above + localstorage. We do have react-router, but so far I haven't solved this issue. 

 

Thank you!  

Abi
Top achievements
Rank 1
commented on 11 Jan 2023, 02:38 PM

Update!! - I realized that my req url has URLSearchParams because I add them to the axios request (they are not added by Kendo) -> 

    const fetchAllJobsConfig = {
      baseURL: process.env.REACT_APP_API_URL,
      params: {
        dataState,
      },
      headers,
      method: 'get',
      url,
    };
My current plan is to push dataState into the browser history object and to check for it when the page loads. If there's a better way to do it, I'd love to hear about it!

Filip
Telerik team
commented on 12 Jan 2023, 09:13 PM

Hello,  Abi,

The approach that you have selected seems to be the best one.

Alternatively, another possible take would be to use local storage in order to keep the grid state.

I made an example that showcases this approach here:

https://stackblitz.com/edit/react-grid-toggle-column-d8pvlr?file=index.js

I hope this helps.

Regards,
Filip

No answers yet. Maybe you can help?

Tags
General Discussions Grid
Asked by
Abi
Top achievements
Rank 1
Share this question
or