Call SetState on a Grid that has an OnRead handler

[Adrian]

I have a Blazor page which has a Telerik TabStrip component with 2 tabs.

The first tab which is the default tab has a Telerik Grid on it.  This grid uses custom paging, filtering and sorting and as such uses the OnRead method to load data from a database using the GridSourceRequest.

As soon as the Blazor page is navigated to the grid fires the OnRead event using the default grid state and gets the first page of data and populates the grid for the user.

Any user interaction with the grid like sorting or filtering etc fires the OnRead event which in turns queries the database and updates the grid with new data.

So far so good, everything working as expected.

If I click the second tab on the TabStrip to perform some other function and then return back to the grid by clicking the first tab.  What I am expecting to see is the Grid with all its data and state as it was before I clicked on the second tab.

In reality what I get is the OnRead event fires and populates the grid with data from the database which matches the default grid state as if it was the first time that the grid had loaded.

After looking on these forums I realise that this is expected behaviour using the TapStrip component as this is the Blazor way of rendering which means that anything not visible on screen gets removed from the RenderTree and no state is retained.

I up-voted a feature request for the TapStrip component to be enchanced to allow state between tab changes to get persisted or just hidden using CSS. 

But in the meantime I'm looking to implement a solution that will persist the grid state when clicking on tab 2 and then setting the grid state back using the persisted state when clicking back on tab 1.

So far I have managed to persist the grid state but am having trouble setting the grid state.back. 

I have tried calling SetState() on the active tab change event when the new selected tab is tab 1.

This sort of works but what happens is that the grid loads and immediately calls OnRead and populates the grid once with the wrong data and state by calling the database; then the grid flashes and updates with the correct data and state from the SetState() call with data that was persisted in memory.

I have tried updating the OnRead method to only call the database when the persisted state object in memory is null.  I am then trying to set the grid set in the OnInitState event using the persisted state. 

I'm not sure at what point I want reset the persisted state object to null as that means the OnRead method will start calling the database again (which I want it to do eventually) but it seems that when setting the state the OnRead event handler is called multiple times and therefore I don't want the object to be null until the state has been fully set.

Any ideas on how to achieve this please?

 

 

[Marin Bratanov]

Hello Adrian,

You are correct that there are two approaches to solving this:

• using the grid state which is what you can do at the moment
• having the tabs always stay initialized (hide with CSS) that you've already upvoted

I think that the bit you are missing is using the OnStateInit event of the grid to restore its state before OnRead fires. You can use the OnStateInit and OnStateChange events in tandem to store the state, you can find examples in the demos and docs. If you don't need to keep that state across user sessions but just while flipping between the tabs, you don't even have to serialize it to any persistent storage - saving it in an application state will suffice (this can even be a simple field in the component that holds the tab strip).

Using the .SetState() method is expected to call OnRead, and the grid will also call OnRead when it initializes, which is why I expect you get the two calls. Keeping the state in a field next to the tabstrip will let you give it to the grid in OnStateInit if it exists, and there will be only one OnRead call with the new state. If you don't have a saved state, you simply do nothing in the event handler and the grid fires OnRead with default settings.

With that approach, you don't have to reset the state yourself at all - moving away from the tab strip page will dispose its view-model so the field that holds a reference to the state will be disposed as well, so when the user comes back there will be no state to load.

If you want it to persist you can add some UI like in the demo above to let the user load, save or clear it - this depends on the UX you are after, but the example from the docs does not require them - the two grid events are sufficient to persist and load it without an explicit user interaction with the state.

Regards,
Marin Bratanov
Progress Telerik