RadzenDataGrid data grid settings are reset to default when data manipulations #1019

Closed
opened 2026-01-29 17:47:50 +00:00 by claunia · 2 comments
Owner

Originally created by @aplib on GitHub (Oct 25, 2023).

Describe the bug

Expected behavior: Table column settings should not change when loading data
Observed behavior: Table column settings are reset to default values.

To Reproduce

Demo page: DataGrid save settings using LoadData binding
Button: "Test" - Table column settings are reset each time you click the "Test" button
Demo code:

@using Radzen
@using RadzenBlazorDemos.Data
@using RadzenBlazorDemos.Models.Northwind
@using Microsoft.EntityFrameworkCore
@using RadzenBlazorDemos.Services
@using Microsoft.JSInterop
@using System.Text.Json
@using System.Linq.Dynamic.Core

@inject IJSRuntime JSRuntime
@inject NavigationManager NavigationManager

@inherits DbContextPage

<p>This example shows how to save/load DataGrid state using Settings property when binding using LoadData event.</p>
<p>The state includes current page index, page size, groups and columns filter, sort, order, width and visibility.</p>
<RadzenButton Click="@(args => Settings = null)" Text="Clear saved settings" Style="margin-bottom: 16px" />
<RadzenButton Click="@(args => NavigationManager.NavigateTo("/datagrid-save-settings-loaddata", true))" Text="Reload" Style="margin-bottom: 16px" />

<RadzenButton Click=Test Text="Test" Style="margin-bottom: 16px" />

<RadzenDataGrid @ref=grid @bind-Settings="@Settings" LoadSettings="@LoadSettings" AllowColumnResize="true" Data="@employees" Item="Employee">
    <Columns>
        <RadzenDataGridColumn TItem="Employee" Property="Title" Title="Title" />
        <RadzenDataGridColumn TItem="Employee" Property="EmployeeID" Title="Employee ID" />
        <RadzenDataGridColumn TItem="Employee" Property="HireDate" Title="Hire Date" FormatString="{0:d}" />
        <RadzenDataGridColumn TItem="Employee" Property="City" Title="City" />
        <RadzenDataGridColumn TItem="Employee" Property="Country" Title="Country" />
    </Columns>
</RadzenDataGrid>

<EventConsole @ref=@console />

@code {

async void Test()
{
    employees = dbContext.Employees.Take(5).ToList();
}

    RadzenDataGrid<Employee> grid;
    IEnumerable<Employee> employees;
    EventConsole console;

    DataGridSettings _settings;
    public DataGridSettings Settings
    {
        get
        {
            return _settings;
        }
        set
        {
            if (_settings != value)
            {
                _settings = value;
                console.Log("Set Settings");
                InvokeAsync(SaveStateAsync);
            }
        }
    }

    private async Task LoadStateAsync()
    {
        console.Log("LoadStateAsync");
        var result = await JSRuntime.InvokeAsync<string>("window.localStorage.getItem", "SettingsLoadData");
        if (!string.IsNullOrEmpty(result))
        {
            _settings = JsonSerializer.Deserialize<DataGridSettings>(result);
        }
    }

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

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

    void LoadSettings(DataGridLoadSettingsEventArgs args)
    {
        if (Settings != null)
        {
            args.Settings = Settings;
        }
    }
}

