RadzenDataGrid: Column width does not reset when using Reset method or clearing saved settings

[k-Sacr]

Describe the bug Resetting the column width in the RadzenDataGrid does not work when clearing saved settings or when calling the public void Reset(bool resetColumnState = true, bool resetRowState = false) method. The column width remains the same. However, sorting and sequencing are reset as expected.

To Reproduce Steps to reproduce the behavior:

1. Go to https://blazor.radzen.com/datagrid-save-settings
2. Change column width
3. Click "Clear saved settings"
4. See error

https://github.com/radzenhq/radzen-blazor/assets/18440948/5b347910-355a-48b3-9b8a-b8469c5bd6fe

This only works correctly if you first change the width, refresh the page (load the settings), and then reset the settings. The column width will then become the default.

https://github.com/radzenhq/radzen-blazor/assets/18440948/2f2f4364-f4bb-4bbe-943d-8e898b7af8b4

Expected behavior When resetting the settings or using the Reset() method, the column width should revert to its default state, as should sorting, grouping, filtering, and column visibility.

I spent almost a day searching for the bug, but could not find a solution

[enchev]

Clear button just sets Settings to null, you need to click Reload button in this demo to restore the default state. Reset() method already resets the column width: https://github.com/radzenhq/radzen-blazor/blob/e466de4d0e61c9d3a355a9d7f8b8b1d2c7cd8938/Radzen.Blazor/RadzenDataGrid.razor.cs#L2018

[k-Sacr]

Hi, @enchev

Reset() method already resets the column width

This does not work.

Example code, add Reset button with Reset() method, for https://blazor.radzen.com/datagrid-save-settings:

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

@inject IJSRuntime JSRuntime
@inject NavigationManager NavigationManager

@inherits DbContextPage

<p>This example shows how to save/load DataGrid state using Settings property.</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", true))" Text="Reload" Style="margin-bottom: 16px" />
<RadzenButton Click=Reset Text="Reset" Style="margin-bottom: 16px" />
<RadzenDataGrid @ref=@DataGrid @bind-Settings="@Settings" AllowFiltering="true" AllowColumnPicking="true" AllowGrouping="true" AllowPaging="true" PageSize="4"
                AllowSorting="true" AllowMultiColumnSorting="true" ShowMultiColumnSortingIndex="true" 
                AllowColumnResize="true" AllowColumnReorder="true" ColumnWidth="200px"
                FilterPopupRenderMode="PopupRenderMode.OnDemand" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" Data="@employees">
    <Columns>
        <RadzenDataGridColumn Title="Employee" Sortable="false" Filterable="false" UniqueID="Employee">
            <Template Context="data">
                <RadzenImage Path="@data.Photo" style="width: 40px; height: 40px; border-radius: 8px; margin-right: 8px;" AlternateText="@(data.FirstName + " " + data.LastName)" />
                @data.FirstName @data.LastName
            </Template>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn Property="@nameof(Employee.Title)" Title="Title" />
        <RadzenDataGridColumn Property="@nameof(Employee.EmployeeID)" Title="Employee ID" />
        <RadzenDataGridColumn Property="@nameof(Employee.HireDate)" Title="Hire Date" FormatString="{0:d}" />
        <RadzenDataGridColumn Property="@nameof(Employee.City)" Title="City" />
        <RadzenDataGridColumn Property="@nameof(Employee.Country)" Title="Country" />
    </Columns>
</RadzenDataGrid>

<EventConsole @ref=@console />

@code {
    IEnumerable<Employee> employees;
    EventConsole console;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        employees = dbContext.Employees;
    }

    DataGridSettings _settings;
    public DataGridSettings Settings 
    { 
        get
        {
            return _settings;
        }
        set
        {
            if (_settings != value)
            {
                _settings = value;
                InvokeAsync(SaveStateAsync);
            }
        }
    }

    public RadzenDataGrid<Employee> DataGrid { get; set; }

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

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

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

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

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

    public void Reset()
    {
        DataGrid.Reset(true, true);
    }
}

Video:

https://github.com/radzenhq/radzen-blazor/assets/18440948/f30adb2e-aca0-48dd-816a-9eeaf153075c

[k-Sacr]

@enchev Hi. Is there any hope that the problem will be addressed?

[enchev]

Maybe you've missed my commit? https://github.com/radzenhq/radzen-blazor/commit/aea31474545daf1434faff05a58bbf6e3d6e6f40

[k-Sacr]

Maybe you've missed my commit? aea3147

Oh yeah sorry, I missed it. Thank you!