DataGrid save/load settings issue

Radzen.Blazor Components
1

Hi there,

I'm having some trouble implementing the solution outlined in the demo at Blazor DataGrid Component - Save / Load Settings | Free UI Components by Radzen...

I am trying to get my datagrid to remember its filters when I navigate away from and then back to the page containing it. I am debugging and inspecting the Settings object which remembers my custom filter text, but the text is not actually manifesting on the screen in the filter text bar. Any reason why this might be happening? Here is my code:

<RadzenDataGrid Data="@(_cohorts.Where(c => c.Template.Type == type))"
TItem="DbTemplateTable"
@ref=@_cohortGrid
@bind-Settings="@Settings"
AllowFiltering="true"
IsLoading="@_cohortDataLoading"
FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
FilterMode="FilterMode.SimpleWithMenu"
AllowSorting="true"
AllowColumnResize="true"
SelectionMode="DataGridSelectionMode.Multiple"
@bind-Value="@_selectedCohorts"
RowSelect="RowSelected"
RowDeselect="RowDeselected"
AllowVirtualization="true"
Style="@DataTableStyle">
{columns etc....}

DataGridSettings _settings;

public DataGridSettings Settings
{
get
{
return _settings;
}
set
{
if (_settings != value)
{
_settings = value;
InvokeAsync(SaveStateAsync);
}
}
}protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await LoadStateAsync();
StateHasChanged();
}
}

private async Task LoadStateAsync()
{
await Task.CompletedTask;

var result = await JSRuntime.InvokeAsync<string>("window.localStorage.getItem", "Settings");
if (!string.IsNullOrEmpty(result))
{
    try
    {
        _settings = JsonSerializer.Deserialize<DataGridSettings>(result);
    }
    catch (JsonException)
    {
        _settings = new DataGridSettings();
    }
}

}

private async Task SaveStateAsync()
{
await Task.CompletedTask;

await JSRuntime.InvokeVoidAsync("window.localStorage.setItem", "Settings", JsonSerializer.Serialize<DataGridSettings>(Settings));

}

2

Please format your code - check the forum FAQ for tips.

1 Like
3

My mistake:

<RadzenDataGrid Data="@(_cohorts.Where(c => c.Template.Type == type))"
TItem="DbTemplateTable"
@ref=@_cohortGrid
@bind-Settings="@Settings"
AllowFiltering="true"
IsLoading="@_cohortDataLoading"
FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
FilterMode="FilterMode.SimpleWithMenu"
AllowSorting="true"
AllowColumnResize="true"
SelectionMode="DataGridSelectionMode.Multiple"
@bind-Value="@_selectedCohorts"
RowSelect="RowSelected"
RowDeselect="RowDeselected"
AllowVirtualization="true"
Style="@DataTableStyle">
{columns etc....}

DataGridSettings _settings;

public DataGridSettings Settings
{
get
{
return _settings;
}
set
{
if (_settings != value)
{
_settings = value;
InvokeAsync(SaveStateAsync);
}
}
}protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await LoadStateAsync();
StateHasChanged();
}
}

private async Task LoadStateAsync()
{
await Task.CompletedTask;
var result = await JSRuntime.InvokeAsync<string>("window.localStorage.getItem", "Settings");
if (!string.IsNullOrEmpty(result))
{
    try
    {
        _settings = JsonSerializer.Deserialize<DataGridSettings>(result);
    }
    catch (JsonException)
    {
        _settings = new DataGridSettings();
    }
}
}

private async Task SaveStateAsync()
{
await Task.CompletedTask;
await JSRuntime.InvokeVoidAsync("window.localStorage.setItem", "Settings", JsonSerializer.Serialize<DataGridSettings>(Settings));
}
4

Any ideas? I've formatted the code

5

That's the only suspicious thing I see. It will cause the data grid to rebind too often. I suggest keeping a separate variable for the filtered value. Can you reproduce your issue by editing our online demo?

6

Everytime blazor passes in a new enumerable to RadzenDataGrid.Data, the datagrid resets all of it's formatting.

Use a List<T> to hold your data

<RadzenDatagGrid Data=myList>

and then after loading the data:

var newData = httpclient.fetchData()
myList.Clear();
myList.AddRange(newData);
grid.Reload();