[IgbGrid] state-persistence - Reload causes ExpectedStartOfValueNotFound

[mddifilippo89]

In Blazor WASM the error is explicit (See screenshot below)
In Blazor Server the issue will lead to a different console error but the app will throw a similar error:

JsonReaderException: 'e' is an invalid start of a value. LineNumber: 0 | BytePositionInLine: 0.

WASM

1. Navigate to this sample
   https://www.infragistics.com/blazor-client/grids/grid/state-persistence-main
   https://github.com/IgniteUI/igniteui-blazor-examples/tree/vnext/samples/grids/grid/state-persistence-main
2. Run and click the Reset button

Server:

1. Download attached Server sample
   IgniteIgbGridSample2 (2).zip

2. Run sample, click Fetch Data in the nav tree

3. Move a column to a different position

4. Navigate away from the sample by clicking Counter or Home

5. Click back to Fetch Data

6. Click Restore Grid State

Here is a comparison of the two WASM / Server side by side (WASM left, Server Right) including the server's stacktrace

[damyanpetev]

From the stack the error actually originates from the paginator.Paginate(0); call which is quite odd, but it's possible the issue is with that component's API

[mddragnev]

@mddifilippo89
So couple of things:
The issue with the paginator paginate has a fix on PR internally (which was the issue in the Blazor WASM)
The issue with the Blazor server which is kind of reproducible in WASM too: seems like that it is a sample issue because the sample dispose is called after the grid has already been disposed and thus state persistance is already destroyed, so the state is null. I have made a PR updating the way how the grid is saving its state when navigating to our live samples here: IgniteUI/igniteui-blazor-examples#842 so you can see and update the blazor server sample navigation like this. Then there wont be an error.
Also, when the sample issue is fixed with the code I provided, you may see that not all of the state is updated on initial rendering (for example pinning is not). This is because we have an issue within the product with the initial restoring of the column and the paginator state (sorting, grouping,etc works fine).
However, if you click the restore button, once the grid is fully loaded, the state is restored successfully.

[t-johnson]

Thankyou @mddragnev this has now allowed us to save the grid state when the user navigates away from the page.
However I am still a little stuck on the other side of things- when the user returns to the page, the Rendered event is not occuring. I'm using Blazor server, if it makes a difference. Is that expected? If i use the "DataChanged" event, I am able to restore the grid state.

[mddragnev]

Hey @t-johnson,
I'm glad that I helped. Seems like Rendered is indeed not fired in Blazor server. I have logged an issue which you can watch for updates: #144. We are going to investigate this further. However, Blazor WASM Rendered is working correct.

[t-johnson]

@dkamburov thanks once again!
In the meantime, I am using the "DataChanged" event with a local flag to ensure I restore the grid state only once. Would there be a better workaround until #144 is available?

[mddragnev]

@t-johnson How many times your DataChanged is fired? If multiple then you should restore the state at the last one. Seems to me that for now this is your best bet when trying to restore the state in Blazor server. We plan to expose an event that will be used exactly for this scenario but in the meantime you can use your solution.

[mddifilippo89]

@mddragnev

Thank you, I've confirmed your recommendations work. However my sample above is using AfterRenderAsync and I get this argument exception on RegisterLocationChangingHandler

[t-johnson]

@t-johnson How many times your DataChanged is fired? If multiple then you should restore the state at the last one. Seems to me that for now this is your best bet when trying to restore the state in Blazor server. We plan to expose an event that will be used exactly for this scenario but in the meantime you can use your solution.

It seems that the DataChanged event is fired twice when there is data in the collection that is bound. However if there is no elements in the bound collection, the DataChanged event is not fired at all... this makes it a little challenging to restore the state of the columns. @dkamburov Can you suggest another event that i might be able to use to get this working in the current release?

[mddragnev]

@mddragnev

Thank you, I've confirmed your recommendations work. However my sample above is using AfterRenderAsync and I get this argument exception on RegisterLocationChangingHandler

@mddifilippo89 The argument type inside OnLocationChanged method should be LocationChangingContext instead of LocationChangedEventArgs
So it should be looking like this:

    ValueTask OnLocationChanged(LocationChangingContext e)
    {
        SaveGridStateAsync();
        return ValueTask.CompletedTask;
    }

[mddragnev]

@t-johnson How many times your DataChanged is fired? If multiple then you should restore the state at the last one. Seems to me that for now this is your best bet when trying to restore the state in Blazor server. We plan to expose an event that will be used exactly for this scenario but in the meantime you can use your solution.

It seems that the DataChanged event is fired twice when there is data in the collection that is bound. However if there is no elements in the bound collection, the DataChanged event is not fired at all... this makes it a little challenging to restore the state of the columns. @dkamburov Can you suggest another event that i might be able to use to get this working in the current release?

@t-johnson
Currently, the DataChanged is your best bet. What issue are you facing with it? Could you please explain and provide a sample if possible so that we can figure out a workaround until we expose a better event?

[t-johnson]

The problem we have with the 'DataChanged' event is that it does not fire if the Data is an empty array.
In the attached sample, the ForecastService.GetForecastAsync method is returning an empty array. when the user sorts or moves the columns, the state is saved, but the next time the user returns to the page, the state is not restored.
IgniteIgbGridSample3.zip

[mddragnev]

@t-johnson Unfortunately, DataChanged is designed not to fire when there is no data. So if you want to achieve this behaviour then a workaround would be to wait for some time before restoring the state (within that time the grid would be initialized). We are now working on exposing a new event that would be perfect for your scenario and you can expect it in the following releases. Meanwhile, something like this might work:

await Task.Delay(100).ContinueWith(async (x) => {
     await RestoreGridStateAsync();
});