Originally created by @aplib on GitHub (Oct 25, 2023). **Describe the bug** Expected behavior: Table column settings should not change when loading data Observed behavior: Table column settings are reset to default values. **To Reproduce** Demo page: [DataGrid save settings using LoadData binding](https://blazor.radzen.com/datagrid-save-settings-loaddata) Button: "Test" - Table column settings are reset each time you click the "Test" button Demo code: ``` @using Radzen @using RadzenBlazorDemos.Data @using RadzenBlazorDemos.Models.Northwind @using Microsoft.EntityFrameworkCore @using RadzenBlazorDemos.Services @using Microsoft.JSInterop @using System.Text.Json @using System.Linq.Dynamic.Core @inject IJSRuntime JSRuntime @inject NavigationManager NavigationManager @inherits DbContextPage <p>This example shows how to save/load DataGrid state using Settings property when binding using LoadData event.</p> <p>The state includes current page index, page size, groups and columns filter, sort, order, width and visibility.</p> <RadzenButton Click="@(args => Settings = null)" Text="Clear saved settings" Style="margin-bottom: 16px" /> <RadzenButton Click="@(args => NavigationManager.NavigateTo("/datagrid-save-settings-loaddata", true))" Text="Reload" Style="margin-bottom: 16px" /> <RadzenButton Click=Test Text="Test" Style="margin-bottom: 16px" /> <RadzenDataGrid @ref=grid @bind-Settings="@Settings" LoadSettings="@LoadSettings" AllowColumnResize="true" Data="@employees" Item="Employee"> <Columns> <RadzenDataGridColumn TItem="Employee" Property="Title" Title="Title" /> <RadzenDataGridColumn TItem="Employee" Property="EmployeeID" Title="Employee ID" /> <RadzenDataGridColumn TItem="Employee" Property="HireDate" Title="Hire Date" FormatString="{0:d}" /> <RadzenDataGridColumn TItem="Employee" Property="City" Title="City" /> <RadzenDataGridColumn TItem="Employee" Property="Country" Title="Country" /> </Columns> </RadzenDataGrid> <EventConsole @ref=@console /> @code { async void Test() { employees = dbContext.Employees.Take(5).ToList(); } RadzenDataGrid<Employee> grid; IEnumerable<Employee> employees; EventConsole console; DataGridSettings _settings; public DataGridSettings Settings { get { return _settings; } set { if (_settings != value) { _settings = value; console.Log("Set Settings"); InvokeAsync(SaveStateAsync); } } } private async Task LoadStateAsync() { console.Log("LoadStateAsync"); var result = await JSRuntime.InvokeAsync<string>("window.localStorage.getItem", "SettingsLoadData"); if (!string.IsNullOrEmpty(result)) { _settings = JsonSerializer.Deserialize<DataGridSettings>(result); } } private async Task SaveStateAsync() { console.Log("SaveStateAsync"); await JSRuntime.InvokeVoidAsync("window.localStorage.setItem", "SettingsLoadData", JsonSerializer.Serialize<DataGridSettings>(Settings)); } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await LoadStateAsync(); } } void LoadSettings(DataGridLoadSettingsEventArgs args) { if (Settings != null) { args.Settings = Settings; } } } ```
Author
Owner

@enchev commented on GitHub (Nov 8, 2023):

Hey @aplib,

The linked demo is using LoadData while your example not. Check the demo on how to save/load settings exactly when setting Data.

@enchev commented on GitHub (Nov 8, 2023): Hey @aplib, The linked demo is using LoadData while your example not. Check the demo on how to save/load settings exactly when setting Data.
Author
Owner

@aplib commented on GitHub (Nov 8, 2023):

But algorithms for working with settings should not be limited to just one data loading mode. If you do not want to not support other modes, then you need to write that this solution is limited.
I don't understand your comment. I looked at the code, I don’t understand why there is a breaking code in it, the settings are specially reset when the data is changed. If you avoid accepting the settings, then everything works. Unfortunately, my solution is made in a slightly different ideology and requires changing your code, otherwise I would suggest it.
Perhaps you are completely abandoning other data loading modes? It's not obvious to me.

@aplib commented on GitHub (Nov 8, 2023): But algorithms for working with settings should not be limited to just one data loading mode. If you do not want to not support other modes, then you need to write that this solution is limited. I don't understand your comment. I looked at the code, I don’t understand why there is a breaking code in it, the settings are specially reset when the data is changed. If you avoid accepting the settings, then everything works. Unfortunately, my solution is made in a slightly different ideology and requires changing your code, otherwise I would suggest it. Perhaps you are completely abandoning other data loading modes? It's not obvious to me.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1019