starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-02-04 05:35:44 +00:00
Code Issues 1.3k Packages Projects Releases 22 Wiki Activity

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

New Issue
Closed
opened 2026-01-29 17:51:37 +00:00 by claunia · 5 comments
claunia commented 2026-01-29 17:51:37 +00:00
Owner
Copy Link

Originally created by @k-Sacr on GitHub (Jul 5, 2024).

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

Originally created by @k-Sacr on GitHub (Jul 5, 2024). **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_
claunia commented 2026-01-29 17:51:37 +00:00
Author
Owner
Copy Link

@enchev commented on GitHub (Jul 9, 2024):

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:
e466de4d0e/Radzen.Blazor/RadzenDataGrid.razor.cs (L2018)

@enchev commented on GitHub (Jul 9, 2024): 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
claunia commented 2026-01-29 17:51:37 +00:00
Author
Owner
Copy Link

@k-Sacr commented on GitHub (Jul 9, 2024):

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 commented on GitHub (Jul 9, 2024): 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
claunia commented 2026-01-29 17:51:38 +00:00
Author
Owner
Copy Link

@k-Sacr commented on GitHub (Jul 18, 2024):

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

@k-Sacr commented on GitHub (Jul 18, 2024): @enchev Hi. Is there any hope that the problem will be addressed?
claunia commented 2026-01-29 17:51:38 +00:00
Author
Owner
Copy Link

@enchev commented on GitHub (Jul 18, 2024):

Maybe you've missed my commit? aea3147454

@enchev commented on GitHub (Jul 18, 2024): Maybe you've missed my commit? https://github.com/radzenhq/radzen-blazor/commit/aea31474545daf1434faff05a58bbf6e3d6e6f40
claunia commented 2026-01-29 17:51:38 +00:00
Author
Owner
Copy Link

@k-Sacr commented on GitHub (Jul 18, 2024):

Maybe you've missed my commit? aea3147

Oh yeah sorry, I missed it. Thank you!

@k-Sacr commented on GitHub (Jul 18, 2024): > Maybe you've missed my commit? [aea3147](https://github.com/radzenhq/radzen-blazor/commit/aea31474545daf1434faff05a58bbf6e3d6e6f40) Oh yeah sorry, I missed it. Thank you!
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
enhancement
good first issue
pull-request
Mirrored from GitHub Pull Request
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claunia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1286
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?