Hello,
While working on my .NET 8 app, I was trying to implement the DataGridSettings load/save, that I have used in .NET 7 where it works flawlessly.
When looking in the developer console, I see that the settings are created and remain in local storage, but when refreshing the page, everything get's reset.
This is my Razor component:
<PageTitle>Update Sales Team Member</PageTitle>
<RadzenRow>
<RadzenColumn Size="12">
<RadzenHeading Size="H2" style="display: inline-block; color: rgb(0, 87, 148)" Text="Update Existing Sales Team Member" />
</RadzenColumn>
</RadzenRow>
<RadzenRow>
<RadzenColumn Size="12">
<RadzenDataGrid @bind-Settings="@SalesTeamGridSettings" AllowFiltering="true" AllowColumnPicking="true" AllowPaging="true" PageSize="20"
AllowSorting="true" AllowMultiColumnSorting="true" ShowMultiColumnSortingIndex="true"
AllowColumnResize="true" AllowColumnReorder="true" ColumnWidth="200px" AllowVirtualization="true"
FilterPopupRenderMode="PopupRenderMode.OnDemand" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
Data="@SalesTeamItems" TItem="SalesTeamMasterListDto" RowSelect="@EditRow">
<Columns>
<RadzenDataGridColumn TItem="SalesTeamMasterListDto" Property="BerryId" Title="Berry ID" />
<RadzenDataGridColumn TItem="SalesTeamMasterListDto" Property="SipId" Title="SIP ID" />
<RadzenDataGridColumn TItem="SalesTeamMasterListDto" Property="SalesTeamFullName" Title="Sales Team Member" />
<RadzenDataGridColumn TItem="SalesTeamMasterListDto" Property="IsActive" Title="Is Active" TextAlign="TextAlign.Center">
<Template Context="data">
@if (data.IsActive == true)
{
<RadzenIcon Icon="check_box">
</RadzenIcon>
}
else
{
<RadzenIcon Icon="check_box_outline_blank">
</RadzenIcon>
}
</Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="SalesTeamMasterListDto" Property="DivisionName" Title="Division" />
<RadzenDataGridColumn TItem="SalesTeamMasterListDto" Property="TeamLeaderFullName" Title="Team Leader" />
<RadzenDataGridColumn TItem="SalesTeamMasterListDto" Property="SalesDirectorFullName" Title="Sales Director" />
</Columns>
</RadzenDataGrid>
</RadzenColumn>
</RadzenRow>
<RadzenRow Gap="2rem">
<RadzenColumn Size="12">
<RadzenButton Icon="filter_alt_off" Text="Clear saved grid settings" Click="@(args => SalesTeamGridSettings = null)" Variant="Variant.Flat" Style="margin-top: 8px" />
</RadzenColumn>
</RadzenRow>
And this is the code behind related to the datagrid:
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
SalesTeamItems = await DataService.GetAllSalesTeamMembers();
}
DataGridSettings _salesTeamGridSettings;
public DataGridSettings SalesTeamGridSettings
{
get
{
return _salesTeamGridSettings;
}
set
{
if (_salesTeamGridSettings != value)
{
_salesTeamGridSettings = value;
InvokeAsync(SaveStateAsync);
}
}
}
private async Task LoadStateAsync()
{
await Task.CompletedTask;
var result = await JSRuntime.InvokeAsync<string>("window.localStorage.getItem", "SalesTeamGridSettings");
if (!string.IsNullOrEmpty(result))
{
_salesTeamGridSettings = JsonSerializer.Deserialize<DataGridSettings>(result);
}
}
private async Task SaveStateAsync()
{
await Task.CompletedTask;
await JSRuntime.InvokeVoidAsync("eval", $@"window.localStorage.setItem('SalesTeamGridSettings', '{JsonSerializer.Serialize<DataGridSettings>(SalesTeamGridSettings)}')");
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await LoadStateAsync();
StateHasChanged();
}
}
Any idea what could be wrong here?
Thank you very much for your help.
