Added demo datagrid save settings to url

[k-Sacr]

Added a demo example of saving datagrid settings to url query using json serialization and base64 encoding.

Fix multi LoadData with settings:

Before:

After:

If remove

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender || loaded)
    {
        await LoadStateAsync();

        if (loaded)
        {
            loaded = false;
            await Task.Yield();
            await grid.Reload();
            loaded = false;
        }
    }
}

and move LoadStateAsync() to OnInitialized/OnInitializedAsync/SetParametersAsync

[enchev]

Hi @k-Sacr,

Thanks for your pull request however in my opinion the example is too specific to your case and we will unable to merge and support it. Loading also state before initialization of the component will not restore the DataGrid state properly - for example filtering will not be applied. I'm afraid that we cannot merge this.

[k-Sacr]

Hi @enchev thanks for your feedback.

Is the ability to share a link to a page with a datagrid where all the necessary settings (filters / sorting / grouping) are set to other users so specific?
It seems to me that users share links very often.

Loading also state before initialization of the component will not restore the DataGrid state properly - for example filtering will not be applied. I'm afraid that we cannot merge this.

Are you talking about code changes else to else if (settings == null) on ReloadOnFirstRender?
Can you please give an example where this is causing problems so that I can investigate further and find a solution?

Because if remove the extra loaddata call, it will greatly speed up loading, which will be especially noticeable with complex queries.
It will also solve the problem of "flickering" when datagrid is shown without settings, and then displayed with settings, this is very noticeable on your demos.

[enchev]

FilterValue is set however nothing will call LoadData to apply the filtering:

[k-Sacr]

@enchev Thanks for the screenshots, I did some more testing

1. I may not have described the pull request quite correctly, and misled you, I apologize.
   In demo datagrid-save-settings and datagrid-save-settings-loaddata don`t need remove code:
   There are no such changes in the pull request.

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender || loaded)
    {
        await LoadStateAsync();

        if (loaded)
        {
            loaded = false;
            await Task.Yield();
            await grid.Reload();
            loaded = false;
        }
    }
}

otherwise there will be an error

or need set render-mode="Server".

2. I also checked the work of the datagrid many times with the addition of the if(settings==null) code and did not find any problems, just removing the extra request "loaddata":

Without if(settings==null)

chrome_2023-08-15_00-54-00.mp4

With if(settings==null)

chrome_2023-08-15_00-57-25.mp4

[enchev]

Here is what I see with this change in the DataGrid using the same demo with no changes:

09:19:51.55 LoadStateAsync
09:19:51.55 LoadData
09:19:53.58 LoadData
09:19:53.69 LoadStateAsync
09:19:53.77 LoadStateAsync
09:19:53.78 LoadData
09:19:55.64 LoadStateAsync
09:19:55.66 LoadData

and without:

09:25:40.99 LoadStateAsync
09:25:41.09 LoadData
09:25:43.42 LoadData
09:25:43.43 LoadStateAsync
09:25:46.63 LoadStateAsync
09:25:46.65 LoadData
09:25:48.59 LoadStateAsync
09:25:48.59 LoadData

[k-Sacr]

Exactly, this change will not affect the current demos/projects in any way.
Because the call to LoadStateAsync() occurs in OnAfterRenderAsync when the ReloadOnFirstRender method has already been called.

But if the settings are stored in db/redis/url and call LoadStateAsync before FirstRender (for example OnInitialized/OnInitializedAsync/SetParametersAsync), then this will remove an extra critical request in ReloadOnFirstRender (where settings are not taken into account), and then Reload with settings will be called.

Then the "flickering" disappears (the first display without settings, then with the setting) and we remove the extra request, for large tables are x2 optimization.

And to show how it works, I added a new demo page.

[enchev]

But if the settings are stored in db/redis/url and call LoadStateAsync before FirstRender (for example OnInitialized/OnInitializedAsync/SetParametersAsync), then this will remove an extra critical request in ReloadOnFirstRender (where settings are not taken into account), and then Reload with settings will be called.

Ok. I see your point here and I will push this change in the DataGrid. The demo however for loading/saving settings to a URL query string does not work for me at all and cannot be merged - both Reload button and copy/paste of the url in a new browse tab will not reload any state:

Furthermore after every DataGrid operation the page will scroll to top which is highly undesired and also when you navigate out to some different demo and return to this one the user will expect state to be loaded similar to the other save/load settings demos however this is not the case here since the demo will simply start from the beginning.

Maybe an example on how to load/save state with OnInitialized() instead OnAfterRender() using some different technique like global service, etc. will be better.

[enchev]

Here is the change as I promised:
da5f7e2

[k-Sacr]

Thx!