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

[PR #1175] Fix DataGrid not loading with settings if equal to default. #2559

New Issue
Open
opened 2026-01-29 18:19:24 +00:00 by claunia · 0 comments
claunia commented 2026-01-29 18:19:24 +00:00
Owner
Copy Link

Original Pull Request: https://github.com/radzenhq/radzen-blazor/pull/1175

State: closed
Merged: Yes

Fix DataGrid not loading with settings if equal to default.

The "Query.Top == null" check is necessary to avoid multiple calls to the Reload() method.
The first Reload() call sets Query.Top = PageSize;

Perhaps there is a better way to check without using Query.Top == null

Demo based on /datagrid-save-settings-loaddata:

@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" />
<RadzenDataGrid @ref=grid @bind-Settings="@Settings" LoadSettings="@LoadSettings" 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" IsLoading=@isLoading Count="@count" LoadData=@LoadData TItem="Employee">
    <Columns>
        <RadzenDataGridColumn TItem="Employee" Property="Photo" Title="Employee" Sortable="false" Filterable="false">
            <Template Context="data">
                <RadzenImage Path="@data.Photo" style="width: 40px; height: 40px; border-radius: 8px; margin-right: 8px;" />
                @data.FirstName @data.LastName
            </Template>
        </RadzenDataGridColumn>
        <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 {
    RadzenDataGrid<Employee> grid;
    IEnumerable<Employee> employees;
    EventConsole console;

    int count;
    bool isLoading = false;
    bool loaded;
    async Task LoadData(LoadDataArgs args)
    {
        console.Log("LoadData");
        isLoading = true;

        await Task.Yield();

        var query = dbContext.Employees.AsQueryable();

        if (!string.IsNullOrEmpty(args.Filter))
        {
            query = query.Where(args.Filter);
        }

        if (!string.IsNullOrEmpty(args.OrderBy))
        {
            query = query.OrderBy(args.OrderBy);
        }

        count = query.Count();

        // Simulate async data loading
        await Task.Delay(2000);

        employees = await Task.FromResult(query.Skip(args.Skip.Value).Take(args.Top.Value).ToList());

        isLoading = false;

        loaded = true;
    }

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

    private async Task LoadStateAsync()
    {
        var result = $$"""{"Columns":[{"UniqueID":null,"Property":"Photo","Visible":true,"Width":null,"OrderIndex":null,"SortOrder":null,"SortIndex":null,"FilterValue":null,"FilterOperator":6,"SecondFilterValue":null,"SecondFilterOperator":0,"LogicalFilterOperator":0},{"UniqueID":null,"Property":"Title","Visible":true,"Width":null,"OrderIndex":null,"SortOrder":null,"SortIndex":null,"FilterValue":null,"FilterOperator":6,"SecondFilterValue":null,"SecondFilterOperator":0,"LogicalFilterOperator":0},{"UniqueID":null,"Property":"EmployeeID","Visible":true,"Width":null,"OrderIndex":null,"SortOrder":null,"SortIndex":null,"FilterValue":null,"FilterOperator":0,"SecondFilterValue":null,"SecondFilterOperator":0,"LogicalFilterOperator":0},{"UniqueID":null,"Property":"HireDate","Visible":true,"Width":null,"OrderIndex":null,"SortOrder":null,"SortIndex":null,"FilterValue":null,"FilterOperator":0,"SecondFilterValue":null,"SecondFilterOperator":0,"LogicalFilterOperator":0},{"UniqueID":null,"Property":"City","Visible":true,"Width":null,"OrderIndex":null,"SortOrder":null,"SortIndex":null,"FilterValue":null,"FilterOperator":6,"SecondFilterValue":null,"SecondFilterOperator":0,"LogicalFilterOperator":0},{"UniqueID":null,"Property":"Country","Visible":true,"Width":null,"OrderIndex":null,"SortOrder":null,"SortIndex":null,"FilterValue":null,"FilterOperator":6,"SecondFilterValue":null,"SecondFilterOperator":0,"LogicalFilterOperator":0}],"Groups":[],"CurrentPage":0,"PageSize":4}""";
        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 OnInitializedAsync()
	{
		await LoadStateAsync();

        await base.OnInitializedAsync();
	}


    void LoadSettings(DataGridLoadSettingsEventArgs args)
    {
        if (Settings != null)
        {
            args.Settings = Settings;
        }
    }
}
**Original Pull Request:** https://github.com/radzenhq/radzen-blazor/pull/1175 **State:** closed **Merged:** Yes --- Fix DataGrid not loading with settings if equal to default. The "`Query.Top == null`" check is necessary to avoid multiple calls to the Reload() method. The first Reload() call sets `Query.Top = PageSize;` Perhaps there is a better way to check without using `Query.Top == null` Demo based on /datagrid-save-settings-loaddata: ``` @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" /> <RadzenDataGrid @ref=grid @bind-Settings="@Settings" LoadSettings="@LoadSettings" 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" IsLoading=@isLoading Count="@count" LoadData=@LoadData TItem="Employee"> <Columns> <RadzenDataGridColumn TItem="Employee" Property="Photo" Title="Employee" Sortable="false" Filterable="false"> <Template Context="data"> <RadzenImage Path="@data.Photo" style="width: 40px; height: 40px; border-radius: 8px; margin-right: 8px;" /> @data.FirstName @data.LastName </Template> </RadzenDataGridColumn> <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 { RadzenDataGrid<Employee> grid; IEnumerable<Employee> employees; EventConsole console; int count; bool isLoading = false; bool loaded; async Task LoadData(LoadDataArgs args) { console.Log("LoadData"); isLoading = true; await Task.Yield(); var query = dbContext.Employees.AsQueryable(); if (!string.IsNullOrEmpty(args.Filter)) { query = query.Where(args.Filter); } if (!string.IsNullOrEmpty(args.OrderBy)) { query = query.OrderBy(args.OrderBy); } count = query.Count(); // Simulate async data loading await Task.Delay(2000); employees = await Task.FromResult(query.Skip(args.Skip.Value).Take(args.Top.Value).ToList()); isLoading = false; loaded = true; } DataGridSettings _settings; public DataGridSettings Settings { get { return _settings; } set { if (_settings != value) { _settings = value; console.Log("Set"); InvokeAsync(SaveStateAsync); } } } private async Task LoadStateAsync() { var result = $$"""{"Columns":[{"UniqueID":null,"Property":"Photo","Visible":true,"Width":null,"OrderIndex":null,"SortOrder":null,"SortIndex":null,"FilterValue":null,"FilterOperator":6,"SecondFilterValue":null,"SecondFilterOperator":0,"LogicalFilterOperator":0},{"UniqueID":null,"Property":"Title","Visible":true,"Width":null,"OrderIndex":null,"SortOrder":null,"SortIndex":null,"FilterValue":null,"FilterOperator":6,"SecondFilterValue":null,"SecondFilterOperator":0,"LogicalFilterOperator":0},{"UniqueID":null,"Property":"EmployeeID","Visible":true,"Width":null,"OrderIndex":null,"SortOrder":null,"SortIndex":null,"FilterValue":null,"FilterOperator":0,"SecondFilterValue":null,"SecondFilterOperator":0,"LogicalFilterOperator":0},{"UniqueID":null,"Property":"HireDate","Visible":true,"Width":null,"OrderIndex":null,"SortOrder":null,"SortIndex":null,"FilterValue":null,"FilterOperator":0,"SecondFilterValue":null,"SecondFilterOperator":0,"LogicalFilterOperator":0},{"UniqueID":null,"Property":"City","Visible":true,"Width":null,"OrderIndex":null,"SortOrder":null,"SortIndex":null,"FilterValue":null,"FilterOperator":6,"SecondFilterValue":null,"SecondFilterOperator":0,"LogicalFilterOperator":0},{"UniqueID":null,"Property":"Country","Visible":true,"Width":null,"OrderIndex":null,"SortOrder":null,"SortIndex":null,"FilterValue":null,"FilterOperator":6,"SecondFilterValue":null,"SecondFilterOperator":0,"LogicalFilterOperator":0}],"Groups":[],"CurrentPage":0,"PageSize":4}"""; 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 OnInitializedAsync() { await LoadStateAsync(); await base.OnInitializedAsync(); } void LoadSettings(DataGridLoadSettingsEventArgs args) { if (Settings != null) { args.Settings = Settings; } } } ```
claunia added the pull-request label 2026-01-29 18:19:24 +00:00
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 pull-request
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#2559
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?